[Day2] JavaScriptの基礎 part1

本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー

JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

2.1 Hello, world!

知らない単語

• モジュールとは
  • 変数や関数をまとめたもの

学んだこと

• JavaScriptのプログラムは、scriptタグでHTML内の任意の部分に挿入できる

• scriptタグには「type」、「language」など、最近ではほとんど使用されない属性がいくつかある

• scriptタグはsrc属性と中身のコード、両方を持つことはできないので、srcか中身のコードどちらかにする

感想

• 古くて現在は使われていない書き方などもあるので、最新の正しい書き方を調べて覚えていく必要がある。

2.2 コード構造

知らない単語

• なし

学んだこと

• 文はセミコロンで区切る事ができる

• 改行があるほとんどの場合、改行を「暗黙」のセミコロンと解釈し、セミコロンは省略することが可能
  alert('Hello')
  alert('World')

上記のコードでも正常に作動する

• しかし、常に改行が「暗黙」のセミコロンとなるわけではない
  alert(1+
  5
  +7);

上記のコードは「13」が出力され、正常に作動する
行の終わりが「+」で終わっているのでセミコロンが必要ないのを自動で判断してくれている

• プログラムが複雑になってきた時に、それを説明するためにコメントを追加する必要があるが、
  スラッシュ文字「/」を使う
  1行の場合は「//」、複数行の場合はスラッシュとアスタリスク「/*」で最初と最後を囲う

試してみた

実際にconsole内で改行を加えても認識されることがわかる

感想

• 改行でセミコロンを省略できるのは知らなかったので、今後使える場面で積極的に使用していきたい。
  また、言語によってコメントアウトの方法が違うので、気をつけたい。

2.3 モダンなモード, "use strict"

知らない単語

• ディレクティブとは

  • コードを変換するソフトウェアに指示を与えるもの

• Strictモードとは

  • javascriptのコードを厳しくエラーチェックすることができる仕組みで、バグになりそうな可能性を潰しつつ、コードを書き進めることができる

学んだこと

• 通常はスクリプト全体に対して使うが、関数の頭に"use strict"を置くことで、その関数内でのみStrictモードが有効になる

• "use strict"をキャンセルする方法は無いので、一度strict modeに入るとそのままになる

• JavaScriptは高度な言語構造をサポートしているので、use strictが自動的に有効になり、基本的には"use strict"を追加する必要はない

感想

• JavaScriptで普通にコードを書く場合、基本的には"use strict"を気にする必要は無いと思うが、もし使用する場合は先頭に書く、キャンセルの方法は無いなどの特徴を頭に入れておく必要がある。

2.4 変数

知らない単語

• 代入演算子とは

  • 右オペランドの値を、左のオペランドへ値を代入する。「=」の事

• 関数型言語とは

  • 関数の定義と適用の組み合わせでコーディングするプログラミング方法。数学的な表現で記述できるため、研究目的での利用が多い

• エイリアス

  • ファイル等の実体を別の名前で参照する機能。エイリアスを削除しても本体に影響はない

学んだこと

• JavaScriptで変数を作るには、「let」を使う
  例、let message = 'World!';　等

• let user = 'Bill'
  , age = 30
  , message = 'World';
  「let」を使わない、カンマで始まるなど他のパターンもあるが、好みの問題である

• 古いコードでは、「let」の代わりに「var」が使われている

• 途中で値を変えることもできる
  let message;
  message = 'World!';
  message = 'nice!'; // 値の変更

• 同じ変数名で2回定義するとエラーが出てしまうので宣言は1度だけにする

• JavaScriptの変数名は2つの制限があり、名前は文字、数字、記号「$」と「_」のみを含む必要がある事、最初の文字は数字ではいけない事である

• 大文字小文字の区別されていて、変数名「apple」と「APPLE」は2つの異なる変数である

• 定数を宣言するためには、「let」の代わりに「const」を使う
  constを使って宣言された変数は「定数」と呼ばれ、変更しようとするとエラーになる

• 変数は分かりやすい名前にする事が、極めて重要である
  実際のプロジェクトでは、一から何かを書くよりも、既存のコードベースの修正や拡張に最も時間を費やすので、何か他のことをした後にコードに戻ったとき、適切な名前がついている変数などであれば探しやすい

感想

• jqueryを勉強した事で変数、定数についての注意点などは知っているつもりであったが、改めて、わかりやすい変数名を付ける事は実務を始めた際にとても重要な事だと再認識した

2.5 データ型

知らない単語

• 算術演算子とは
  • プログラミング言語で用いられる演算子のうち、四則演算などの算術的な計算を行うもの。「+」や「-」の事

学んだこと

• JavaScript には8つの基本的なデータ型がある

• 数値型
  乗算 *, 除算 /, 加算 +, 減算 - など数値に関する操作があり、Infinity、NaNなど特別なものもある
  Infinityは数学的な無限大∞、NaN は計算上のエラーを表す

• BigInt型（ビッグインテジャーがた）
  任意の長さの整数を表現型
  BigIntの値は整数値の末尾に「n」を追加する

書き方としては
const bigInt = 1234567890123456789012345678901234567890n;　等

• 文字列型
  JavaScriptの文字列は引用符で囲む必要がある
  let str = "World";
  let str2 = 'nice to meet you';
  引用符は3つの内どれを使しても良い
  ダブルクォート　「""」
  シングルクォート　「''」
  バッククォート　「``」

