JavaScriptの関数を使いこなす

引数にデフォルト値を定める

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
コンストラクタの引数に、条件判定でデフォルト値を与えます。
講師:
07:42

字幕

このレッスンでは 関数の引数に デフォルト値を与える方法について― ご説明します 今開いている HTML ドキュメントは― script 要素で script.js という― JavaScript ファイルを 読み込んでいます それがタブのこちらにあるんですけれども― その中にクラスが定義されていて― そのクラスの呼び出しと メソッドの呼び出しをしたうえで― 確認の console.log という関数を 呼び出しているんですけれども こちらの script の内容ですね クラスなんですけれども point という x y 座標を定めるクラスで その中には― 原点からの距離を求めるメソッド 引数の座標を足しこむメソッド それから 引数で掛け算をする 座標に掛け算をするメソッド― などが定められています これを この HTML ドキュメントの方で 呼び出して― 座標を与えたインスタンスに 座標をさらに加算し 掛け算をして― point のインスタンスそのものと― getDistance を呼び出した結果 距離ですね― を確かめています 結果をブラウザで確認しましょう 「ファイル」から 「ブラウザでプレビュー」です JavaScript コンソールを出します そうするとまず― point のインスタンスですね 座標値が最終的に 20 12 になったようです そして距離は計算 検算できませんけれども 大体 23 位になったようです ちゃんと動いてますね では一旦 コンソールはクリアしておきます そして HTML ドキュメントのほうに 戻りましょう クラス point は x y 座標を プロパティとして持ちます そしてインスタンスを作るとき― もし引数を渡さないとどうなるか というと 渡さないと適切な結果が得られません けれども 渡さないときは この point の例でいえば― 0 0 がデフォルト値というのは よくある定めですね また そういう風に定めておくと 使い勝手がよくなります これが デフォルト値なんですが このデフォルト値を どうやって定義すればいいか― ということについて説明します ここは このまま一旦保存しておきましょう 今は 確認するとエラーになりますから エラーというか 正しい値が出てきませんので 確認しませんが― デフォルト値を定めてから 見てみましょう では デフォルト値の定め方です コンストラクタに引数が渡されなかった時の デフォルト値なんですが まず x から行きましょう もし 値が無かった場合には デフォルト値なんですが ある場合は という時には― 今回の場合 こんな書き方ができます 値がなければ undefined です undefined は bool 値 論理値として評価する時には― false になりますから ここに当てはまりません ですから else で― x に値を代入する ということで デフォルト値は 0 にしましょう this.x = 0 と そして 値がある場合には― このまま x 座標の値を 設定すればいい ということですね この同じ処理を― y のほうにも設定したいですが ほぼ同じ処理を 別の書き方で簡単に書けます どう書くか というと― 縦線 2つ or 条件ですね or 条件の縦線2つで 0 これは条件判定なので― true か false が入るのでは と思うかもしれません けれども true か false で 評価しますが― 評価した結果 この式は値を返します その返す値というのが true false のブール値ではなくて もし この y が true と評価される場合― こちらと同じですね x が true と評価される場合に対して y が true と評価される場合には― y の値が返されます つまり y が代入されるんですね そうでない場合は 今度はこちらの値が返されます こちらの値は true であろうと false であろうと どちらで評価されようと― こちらが false と評価される true と評価されない場合には この値が必ず返ります ということなので 結果としては ほぼ これと同じ処理が行われます 確認してみましょう ファイルを保存します そして HTML のほうは すでに保存が済んでいるので ブラウザでリロードしましょう ブラウザウィンドウをリロードすると 結果が出てきます ですから 正しく HTML に書いた― JavaScript コードが実行されている ということですね デフォルト値が与えられましたので 結果は違いますけれども― ではこのコンソールは 一旦クリアしておきます HTML ドキュメントのほうに戻りましょう ただ 今回のあのデフォルト値の書き方は ちょっと注意するところがあります 何か といいますと― デフォルト値が 0 だからいいんですね デフォルト値が 0 だからいいんですが― 何が問題かといいますと では この x のほうで確認します console.log そして こちらの場合には true を 表記するようにします true を出力する と では これコピーしまして こっちの場合には false と この中が true と評価された場合は こちら false と評価された場合は false という風に表示されます そして ファイルを保存して— HTML のほうで 1個も値を与えないのではなくて x 座標のほうだけ 0 と値を与えます 保存して ブラウザで見てみましょう ウィンドウをリロードします 結果はちゃんと出ていますが false と出てますね false つまり 値が無かった という風に 評価されている ということです これが注意点です コンソールはクリアして— もう一度 JavaScript の ファイルのほうを見てみましょう この if 条件で値を 直接条件に放り込むという方法は undefined 値でない場合には false と評価されていいです それから 数値の場合も 通常はいいんですが 0 は false と評価されます 或いは 逆に数値でも何でもない オブジェクトが渡されると true と評価されてしまいます ですから 今回数値であって デフォルト値は 0 という事が分かっているので— これでも構わないのですけれども もしそうでない場合— 或いはチェックをもっと厳密にしたい という場合には— こうするといいでしょうね typeof そうすると 数値の場合には number という文字列が返されます この形であれば 数値でなければ— false という風になります 数値であれば 0 は通りますので この処理が行われる ということになります 念のため ブラウザで確認しましょう ウィンドウをリロードします ちゃんと true と出てきましたね このレッスンでは 引数を条件判定して— 場合によってデフォルト値を設定する という方法についてご紹介しました 条件の定め方 条件の評価の仕方も― 3通り別でご紹介しました

JavaScriptの関数を使いこなす

関数はJavaScriptの基本です。また関数を知ることはスクリプトの組み立て方を理解することでもあります。このコースではJavaScriptの基礎を学んだ方を対象に、関数の定義から順を追って説明します。さまざまな機能やその呼び出し方、クラス定義で使われる応用テクニックまで実際にスクリプトを書きながら具体的に解説します。

2時間22分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年11月28日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。