SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

JavaScriptの関数・スコープ・モジュール：処理を再利用する方法の解説動画

再生時間 7:49動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00ジャバスクリプト入門、実践連載の第二回です。
  3. 0:04今回のテーマは、関数、スコープ、そしてモジュールです。
  4. 0:08前回学んだ計算や判定を、その都度書き直すのではなく、名前の付いた部品としてまとめ、
  5. 0:13何度でも呼び出せるようにします。
  6. 0:17具体的には、点数の配列から平均を求める関数と、呼ぶたびに数が増えるカウンターを作ります。
  7. 0:24後半では、変数が使える範囲であるスコープと、外側の値を覚え続けるクロージャー、
  8. 0:30そしてファイルを分けるエクスポートとインポートまで進みます。
  9. 0:35処理を再利用する考え方は、この先のすべての回の土台になります。
  10. 0:40一度作った部品は、テストもしやすく、間違いを見つけやすくなるという利点もあります。
  11. 0:47まず関数の基本形です。
  12. 0:49関数は、材料を受け取り、処理をして、結果を返す小さな部品だと考えてください。
  13. 0:55受け取る材料を引数、返す結果を戻り値と呼びます。
  14. 0:59結果を返す合図がリターンです。
  15. 1:01画面の例では、名前を受け取り、あいさつの文章を作って返し、呼び出し側がそれを受け取って表示しています。
  16. 1:09ここで大切なのは、コンソール・ログは表示するだけの処理で、値を返す処理ではないという区別です。
  17. 1:17計算と表示を分けておくと、同じ計算を別の画面や別のファイルからもそのまま使い回せます。
  18. 1:24記事の中心となる例、平均を求める関数アベレージを見ます。
  19. 1:29引数は点数の配列です。
  20. 1:31まず合計をゼロから始め、フォー・オブで要素を一つずつ取り出して合計に加えていきます。
  21. 1:40最後に、合計を要素の数で割った値をリターンします。
  22. 1:45八十、六十五、九十二の三科目なら、平均は七十九です。
  23. 1:50途中の合計を入れる変数トータルは、この関数の中だけで使う作業用の値です。
  24. 1:57外に公開するのは、戻り値である平均だけに絞ります。
  25. 2:02こうして、関数の内側と外側をはっきり分けることが、読みやすいコードの第一歩になります。
  26. 2:11関数を部品として安心して使うには、入り口での確認が欠かせません。
  27. 2:16平均の関数では、まず渡されたものが配列かどうか、そして空ではないかを確認します。
  28. 2:22空の配列では割る数がゼロになってしまいます。
  29. 2:26また、要素の中に文字列や無限大のような値が混ざっていると、計算結果が静かにおかしくなります。
  30. 2:33そこで、有限な数値でない要素があれば、タイプエラーを投げて処理を止めます。
  31. 2:39練習として、要素がゼロ一つだけの場合や、文字列の九十が混ざった場合を自分で試してみてください。
  32. 2:46入力の境界を確かめる習慣が身に付きます。
  33. 2:49エラーの文は、どこで何がおかしかったかを知らせる手がかりとして、そのまま残しておきましょう。
  34. 2:57次にアロー関数です。
  35. 2:58矢印のような記号を使って関数を短く書く方法で、短い変換処理によく使われます。
  36. 3:04記事の例、フォーマットアベレージは、数値を受け取り、小数第一位までそろえた平均という文章に変換する関数です。
  37. 3:13本体が一つの式だけなら、その式の結果がそのまま戻り値になり、リターンを書く必要はありません。
  38. 3:20反対に、波括弧で本体を書いた場合は、返したい値を明示的にリターンする必要があります。
  39. 3:27この省略できる条件を混同すると、値が返らないという初歩的なミスにつながるので、
  40. 3:32書き方と戻り値の関係をセットで覚えてください。
  41. 3:37ここからはスコープ、つまり変数が使える範囲の話です。
  42. 3:40平均の関数のトータルのように、関数の中で宣言した変数は、その関数の中だけで使います。
  43. 3:47処理の途中の値を全体で共有する変数に置いてしまうと、どこで書き換えられたか分からなくなり、
  44. 3:51思わぬ事故の元になります。
  45. 3:55レットとコンストで宣言した変数には、波括弧で囲まれたブロックが範囲になる、
  46. 3:59ブロックスコープがあります。
  47. 4:03条件分岐や繰り返しの中で作った変数は、その外からは参照できません。
  48. 4:08画面のように、内側と外側で同じ名前を使っても、別々の変数として扱われます。
  49. 4:13範囲を狭く保つほど、プログラム全体の見通しは良くなります。
  50. 4:18スコープの応用がクロージャーです。
  51. 4:21関数の中で作った別の関数は、外側の変数を参照し続けることができます。
  52. 4:27外側の処理が一度終わったあとも、その変数は消えずに残り、内側の関数だけが触れる状態になります。
  53. 4:35たとえるなら、専用の金庫付きの道具です。
  54. 4:39値は金庫の中に閉じ込められ、外から直接のぞいたり書き換えたりはできません。
  55. 4:45決められた操作を通してだけ数が変わります。
  56. 4:49この仕組みを使うと、状態を持つ小さな部品を、安全に作れるようになります。
  57. 4:56次の画面で、実際に数えるカウンターを作って確かめます。
  58. 5:01配列やオブジェクトの処理でも、この考え方は繰り返し登場します。
  59. 5:06クロージャーの実例、クリエイトカウンターです。
  60. 5:10この関数は、初期値を受け取り、呼ぶたびに一ずつ増える別の関数を作って返します。
  61. 5:15内側の関数は、外側の変数カウントを覚え続けているので、呼ぶごとに前回の続きから数えられます。
  62. 5:22ポイントは、クリエイトカウンターを呼ぶたびに、新しいカウントが別々に生まれることです。
  63. 5:29一つ目のカウンターを二回呼んでも、二つ目のカウンターには影響しません。
  64. 5:34初期値を十にして作った二つ目は、最初の呼び出しで十一を返します。
  65. 5:39独立した状態を複数持てることが、クロージャーの強みです。
  66. 5:43最後にモジュールです。
  67. 5:44これまでの関数を、スタッツ・エムジェーエスというファイルにまとめ、エクスポートという印を付けて公開します。
  68. 5:51使う側のメイン・エムジェーエスでは、インポートの一文で、必要な関数だけを名前を指定して読み込みます。
  69. 5:58読み込む場所を示す相対パスには、拡張子まで含めるのがこの形式の決まりです。
  70. 6:03実行は、ターミナルでノード、メイン・エムジェーエスと打ちます。
  71. 6:07定義側のファイルには表示処理を置いていないので、読み込んだだけで勝手に例が動き出すことはありません。
  72. 6:13役割ごとにファイルを分けることで、再利用しやすくなります。
  73. 6:17大きなプログラムほど、この分割の効果がはっきりと現れてきます。
  74. 6:21アロー関数と通常の関数は、見た目だけでなく、ディスという値の扱いも違います。
  75. 6:27アロー関数には独自のディスがなく、外側のディスをそのまま使います。
  76. 6:32一方、通常の関数のディスは、どのように呼び出されたかによって変わります。
  77. 6:37今の段階では、短い変換にはアロー関数、名前のあるまとまった処理には通常の関数、
  78. 6:42という使い分けから始めてください。
  79. 6:46ディスの詳しい違いは、後のクラス入門の回で、メソッドとコールバックの違いと合わせて改めて扱います。
  80. 6:54ここでは、同じものではない、という一点を押さえておけば十分です。
  81. 6:59迷ったときは、まず通常の関数で書き、短くできる場面でアロー関数を検討すると安全です。
  82. 7:05まとめです。
  83. 7:06関数は引数を受け取り、リターンで結果を返す再利用の部品です。
  84. 7:11計算と表示を分け、入り口で入力を確認すると、安心して使い回せます。
  85. 7:16スコープは変数が使える範囲で、関数やブロックの内側に値を閉じ込めることで、
  86. 7:20事故を防ぎます。
  87. 7:24クロージャーを使えば、独立した状態を持つカウンターのような部品も作れました。
  88. 7:30そしてモジュールでファイルを分け、エクスポートとインポートでつなぎます。
  89. 7:36練習として、カウンターを三つ作り、値が混ざらないことを確かめてみてください。
  90. 7:42次回は配列とオブジェクトで、データの処理を学びます。
  91. 7:46これで第二回を終わります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

JavaScriptの関数、引数と戻り値、アロー関数、クロージャー、exportとimportを実例で解説。平均値の計算と独立したカウンターを作ります。

解説記事・サンプルコードを読む：JavaScriptの関数・スコープ・モジュール：処理を再利用する方法 →