本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー
JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。
2.10 条件分岐: if, '?'
知らない単語
- 無し
学んだこと
-
if文は括弧の中の式を判断して、Boolean型に変換する
例えば、数値 0,空文字 "",null,undefined,NaN は「false」になるので「偽」と判定される
if (0) {
...
}
このコードは0で偽なので、実行されない
if (1) {
...
}
しかし1であれば真なので実行される -
条件が偽の場合、「else」での分岐があれば、分岐の処理が実行される
if (month == 12) {
alert( ... !);
} else {
alert( ...? ); // 12以外のケースが実行される
} -
elseを含むif文は三項演算子で書く事ができる
書き方をは
条件式 ? 真の処理 : 偽だった時の処理 となる
例えば
let age = 25;
let drink = (age >= 20) ? "お酒" : "お茶";
console.log(drink); // "お酒"
などと書ける
感想
- 三項演算子はiqueryでも使用していたが、コードを短く書く時に便利なので上手に使っていきたい。
2.11 論理演算子
知らない単語
- アンパサンド
- 「＆」のこと、言語やシチュエーションによって役割が違う
学んだこと
-
JavaScriptには4つの論理演算子、|| (OR:論理和), && (AND:論理積), ! (NOT:否定), ?? (Null合体)がある
-
「||」(OR)
日本語では「または」の意味
4つのあり得る論理的な組み合わせを見てみると
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false
となり、両方のオペランドが「false」の場合以外は「true」が返ってくる
大抵「||」は、if文の中で、条件のいずれかが正しいかを確認するのに使う
例えば、
let hour = 8;
if (hour < 11 || hour > 19) {
alert( 'The shop is closed.' );
}
などと書けば条件とは合ってないとわかる
-
&& (AND)
日本語では「かつ」の意味
両方のオペランドが真のときに「true」を返し、それ以外の場合は「false」を返す
alert( true && true ); // true
alert( false && true ); // false
alert( true && false ); // false
alert( false && false ); // false
となる -
! (NOT)
真偽値否定演算子は感嘆符 "!" で表現する
役割はオペランドを真偽値型に変換し、逆の値を返す
例えば
alert( !true ); // false
alert( !0 ); // true
というように逆の真偽値が返ってくる
感想
- 論理演算子はif文との組み合わせでよく使うことになると思うので、それぞれの役割をしっかり記憶しておきたい。
2.12 NULL合体演算子
知らない単語
- シーケンス
- 決められた順序で処理を行うこと
学んだこと
-
NULL合体演算子は２つの疑問符「??」で記述される
使い方は
a ?? b
と書くと「a」がnullあるいはundefinedでなければ「a」,それ以外の場合は「b」となる
要するにnull/undefinedでなければ最初の引数を返し、それ以外の場合は2つ目の引数を返す -
OR演算子「||」は「??」と同じ方法で使うことができるが、重要な違いは
「||」は最初の真の値を返し、「??」は最初の定義済みの値を返すことである -
エラーが出る可能性が高いので、「&&」や「||」と一緒に「??」を使用するのは推奨されていない
感想
- NULL合体演算子「??」の使い方は知らなかったので、同じように使える「||」と間違えないようにする。
2.13 ループ: while と for
知らない単語
-
イテレーション
- whileループにおいて、ループ本体の1回の実行の事、アジャイル開発で使われる開発サイクルの単位を指したりもする
-
プロンプト
- 画面上で表示される、「ここから入力しなさい」という指示のマーク
学んだこと
- ループ処理の書き方の1つ目、whileループ
- while (条件) {
... // 処理
}
条件が「true」の間、ループの本体の処理が実行される
- while (条件) {
例えば
let i = 1;
while (i < 5) { // 1, 次に 2, 次に 3 を表示
alert( i );
i++;
}
となる
-
ループ処理の書き方の2つ目、do..whileループ
- 書き方は
do {
... // 処理
} while (条件);
となり、最初に処理を実行した後、条件をチェックして、条件が真である間、本体の実行を繰り返す
do..whileループは、条件が真になるかは関係なく、少なくとも1度はループ本体を実行したいという場合のみに使用した方が良い
- 書き方は
-
ループ処理の書き方の3つ目、forループ
- 書き方は
for (条件) {
... // 処理
}
1番使われるループであり、条件はイテレーションの前にチェックされ、追加設定もできる
- 書き方は
-
無限ループを作るには、while(true)が使われるが、無限ループは他のループと同様にbreakディレクティブで停止する事ができる
let Hello = 0;
while (true) {let World = +prompt(...);
if (!World) break; // (*)
Hello += World;
}
これでループが停止する
逆にcontinueディレクティブを使うと現在の処理を停止し、強制的に新しい処理をスタートさせる
for (let i = 0; i < 20; i++) {
// true の場合、本体の残りの処理をスキップ
if (i % 2 == 0) continue;
alert(i);
}
のように書く
感想
- 基本的にはfor文でループ処理を書くことがほとんどだと思うが、breakやcontinueを使うことも少なからずあると思うので、使い方を正しく覚えておく。
2.14 switch文
知らない単語
- デッドコード
- プログラム実行時に実行される可能性がない文やプログラムの事
学んだこと
- switch文はif文に置き換える事ができる
例えば
switch(a) {
case 'val1': // if (a === 'val1')
...
[break]
case 'val2': // if (a === 'val2')
...
[break]
default:
...
[break]
}
というコードで、aの値は、最初のcase(val1)の値と「===」で比較をされ、次のcase(val2)も同じく比較される
等しいものがあれば、該当するcaseの処理をbreakまで実行する
該当するものが無い場合は、defaultが実行される
感想
- 処理の順番や比較された後、何が実行されるかをきちんと理解する。
2.15 関数
知らない単語
-
パラメーター
- 引数の事
-
フルアクセス権
- ファイルやフォルダへのアクセス許可の型の一つで、すべての権限が許可に設定された特殊な状態、あらゆる操作が可能
学んだこと
- 関数定義の書き方
function name(parameters) {
...処理...
}
functionがきて、次のnameが関数名、parametersが引数となる
- 呼び出し時に引数が与えられていない場合、「undefined」がデフォルト値になる
例えば
function showMessage(hello,world) {
alert(world);
}
showMessage('aaa')
上記の場合、第1引数のみなので「hello」に「'aaa'」が入り、「world」には何も無いので「undefined」が出力される
ちなみに「undefined」はエラーではないので、処理は継続できる
感想
- 引数がどこに対してなのか、返り値が何かなどをすぐ判断できるようにする。
2.16 関数式
知らない単語
- コードブロック
- 複数の構文や命令など、コードを一括りにまとめたもの
学んだこと
- 関数式は簡単に言うと、変数が関数として使える
普通の関数
function world() {
alert( "Hello" );
}
関数式
let world = function() {
alert( "Hello" );
};
関数式になると変数だが、型が構造型になるので動作する
-
関数と関数式の違いは
関数の場合、ファイルを読み込んだ瞬間から作動している
関数式の場合、その式が呼び出された瞬間から作動する
また、関数式は他の関数と違い再代入できる -
コールバック関数
簡単に言うと変数に関数を入れる事ができる
感想
- 最近はコードを短くする事やサーバーの負荷も考慮して、関数式で書くのがトレンドと聞いているので、極力関数式で書くように心がける。
2.17 アロー関数の基本
知らない単語
- ワンライナー
- 1行で作られたコマンドの組み合わせや簡単なプログラムのこと
学んだこと
- アロー関数の書き方
let world = (a, b) => a + b;
(a, b) => a + b は a と b 、2つの引数を受け取る関数を意味する
引数が1つの場合、括弧は省略できる
let world = n => n * 3;
引数がない場合、空括弧が必要
let world = () => alert("Hey!");
感想
- 今まで意味をあまり理解せずに使っていたので、アロー関数はワンライナーに対して使う方が良い事や2つの引数を受け取る書き方など忘れないようにする。
最後に
jqueryで勉強してきた事と被っている内容も多いので理解しやすいが、if文や関数など、なんとなくわかったつもりで使っていた部分もあるので、この機会に覚えた様々な使い方や意味を忘れないようにする。