JavaScript の学び方と進め方

JavaScript のいちばんの強みは、ブラウザさえあれば動くことです。パソコンにもスマホにも、最初から JavaScript を動かす仕組みが入っています。何もインストールせずに書いて、すぐに結果を見られる言語は、実はそれほど多くありません。

もうひとつの強みは、Web 開発の中心にある言語だということです。Web ページのボタンを押したら何かが起きる、入力した内容がすぐ画面に反映される——こうした「動き」のほとんどは JavaScript で書かれています。Web 開発を仕事にしたいなら、どこかで必ず通る言語です。

Fulfledge では、はじめての言語を JavaScript と Python から選べます。どちらを選んでも、学ぶ考え方（変数・条件分岐・くり返し・関数・クラス）は同じです。

• Web 開発に進みたいなら JavaScript。このあと学ぶ HTML & CSS や TODO アプリ制作とそのままつながる
• 記号の少ない書き方で考え方に集中したいなら Python。データ分析や自動化に興味がある人にも向いている

迷ったら JavaScript で始めて大丈夫です。どちらか一方を終えれば、もう一方はずっと速く覚えられます。

最初の3章で、プログラミングの土台になる考え方をひととおり身につけます。ここがいちばん大事で、いちばん時間をかけてよいところです。

1章 文法のきほんでは、画面に文字や数を表示するところから始めて、変数に名前をつけて値を入れること、条件によって処理を分けること（if 文）を学びます。「コンピュータに順番に命令する」「覚えさせる」「判断させる」という、プログラムの3つの基本動作がここで出そろいます。

2章 くり返しとデータの持ち方では、同じ処理をくり返すこと（for 文・while 文）と、たくさんの値をまとめて持つこと（配列・オブジェクト）を学びます。この2つを組み合わせると、「100人分の点数から平均を出す」「条件に合う商品だけを取り出す」といった、実際のアプリに近い処理が書けるようになります。

3章 関数では、処理のまとまりに名前をつけて何度も使えるようにします。引数で値を受け取り、戻り値で結果を返す。この形が分かると、長いプログラムを小さな部品に分けて考えられるようになります。

この3章を終えた時点で、簡単な計算や判定をするプログラムなら自分で組み立てられます。ここまでは焦らず、練習問題を最後まで解いてから次に進むのがおすすめです。

4章から7章では、書いたコードを整理して、大きなプログラムでも扱えるようにする方法を学びます。

4章 クラスでは、「設計図」を1つ作って、そこから同じ形のものをいくつも作る方法を学びます。ゲームのキャラクター、ショップの商品、ユーザーの情報——同じ項目を持つデータがたくさん出てくる場面で力を発揮します。

5章 ファイルを分けるでは、1つのファイルに全部書くのをやめて、役割ごとにファイルを分ける方法と、他の人が作った部品（パッケージ）を借りてくる方法を学びます。実際の開発では、何十・何百というファイルでアプリが組み立てられています。

6章 配列をあつかう道具と7章 関数をわたすは、セットで学ぶと理解が深まります。配列の中から探す・絞り込む・作りかえるといった処理は、for 文でも書けますが、専用の道具（find filter map reduce など）を使うと1行で書けます。そしてその道具には「処理そのもの（関数）」を渡して使います。関数を値として受け渡すこの考え方は、JavaScript を読み書きするうえで避けて通れません。

8章から12章は、実際の Web 開発のコードを読み書きするために必要な内容です。必修ではありませんが、このあと TypeScript やフレームワークに進むなら、ぜひ通っておきたい範囲です。

• 8章 今どきの書き方：for...of、分割代入、スプレッド構文、オプショナルチェーン（?.）。現場のコードで毎日のように目にする書き方
• 9章 Map と Set：キーと値の組を持つ入れもの、重複しない集まり
• 10章 失敗に備える：try / catch でエラーを受け止め、throw で自分からエラーを出す
• 11章 データの道具箱：JSON でデータを文字列にして受け渡し、Date で日時を扱い、正規表現で文字の形を調べる
• 12章 時間のかかる処理を待つ：Promise と async / await。サーバーからデータを取ってくるときに必ず使う

特に12章の非同期処理は、多くの人がつまずくところです。「上から順に実行される」という、それまでの前提が崩れるからです。ここを越えると、「サーバーからデータを受け取って、画面に出す」という Web アプリの基本の流れが理解できるようになります。

JavaScript を学ぶ人の多くが、同じところでつまずきます。先に知っておくだけで、ずいぶん楽になります。

1. = と === の取りちがえ
= は「右の値を左に入れる」、=== は「等しいか調べる」です。if 文の条件に = を1つだけ書くと、比べるつもりが値を書きかえてしまいます。また、イコール2つの == は型がちがっても「ゆるく」比べるので、思わぬ結果になります。比べるときは === だけを使うと決めておきましょう。

2. 番号が 0 から始まること
配列の1つ目は [0]、2つ目は [1] です。最後の要素は [配列.length - 1]。範囲の外を指定してもエラーにはならず、undefined が返ってくるので、気づきにくいバグになります。

3. undefined が出てくる
「値が入っていない」ことを表すのが undefined です。変数に値を入れ忘れた、関数で return を書き忘れた、存在しないプロパティを読んだ——原因はたいていこのどれかです。表示したら undefined だった、というときはこの3つを疑ってください。

4. 戻り値を受け取り忘れる
map や filter は新しい配列を返しますが、元の配列は変えません。返ってきた値を変数で受け取らないと、結果はどこにも残りません。「動いているのに何も変わらない」ときは、戻り値を捨てていないか確かめましょう。

5. 非同期処理の順番
await を付け忘れると、結果が届く前に次の行が実行されてしまいます。非同期関数の戻り値を表示して Promise と出たら、結果を待たずに Promise 自体を表示していないか確かめましょう。

コードで違いを確かめる

次のコードは、文字列の連結と数値の加算、数値をコピーしたあとの更新を比べます。

console.log("100" + "20");console.log(100 + 20);let score = 10;let saved = score;score = 50;console.log(score);console.log(saved);

出力は上から 10020、120、50、10 です。saved に入るのは代入した時点の数値なので、score の更新には追従しません。saved = score; を最後に追加してから saved を表示すると 50 になります。プレイグラウンドで1行ずつ変えて、結果を比べてみてください。

JavaScript を一通り終えたら、次の道がいくつか開けます。

いちばんのおすすめは HTML & CSS です。JavaScript で書けるのはまだ「計算」や「判断」だけで、画面の見た目は作れません。HTML でページの骨組みを作り、CSS で見た目を整えられるようになれば、次の TODO アプリ制作で、JavaScript と組み合わせて本当に動くアプリを作れます。ここが、学んだことが1つの形になる最初の瞬間です。

もう1つの道が TypeScript です。JavaScript に「型」を足した言語で、コードを動かす前にまちがいを見つけてくれます。現場の JavaScript 開発では、いまや TypeScript で書くのが標準になりつつあります。必修ではありませんが、フレームワークを使ったアプリ開発に進む前には通っておくとよい単元です。

どちらに進むにしても、JavaScript で身につけた考え方は変わりません。新しい言語や道具を学ぶたびに、「これは JavaScript のあれと同じだ」と気づく場面が何度もあるはずです。