完成と次のステップ

解説

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

• 10 章で身に付けたことを、書ける・読める・直せるの 3 段階で棚卸しできます
• 入門で扱わなかったものが何かを、名前で把握できます
• 次に学ぶ順番と、その先にある React までの道のりが見通せます

解説

完成と次のステップ とは

コースの締めくくりです。作ったものを振り返り、入門で扱わなかったものを正直に並べて、次の行き先を決めます。

何を作ったか

最初のレッスンでは、HTML に script を 1 行足して console.log を出しただけでした。いま手元にあるのは、データを持ち、画面を自分で組み立て、押されたら反応し、設定を覚えるページです。同じサイトが 10 章かけてどう育ったかを並べてみます。

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

解説

ここまで来た人は、もう「JavaScript を勉強している人」ではなく「JavaScript を書く人」です。作ったページのファイルは必ず残しておいてください。学習の証拠になりますし、あとで見返すと自分の伸びが分かります。

いまの実力の見取り図

学んだことは、すべて同じ強さで身に付くわけではありません。3 段階に分けて自分をチェックしてみましょう。

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

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

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

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

入門で扱わなかったもの

正直に並べます。ここに挙げたものは、このコースでは意図的に外しました。難しすぎるからではなく、先に土台を固めたほうが結局早いからです。

• クロージャ 関数が外側の変数を覚え続ける仕組み。第6章で少しだけ触れましたが、名前は出していません
• map と filter と reduce 配列を 1 行で加工するメソッド。第5章の for-of を手で書ける人が使うと強力です
• 非同期の本体 Promise と async と await。第10章のタイマーはその入口だけでした
• fetch サーバーからデータを取ってくる仕組み。非同期が分かってからのほうが確実に理解できます
• クラス class を使ってデータと処理をまとめて設計する書き方
• モジュール import と export でファイルを分ける仕組み。ファイルが 1 本で足りるうちは要りません

名前を知っておくだけで、次に出会ったときの構えが変わります。いま分からなくて当たり前です。

完成したものを人に見せる

HTML と CSS のコースの最後で、ページを公開する話をしました。今回足した JavaScript も、やることは同じです。index.html と style.css と script.js の 3 つを同じ場所に置いて上げるだけで、動くページとして誰でも見られます。サーバー側の準備は要りません。ブラウザさえあれば動くのが、この 3 つで作るページの強みです。

見せるときは、何ができるページなのかを 1 行で言えるようにしておきます。「プロフィールサイトです」より「作品を絞り込めて、テーマの設定を覚えるプロフィールサイトです」のほうが、聞く側には具体的に伝わります。自分が書いた機能を言葉にする練習は、そのまま職務経歴の書き方につながります。

解説

動かない状態のまま公開しないでください。公開前に、ブラウザの開発者ツールを開いてコンソールに赤いエラーが出ていないかを必ず確かめます。手元では動いていたのにファイル名の大文字と小文字の違いで読み込めない、というのは公開でいちばん多い失敗です。

つまずいたときの戻り先

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

エラーメッセージは敵ではなく、いちばん近くにいる案内役です。赤い文字が出たら、まず落ち着いて 1 行目とファイル名と行番号を読む。これができる人は、独学でもどこまでも進めます。

次はどこへ行くか

順番があります。飛ばすと遠回りになるので、この道をおすすめします。

次のコースは実践JavaScriptです。配列を加工するメソッド、クラスとモジュール、そして Promise と async と await、fetch を使った通信をあつかいます。ここまでで書いてきたメモ帳を、サーバーとつながるアプリに育てるための道具がそろいます。

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

練習の進め方

次のコースに進むにしても、しばらく手を動かして固めるにしても、やり方は同じです。写して動かす、少し変えて壊す、直す。この 3 つの往復がいちばん速く伸びます。写しただけで動いたコードは身に付きません。変数名を変える、条件をひっくり返す、わざと 1 行消してエラーを見る。壊して直した回数だけ、自分の引き出しになります。

もうひとつ、今日書いたコードを 1 週間後に読み返す習慣をおすすめします。読み返すと、当時は精いっぱいだった書き方が、あちこち直したくなるはずです。その「直したい」が湧いたときが、伸びた証拠です。

いちばん効くのは、学んだ直後に自分のものを作ることです。今回のメモ帳を育てるのでもかまいませんし、まったく別のものでもかまいません。作りたいものがあると、調べる力が一気に伸びます。10 章ぶんの手を動かした経験は、もう十分な土台です。おつかれさまでした。