titi-fe’s diary

新米フロントエンドエンジニア。勉強のアウトプットおよび書評等を載せます。

リーダブルコード読んだのでまとめ

1．名前について

  • 名前には情報を詰め込む。
  • 明確で具体的で誤解されない名前を付ける。

 

2．美しさ

  • 一貫性のある改行位置
  • 縦の線をまっすぐにする
  • 一貫性と意味のある並び
  • メソッド等をグルーピングして改行やコメントをいれる
  • 一貫性のあるインデント

 

3．コメント

コメントすべきではないこと（名前からすぐにわかること）にはコメントしない。

 

以下コメントすべきこと

  • コメントすべきではないこと（名前からすぐにわかること）にはコメントしない
  • コードを書いたときの自分の考え
  • コードの欠陥
  • 定数
  • 質問されそうなこと
  • はまりそうな罠
  • 全体像
  • 要約

 

以下コメントの書き方

  • 簡潔
  • あいまいな代名詞を避ける
  • 関数の動作を正確に記述
  • 出入力には実例を使う
  • コードの意図を書く
  • 名前付き引数のよくわからない引数にはコメントを書く
  • 多くの意味が込められた言葉を使って簡潔に

 

制御フロー

条件式の並び順

左側： 「調査対象」の式。変化する。

右側： 「比較対象」の式。あまり変化しない。

 

if/elseの並び順

  • 関心を引く条件や目立つ条件を先に書く
  • 単純な条件を先に
  • 条件は否定形より肯定系を使う

 

三項演算子

基本的にはif/elseを使う。三項演算子はそれによって簡潔になるとき、他の人が理解する時間が短くなる時にだけ使う。

 

その他

  • do/while ループを避ける
  • 関数から早く返す
  • ネストを浅くする
  • goto を避ける

 

巨大な式を分割する

  • 説明変数を使う
  • 要約変数を使う
  • 理解が難しい短絡評価を使わない
  • 複雑なロジックはより優雅な手法を見つける
  • 同じ式は抽出してまとめる

 

変数と読みやすさ

変数の問題点

  • 変数が多いと変数を追跡するのが難しくなる
  • 変数のスコープが大きいとスコープを把握するのが難しくなる
  • 変数が頻繁に変更されると現在の値を把握するのが難しくなる

 

変数を削除する

  • 役に立たない一時変数を削除
  • 中間結果を保持している変数を削除して中間結果をそのまま使う
  • 制御フローの変数を削除する

 

変数のスコープを縮める

スコープを縮めて変数にアクセスしづらくする

 

定義の位置を下げる

スコープの先頭に定義するのではなく使う直前に定義する

 

変数は一度だけ書き込む

const, final, immutableなどで変数に一度だけ値を設定する

 

一度に一つのこと

一度に複数のことをするコードは理解しにくい。一度に一つこことしかしないようにタスクを個別に完結させる。

【Javascript】オブジェクト＋テンプレートを使った動的ページ作成

今回やること

前回作ったみんなの自己紹介オブジェクトをもとに、

テンプレートを作って、それによる動的ページの作成をします。

 

テンプレート

 

説明

let html = ""

これはループさせた際に生成されるhtml形式のデータをここに格納するための箱です。

ループのあとに,console.log(html) で確認するとどうなっているかわかります。

 

for (var i = 0; i < introData.length; i++) {
　html += '<div class="intro-data">'
　html += '<div class="name">名前：'+ introData[i].name +'</div>'
　html += '<div class="gender">性別：'+ introData[i].gender +'</div>'
　html += '<div class="age">年齢：'+ introData[i].age +'</div>'
　html += '<div class="hobby">趣味：'+ introData[i].hobby +'</div>'
　html += '</div>'
}

 

for文でループ処理を走らせています。

 

for (var i = 0; i < introData.length; i++)

initial expression

 

for (var i = 0; i < introData.length; i++)

condition

conditionがtrueの限りループが続く。

 

for (var i = 0; i < introData.length; i++)

increment expression

 

introData[i].hogehoge

その回のobjectの内容を見ている。

1回目のループなら、introdata[0]

2回めなら、introData[1]   といった感じになります。

 

それをhtml += で毎回、let htmlの内容に足していきます。

 

最後にappendでhtmlの内容を、書き出してあげて終了となります。

【JavaScript】 オブジェクトと作成したオブジェクトを引数として使う

Object

今回やること

今回はみなさんに自分の自己紹介オブジェクトを作ってもらって、

そのオブジェクトを引数として関数に与えて、そのオブジェクトが関数にしっかりと渡されているかどうかというのを確認していきたいと思います。

 

オブジェクトの前に関数とは？

関数というのは何をしてくれるのか？ということを抑えておきましょう

関数とは、引数を受け取ってその引数を使った処理の結果をreturnとして返してくれるものと覚えておいてください。

 

オブジェクトの作成

まず、自己紹介オブジェクトを作る際、今回はオブジェクトリテラルを使ってみましょう。

※オブジェクトリテラルが何かわからない方はこちらの記事を参照してください。

 

こんなオブジェクトが作れていればＯＫです。

http://codepen.io/titi/pen/RoNZJL

オブジェクトを引数として使う

では、作ったオブジェクトを格納した変数を別のfunctionの引数としてつかって、

その呼び出したfunctionの中でその引数を確認してみましょう。

