きっかけ
フロントエンドエンジニア転向に向けて学習を進める中、DOM操作という概念が自分の中でずっと腹落ちしていないことに気づきました。querySelectorやclassListといったメソッドは書けます。動くコードも書けます。でも「結局これは何をしているのか」と聞かれると、言葉に詰まる自分がいました。
AIに整理してもらいながら話しているうちに、「HTMLは設計図で、DOMはその設計図から組み立てた実物」という比喩にたどり着きました。ページ遷移をせずに見た目を変えたり、アプリのように操作できたりするのは、ブラウザがHTMLという設計図をもとにDOMという実物を組み立てていて、その実物のほうを直接いじっているからなんですね。当たり前といえば当たり前のことなのですが、腹落ちした瞬間に視界が少し変わった感覚がありました。
「動かせる」と「分かっている」の境界線
ここで振り返ってみると、これまでjQueryとWordPressのテンプレートでたいていのことは動かせてしまっていたので、素のJavaScriptをちゃんと通らずに来てしまっていたんだと思います。jQueryは書けますし、テンプレートのどこを触れば見た目が変わるかも分かります。でもそれは「JavaScriptが分かっている」とは別の話だったんだと、今さらながら気づきました。
「動けばOK」を続けていると、土台の理解はどうしても後回しになります。案件を回すうえでは、実際それで十分だった場面がほとんどでした。ただ、フロントエンドに軸足を移そうとしている今、そこを避けて通れなくなったというだけの話だと思っています。
同じ立場の人へ
制作畑からフロントエンドに移ろうとしている人は、たぶん同じところで詰まる気がしています。恥ずかしいことではないですし、むしろフロントエンド転向の手前でこの曖昧さに気づけたのは、早い段階で軌道修正できたということでもあるんじゃないかと思います。
「動かせるけど分かっていない」を認めるところが、たぶん入口なんだと思います。jQueryの経験自体が無駄だったとは思っていません。DOMを操作するという考え方そのものは近いところにあって、そこは土台として活きている感覚があります。ただ、スコープや型、非同期処理といった素のJavaScriptならではの部分は、また別に固めていく必要があるんだと感じています。
これからの学び直しプラン
学び直しは、じゃけぇさんのUdemy講座とJavaScript Primer(無料・日本語)の二段構えで進めていくつもりです。
順番は、変数・スコープ→データ型・参照→配列・オブジェクト→関数→DOM操作→非同期→モジュールという流れを想定しています。DOM操作については、querySelector→classList→textContentを反復で触りながら、体に入れていくスタンスでやっていきます。
Reactに進む前に、まず素のJavaScriptを固めておくのが結局は近道になる気がしています。急がば回れ、というやつなのかもしれません。
今の段階では、DOM操作のところで手が止まっても仕方ないと思えるようになりました。曖昧さに気づけたこと自体が、今回の学び直しの一番の収穫かもしれません。
