完成と次のステップ

解説

このレッスンで分かること

• ここまでの学びを、書ける・調べれば書ける・読めれば十分の 3 段階で棚卸しできます
• 次に学ぶ順番と、その先にある React までの道のりが見通せます

10 章前は、console.log の 1 行だけだった

最初のレッスンでは、HTML に script を 1 行足して、コンソールに文字を出しただけでした。いま手元にあるのは、データを配列で持ち、画面を自分で組み立て、押されたら反応し、選んだ設定を覚えるページです。

変化がいちばん大きかったのは第8章から先です。それまでのコードはコンソールの中で完結していましたが、DOM を触れるようになった瞬間から、書いたものが目に見える形で画面に出るようになりました。プログラミングが自分の道具になった、と感じられたのはこのあたりのはずです。

作ったファイルは必ず残しておいてください。index.html と style.css と script.js の 3 つを同じ場所に置いて上げれば、そのまま公開できます。サーバー側の準備は要りません。人に見せるときは、何ができるページなのかを 1 行で言えるようにしておきます。「プロフィールサイトです」より「作品を絞り込めて、テーマの設定を覚えるプロフィールサイトです」のほうが具体的に伝わります。自分が書いた機能を言葉にする練習は、そのまま職務経歴の書き方につながります。

3 段階で自分を測る

学んだことが、すべて同じ強さで身に付くわけではありません。

何も見ずに手が動くのは、変数、条件分岐、配列とループ、関数、オブジェクト、querySelector と textContent、addEventListener あたりです。

調べれば書けるのは、createElement を使った組み立て、classList の操作、JSON.stringify と JSON.parse、タイマーの止め方でしょう。書き方はうろ覚えでも、何ができるかを覚えていれば検索で必ずたどり着けます。

読めれば十分なのは、他人のコードに出てくる見慣れない書き方です。全部を書けるようになる必要はありません。「これは配列を加工しているらしい」と当たりが付けば、その先は調べられます。

いちばん増やしたいのは真ん中です。プロと呼ばれる人でも細かい書き方はしょっちゅう調べていて、違うのは何を調べればよいかが分かっている点だけです。10 章ぶん手を動かしたいま、「一覧を作るには描き直す関数が要る」「保存には JSON をはさむ」と見当が付くようになっています。この見当こそが、独学を先へ進める燃料です。

詰まったときに戻る場所

これから自分のものを作っていくと、必ず詰まります。症状ごとに、見に行く場所はだいたい決まっています。

エラーメッセージは敵ではなく、いちばん近くにいる案内役です。赤い文字が出たら、落ち着いて 1 行目とファイル名と行番号を読む。これができる人は、独学でもどこまでも進めます。公開する前にも、開発者ツールを開いて赤いエラーが出ていないか必ず確かめてください。手元では動いていたのにファイル名の大文字と小文字の違いで読み込めない、というのは公開でいちばん多い失敗です。

次はどこへ行くか

このコースでは、いくつかの道具をあえて外しました。配列を 1 行で加工する map と filter と reduce、非同期の本体である Promise と async と await、サーバーからデータを取ってくる fetch、データと処理をまとめる class、ファイルを分ける import と export。難しすぎるからではなく、先に土台を固めたほうが結局早いからです。

次は「モダンJavaScript：データ処理とコード設計」です。map と filter と reduce、クロージャ、クラス、エラー設計を学びます。その後の「非同期JavaScript：API通信とモジュール」で Promise と async と await、fetch、モジュールへ進みます。

その先が React のようなライブラリです。React は、このコースの最後にやった「データを本物にして、画面はそれを写したものにする」という考え方を、仕組みとして用意してくれます。手で描き直しを書いた経験がある人ほど、その便利さが具体的に分かります。

進め方は、写して動かす、少し変えて壊す、直す。壊して直した回数だけ引き出しになります。おつかれさまでした。