• ${…}を使用する事で、変数を埋め込む事もできる
  let name = "Bill";
  // 変数が埋め込まれた場合
  alert( Hello, ${name}! );等

• boolean型(論理型)
  boolean型はtrueとfalse、2つの値のみ持つ
  trueは「yes」、falseは「no」を意味する

• null
  nullは特殊で、どの型にも属さない。空や不明な値という意味を持つ

• undefined
  値は代入されていないという意味の特殊な値

• object型
  object型はデータのコレクションやより複雑な実体を格納するために使われる

• symbol型
  一意な識別子を作るのに使われる

試してみた

${…}を使用して変数を埋め込む

console内で${…}を使用して変数を埋め込めている事が確認できる

感想

• 型の種類が多いので、間違えなく覚えておくようにする。特にsymbol型は今回始めて知ったので正しく理解して忘れないようにする。

2.6 インタラクション: alert, prompt, confirm

知らない単語

• インタラクションとは
  • 何かアクションをした時にそのアクションが一方通行にならず、相手側のシステムがそれにリアクションをする事

学んだこと

• ユーザと対話する関数が主に3つあり、alert,prompt,confirmである

• alert
  メッセージのある小さいウィンドウを表示する

• prompt
  ユーザにテキスト入力を求めるメッセージを表示する

• confirm
  メッセージを表示し、ユーザが「OK」か「CANCEL」の選択をさせる

感想

• 3つともメッセージを表示する事は似ているので、用途による使い分けをしっかり理解する。

2.7 型変換

知らない単語

• 無し

学んだこと

• 演算子と関数は自動的に値を正しい型に変換するが、それを型変換と呼ぶ
  文字列変換は、文字列形式の値が必要なときに変換され、数値変換は数学的関数や表現の中で自動的に変換される
  また、Boolean変換はシンプルで0,空文字,null,undefined,NaNのような空の値は「false」になり、他の値は「true」になる

感想

• jqueryでコードを書いている時に経験したが、数字が出てくる時に「undefined」や「NaN」が出力される事がよくあったので型は常に意識する事が重要だと思う

2.8 演算子

知らない単語

• オペランドとは

  • 演算子が適用されるもの。例えば乗算 6 * 3 では、2つのオペランドがある。左のオペランドは 6,右のオペランドは3になる

• ビット演算子とは

  • 整数型の数値に対してビット単位で演算を行うための演算子

学んだこと

• 演算子が単一のオペランドをもつ場合は単項演算、2つのオペランドを持つ場合は二項演算になる
  単項演算の例
  let x = 2;
  x = -x;
  二項演算の例
  let x = 2, y = 5;
  alert( y - x );

• 加算 +
  減算 -
  乗算 *
  除算 /
  剰余 %
  べき乗 **
  等の算術演算子がある
  べき乗は、例えば a ** b は a自身をb回かけるという意味

• 二項演算子 + が文字列に適用された場合は、お互いの文字を結合する
  let s = "my" + "string";
  alert(s); // mystring
  になる

• プラス演算子は、数値に対しては何も影響が無いが、オペランドが数値でない場合、数値に変換する
  例えば数値なら
  let x = 2;
  alert( +x ); // 2
  となるが、数値でないと
  alert( +true ); // 1
  alert( +"" ); // 0
  のようになる

これは型変換する時のNumber(...)と同じだが、より短く表現できる

let apples = "3";
let grapes = "5";
// 二項演算子プラスの処理の前に、両方の値が数値に変換される
alert( +apples + +grapes ); // 8
// 長い書き方
// alert( Number(apples) + Number(grapes) ); // 8

• 単項演算子は対応する二項演算子よりも優先順位が高い
  例えば、式 "+apples + +grapes" において、単項演算子プラスが動作してから加算が実行される

• インプレース(in-place)修正
  変数に演算子を適用したあと、結果を同じ変数に格納する時に使う
  例えば
  let n = 3;
  n += 5; // n = 8 (n = n + 5 と同じ)
  n *= 3; // n = 24 (n = n * 3 と同じ)

alert( n ); // 24
という事ができる

感想

• べき乗やインプレース修正の書き方は知らなかったので、状況に応じて使い分けれるようにしっかり覚えておく。

2.9 比較

知らない単語

• 無し

学んだこと

• プログラムでも数学にある比較演算子を使用する

より大きい/より小さい→ a > b, a < b
大きい/小さいまたは等しい→ a >= b, a <= b
などと書く

• 比較演算子は必ず、「true」か「false」のブール値を返す

• 文字列は "辞書” 順で、1文字ずつ比較される

• 異なる型の値を比較した時は数値に変換される
  例、
  alert( '3' > 1 ); // true, 文字列 '3' は数値 3 になる
  alert( '02' == 2 ); // true, 文字列 '02' は数値 2 になる

• 値 null と undefined はそれぞれ等価 == だが、それ以外の値とは等価でない
  alert( null == undefined ); // true となる

感想

• null と undefined　の比較は、「==」ならtrueだが、「===」ではfalseになるので、厳密な比較かそうでないかを気をつける必要がある。

最後に

• 細かいところまで気をつけてコーディングする事がとても重要であると思う。
  特に最後の比較の項目では、「==」と「===」で結果が変わってくるので、ミスをしないようにしたい。