http://codepen.io/titi/pen/bBNrmm

 

これでconsole logにしっかりと自分の作ったオブジェクトが表示されれば成功です。

titi-fe.hatenablog.com

【Javascript】オブジェクトについて 参照編

Object

オブジェクトの参照渡しについて

JavaScriptにおいて、値を渡す際、2つのタイプがあって、

値渡しと参照渡しというものがあります。

 

値渡しと参照渡しはどういうときに起こるのかということを

結論からいうと

Primitive 型は、値渡し

Object 型は、参照渡し　です。

 

値渡し・参照渡しについて

値渡し：

値渡しは、その値そのもののコピーを渡すというイメージです。

例えば

var a, b;

a = 'hoge';

b = 'hogehoge';

 

console.log(a);

console.log(b);

 

と入力してブラウザで確認した後に、

var a, b;

a = 'hoge';

b = a;

b = 'hogehoge';

 

console.log(a);

console.log(b);

 

赤い部分を追加してみてください。

赤字の部分では、bの値はそのままaの値が表示されるとおもいます。

しかし、変数a自体は何も影響を受けていない（hogeが表示されるので）のがわかるとおもいます。

 

こうなるのは、b=a; でbにaの値を代入して実行しているからです。

ここでa自体を代入しているわけではないということを必ず抑えておいてください。

 

参照渡し：

参照渡しというのは、ざっくりいうと、参照の保存先のリンクを渡すということ、つまり結果として値を共有するようなイメージになります。もっとざっくりいうと参照先をそのまま代入しているということです。

 

例えば

a = {
a_a : 'hoge',
a_b : 'hoge'
}

というオブジェクトを作って、

 

var a,b;


a = {
a_a : 'hoge',
a_b : 'hoge'
}


b = a;
b.a_b = 'hogehoge';


console.log(a);　//aも変わる
console.log(b);　//bも変わる

 

前述した通り、b = a;では、

bにaのリンクを貼っていて、そのリンク先にアクセスして値をいじるので、

a自体にも影響を及ぼしています。

 

この挙動の違いをおさえておいてください。

 

【Javascript】オブジェクトについて

Object

オブジェクト

オブジェクトを理解して使えるようになると、ダイナミックなページを作ることができるようになるので、今回はそれを紹介します。

 

今回作成するもの

外部ファイルにJSON形式でオブジェクトを作成し、そのJSONからデータをとり、自己紹介リストを動的に書き出すprojctを作ってみます。

 

その前にObjectとは？

Objectとはなんでも入れられる（変数、function, String, Number, Array, Objectなど）机で、かつその引き出し一つ一つに名前を付けられるようなものだとイメージするとわかりやすいとおもいます。

 

オブジェクトの作り方

オブジェクトの作り方については4つあるのですが、以下に自分がよく使う順番でオブジェクトの作成法を書きます

 

1.　オブジェクトリテラルにより作成する

2. 　コンストラクタ関数を使ってオブジェクトを作成

3.    new 演算子を使って作成

4.　Object.create メソッドを使って作成

 

 1.　オブジェクトリテラルにより作成する

このオブジェクトリテラルっていうのは何なのかですが、

例えばString, Numberだったら、

var stringHoge = "hoge";

var numberHoge = 5;

 

と言った感じで作れたと思いますが、オブジェクトもこのように書くことができます。

 

var objectHoge = { 'name' : 'titi',

                               'gender' :' 'female',

                               'age': '50'};

 

2. 　コンストラクタ関数を使ってオブジェクトを作成

こちらについては、ちょっと難しいので、別記事を書く予定です。

 

3.    new 演算子を使って作成

ver Person =  new Object( );

Person.name = 'titi';

Person.gender = 'female';

Person.age = '50';

 

こんな感じで作ることができます。

 

4.　Object.create メソッドを使って作成

これについても別途説明します。

 

 

 

初めてのJavascript第2番の書評　読了後の変化

ゲーム 書評

2ヶ月ほど前に

初めてのJavaScript第2番

を読みました。

 

初めてのJavaScript第2番はこんな方におすすめ

  • JavaScriptの基礎をしっかりと身につけたい方
  • 根気強く勉強できる方（結構ページ数も多いので）

 

逆にこんな方にはおすすめできないです。

  • JavaScriptの概要ではなく、もっとフォーカスを絞って勉強したい（たとえば、配列、オブジェクト等の理解を深めたいなど）

 

 

 では、読む前と読んだ後の変化について書いていきます。

 

結論として、この本を読んだあとどうなったかというと

JavaScriptのコードを理解でき、小さなバグの修正等ができるようになりました。

 

この本読むだけで、仕事でばりばりJavascript使えるようになるんじゃね？と当初は思っていたんですが、やはりそういうわけにはいきませんでしたね。

 

ただ、何をしているかをだいたい理解できるようになったのでそれだけでも読む価値あるかなと思います。

 

あと、Javascriptの基礎やら仕様やらについて書いてあるので、結構この本を通して身に着けたことは応用できたりしました！

 

以上！

 

 

DOMによるJavaScriptの完全分離

これまでのサンプルでは、HTMLとJavaScriptは完全に分離してきたが、onloadイベントハンドラーを使っていたため、完全たDOMスクリプティングではなかった、先ほど、イベントリスナーとセットの方法を学んだので、ここではloadイベントもDOMイベントハンドリング手法に切り替える。