Hirologue

年齢を理由にエンジニアになることを諦めないミドルの成長記録

EP 44: JavaScriptはじめました

はじめに

これまでDjangoECサイト、XクローンとWebアプリを作ってきました。
制作過程で動作確認をしながら、度々こんなことを思っていました。

「このUI、もうちょっと使いやすくしたい」
「フラッシュメッセージをトーストで出せたらスタイリッシュなのになぁ」

調べてみると、行き着く答えはいつも同じ。
JavaScriptを使います」

Webアプリの表現力や操作性を上げるには、どうしてもJavaScriptの力が必要なのです。
しかしながら、当時のわたしはDjangoの学習真っ最中でしたので、JavaScriptへの好奇心をグッと抑えていました。

そして、Djangoと自動テストの学習を終え、ついにJavaScriptの学習が解禁されました。

Python経験もあるし、きっと似たようなもんだろう」
そう思って順調だったのは最初だけ。
セミコロン(;)つける or つけない」といったお作法的な部分であったり、「Arrow関数の書き方は何種類もあるのか?」といった疑問が湧き出て、日を増すごとに混乱は増していきます。

そんな混乱した頭の中を整理してくれたのが、『JavaScript Primer - 迷わないための入門書 改訂2版』(以下、JS-Primer とします)です。
ここでは、JavaScriptを学び始めたばかりのわたしが、この本を読んだ感想を述べていきます。

jsprimer.net




良かったところ

Web版は無料

まず特筆すべきは、Web版が無料で公開されていることです。
学習中、「あれ、この書き方どうだったっけ?」とちょっと確認したい時に、ブラウザでサッと開けるのは本当に助かります。
それに加えてサイト内でコードを実行できる点も優れていると思いました。
しかも、ただコードを実行できるだけでなく、コードを編集して動作の違いを検証できるのは、本当に素晴らしいです。

頻繁なアップデート

JavaScriptに限らず、プログラミング言語は進化が速く、数年前の情報がもう古くなってしまうこともありますが、JS-Primerはしっかり最新の仕様に対応してくれています。
紙ベースの書籍版ではこうは行きませんから、これはWeb版の大きなアドバンテージだと思います。
「今学んでいる内容が古くない」という安心感は大きいですね。


悪かったところ

悪かったところは、特になかったと思います。
敢えてあげるなら、 「ボリュームがすごい」という点です。

各セクションで細かく事例を交えて説明しているため、これは避けようがないと思います。 最初から最後まで一字一句きっちり読み込もうとすると、相当な時間がかかります。
とはいえ、それだけ情報量が豊富なので、逆に長期的な学習の相棒にもなれます。

JavaScript初学者が「全部覚えてやる!」と意気込むと、かなりの高確率で挫折するのではないでしょうか。
挫折しないためにも、全部理解しようとするのではなく、どこに何が書いてあるか把握するよう心がけて読み進めるのがいいと思います。


学んだこと

セミコロン付ける or 付けない

しばらくPython漬けの日々を過ごしたわたしにとって、はじめに直面した問題は、「最後にセミコロンを付けるべきか否か」でした。
Pythonはインデントによってブロックが構成されていたので、はじめのうちはその違いに少し戸惑いました。
結局のところは { } で囲まれた部分(ブロック文)には不要。

「ああ、なるほど!そういうことか」

ブロック文は、Pythonのインデントに相当するのか。
ずっと気になっていたことがたった一言で解決、わたしの中のモヤモヤが一つ解消されました。

Arrow関数の省略記法

以前 Progateで学んだものの理解が曖昧だったArrow関数について、理解を深めることができました。
ここでも、「( )があったり、なかったりするけど、ひょっとして省略記法がある??」といった疑問が湧き上がりました。

JS-Primer「関数と宣言」のセクションで、ハッキリこう書いてありました。

関数の仮引数が1つのときは()を省略できる

関数の処理が1つの式である場合に、ブロックとreturn文を省略できる

うん。なるほど。

実践的な使い方を知る

ほかにも、Pythonのようにモジュール化してエクスポートする方法や、第2部のユースケースAjax通信、CLIアプリ、Todoアプリ)で、実際の使い方を学ぶことができました。

学習を進めて湧き上がる疑問があれば大抵のことはJS-Primerに書いてあり、
「ああ、こうやって使うんだ!」
とまるでパズルのピースがピッタリはまるような感覚が得られました。


難しかったこと

やはり最大の壁は非同期処理です。
JavaScriptを使った開発では避けて通れませんが、概念もコード量も多く、初めて触れる要素ばかり。
当然ですが、1回読んだだけでは理解しきれません。
執筆時点で理解度は3割程度ですが、自分なりのインデックスを作ったので、スキマ時間や実践を通して理解を深めたいと思います。

同じ著者による「JavaScript Promiseの本」も併用して、さらに学習を進める予定です。

azu.github.io





JS-Primerは、単なる入門書という枠を超えて「辞書」としても使える存在でした。

読み始めた当初は疑問だらけで混乱もありましたが、コードを書きながら何度か読み返すうちに、少しずつ霧が晴れていく感覚がありました。

もちろん、一度読んで100%理解するのは難しいです。
ですが、「どこに何が書いてあるか」 を把握しておけば、必要なときに確実に手を伸ばせる強い味方になります。

これからはコードを書きながら、少しずつJavaScriptの理解を深めていきたいと思います。
きっとまた、壁にぶつかる日が来るでしょう。
そのたびに、このJS-Primerを開き、また一歩進んでいこうと思います。

この記事がJavaScript初学者の一助になれば幸いです。
では、また✋️