投稿先: https://noratetsu.blogspot.com/2022/03/javascript01.html
JavaScript日誌:一歩進んだら十回足踏みせよ
今年に入ってからJavaScriptの勉強をしている。1月27日からなので、一ヶ月半近くになったようだ。
少し長くなったので今回の内容を予め示しておくと、①JavaScriptを勉強し始めた理由四つ、②勉強して得たこと、③勉強を進められた理由二つ(教材と取り組み方)、という構成になっている。
仕事に必要なわけでもなく、将来仕事にしたいわけでもなく、ただ趣味として勉強しているのだが、今更勉強しだしたのにはいくつか理由はある。
まず、これまでにHTMLとCSSの勉強をしており、あとJavaScriptを覚えればWebページに必要な知識が揃うはずだというのがひとつ。CSSを覚えてよく使うツールやよく訪問するサイトの見た目を整えられるだけでデジタルライフは随分豊かになると感じているが、ここまで来たらもう一歩進みたい。
次に、以前HTML日誌:自分のためだけにHTMLを書くで書いたが、ローカルのHTMLファイルにwebブックマーク置き場を作っていて、そのデータをスマートに管理したいという具体的な望みがあったことが理由として大きい。一応ブックマークレットを用意して、コピペすれば適切なHTMLタグがついた状態で簡単に貼り付けられるようにしてはいたが、並べ替えたりするとなると手作業になるので非常に大変だった。ごちゃごちゃHTMLタグがついた状態だと何がどこにあるのかも見づらい。VSCodeなどでは構造を踏まえてアウトラインを表示できるとはいえ、とても操作がしやすいとは言えない。なので、データ自体はCSVなど別の形式で作っておき、自動でHTMLタグを生成して表示できるようにしたかった。そのためにはJavaScriptを覚えればよいのだということは予め判っていた。
また、Scrapboxを使っていると他の人が作ったUserScriptを目にすることがよくある。便利なものは借りていくつか導入している。しかし、一体どの文で何がなされているのかさっぱりわからないのでカスタマイズが全くできない。何をなし得て何が無理なのかも想像がつかない。別にScrapboxを使う上でUserScriptをマスターする必要などないが、わけがわからないという状態でいるとどうにも気になって、そのうち理解できるようになれたらいいなと思っていた。
最後の理由として、プログラミングに対して抱いていたコンプレックスをどこかで粉砕したかったということがある。かなり前にVBScriptとVBAを少し勉強したのだが、全くわからない状態から雰囲気はわかるというところまで(要するにたった一歩)は進んだものの、結局コピペの組み合わせが辛うじてできる程度で挫折した。今にして思えば単に勉強の方法が悪かっただけのことと思うが、当時は「何を読んでも細かいところで何言っているかわからない、他の人はこれできっとわかるのに」というような気持ちになって、楽しさ補正が全くかからない状態のまま、折れてしまうまで辛抱するばかりだった。「結局よくわからなかったなあ」という失敗体験をずるずる引きずってここまで生きてきたので、できることならどうにかしてスッキリ解消してしまいたかった。
自分自身の備忘録のために書いているものでもあるので長くなったが、そういうわけでJavaScriptを勉強してみようと思い立って始めた。今年一年の間になにか小さいアプリケーションみたいなものが作れたらいいなということは漠然と思い描いていた。
結論から言うと一ヶ月経ったあたりで自作アウトライナーができあがったので、今年一年の間にというふんわりした目標は開始ひと月の二月中に達成した。
知っているメソッドはまだほんの一部で、自由にプログラムを作れるようになったとはとても言えないが、それでもおおよその文法はわかるようになった。ScrapboxのUserScriptを見ても、何が変数名で何がメソッドで何が関数かくらいはひと目で判別できるようになったので、読解できそうな希望を感じられるようになった。ちんぷんかんぷんだという時のなんとも言えない疎外感からは解放されたようである。Pythonなど他のプログラミング言語のことはまだ何もわからないが、まあ頑張ればなんとかなるだろうと楽観的に考えられるようになった。
実際にできるようになったことの多さよりも、「できない気がする」と感じていた領域が無闇に果てしなかったのがある程度狭められたことが、自分の中では大きな意義に感じられる。
自分としては相当な速度で習得したのだが、波に乗れたのには要因がふたつあるように思う。
まず第一に、良い教材との出会いがあった。
以前CSSの勉強をした時にJavaScriptも載っている分厚い辞典のようなものを手にしたことがあったが、当時はそれを読んでも全く身につかなかった。というか、やってみようという気にならなかった。知識は美しく整理されているし、調べたいことがはっきりしているならばすぐにその情報にアクセスできるであろう本だったが、ゼロから勉強するには向いていなかった。一応初学者向けのパートはあったものの、「理解しやすい日本語で書いてある」ということと「理解が進む形式である」ということは全然違うらしいと悟って本を閉じた。教材の選択を誤ったのである。その時はCSSが解ればよかったのでそれ以上JavaScriptには挑まなかったが、またしても小さな失敗体験を積む羽目になったのだった。
その後若干の(本当に若干の)調査をした結果、どうせならTypeScriptというものを知った方が良いのではないかと思い、TypeScriptを通じてJavaScriptを学べる何かがないかと簡単に検索をかけてみた。そしてさっと見つけたのがTypeScriptで学ぶJavaScript入門 - @ITというページだった。2014年の記事なので最新の情報ではないが(実行環境であるPlayGroundのバージョンが違うことによる影響があるような気がする)、書いてあるコードそのものはそのまま使えるし今のところ内容に不都合は感じていない。(後日追記:2015年にJavaScriptの大きな仕様変更があり(ES2015(ES6))、そこで追加された機能が現在ごく当たり前に使われているため、より新しい情報を見た時に戸惑うことがしばしばある。考え方をインストールするものとしてはとても良い記事なので、コードそのものよりイメージを学習するものとしておすすめしたい。)
たまたま見つけたこのページの書き方がズブの素人に丁寧に寄り添ってくれていたことで、至極滑らかにスタートを切ることができた。細かく説明してくれていることも重要なポイントだが、軽快かつ洞察力をひしひしと感じる語り口が初心者には大変ありがたかった。如何にわかりやすいと言えどさすがにさらっと一読しただけでたちどころに習得できるほど甘くはないが、何回か読み直してみようと思える文章と出会えたことにより、立ち止まったり前に戻ったりしてきちんと勉強することが苦行にならずに済んだ。他にも優れた教材は世の中に色々あると思うが、偶然苦労なく良いものと巡り合ったので基礎を学ぶにあたっては他の教材を探すことはしなかった。
世の中には、その説明で解るならその説明がなくても解るのではと思ってしまう解説文がちらほらあるが、無理してそういったものと格闘する意味はあまりなさそうである。
もうひとつの要因は、とにかく応用して反復したことである。
急に当たり前感満載のうんざりする話になってしまうようだが、何も練習問題をひたすら解けという話をしたいのではない。例えば「alert("Hello World");」と書いて表示させてみようという話があった時に、じゃあ次は「alert("本日は晴天なり");」と書いて表示してみようと考える、というようなことだ。
得られる結果は予想通りのものであって、それ以外の結果にはなりようがないのだが、それでも「(教科書の内容そのままではなく)自分で書いた通りになったぞ」という実感をその都度得るのは私にとって相当に大きな意味があった。変数を覚えたら今度は「var a = "のらてつ"; alert("私は"+a+"です");」と書いて、おおちゃんと表示されたぞと思う。掛け算を覚えたら掛け算の結果を表示する。console.logを覚えたら同じことをconsole.logでやる。わかりきっていても何回もやる。その度に「おお、本当にそうなった」と思う。そうなるのは当たり前だとしても「おお」と思う。絶対に、例をそのまま打って動かしただけで次に進んでしまわない。一歩進んだらその場で十回足踏みする。(気持ちの話であって、きっちり十パターンやるべしという話ではない。)
用意された練習問題というのは「やれ」と言われているようで面倒になってくるが、「こうしたらこうなるのかな?」と自分で予想してやってみるのは何も苦にならなかった。なので今知っていることで何か他のことはできないかと考えてみる。足し算をやったら引き算をやる。掛け算をやったら割り算をやる。変数を覚えたらわざわざ変数の組み合わせで表現する。配列を覚えたら先にSwitch文の項で出たおみくじプログラムを配列を使って再現してみる。オブジェクトを覚えたら地方をキーとして値に都道府県を入れてみたりする。そんな感じで本返し縫いのようにその都度戻って補強していったことで、結果的に「既にやったことは大体定着している」という状態でじわじわ次に進むことができた。
といっても、定着させるために反復していたというよりは、「もしかしてこうしたらこうなるのでは?」という予想が浮かんでしまい、それを実践して「ほら、やっぱり!」と思ってひとりで満足しているうちになんとなく定着したというのが真実である。なおfor文だけは苦手意識が強くあったので意識的に繰り返した。そしてコールバック関数は繰り返しが足りずにまだよくわかっていないのだが、応用例を自分で思いつくことがあまりできなかったためだ。
プログラミングに才能のある人は一読しただけでスイスイ先に進めるのかもしれないが、どちらかというとただ楽しいからといった理由で「自然と反復した」というのが上達の鍵になった人が多いのかもしれない。学校の勉強のように義務として練習問題で反復させられるのは辛い。気がつけば反復していたという状態で勉強できたらそれが良いのだろうと思う。
チャレンジしているもの→自作ツール - Noratetsu's Room(のらてつ研究所)
Backlinks
- TypeScriptで学ぶJavaScript入門
- 進んだら止まれ
- 2022年の振り返り
- よくわかるNoratetsu Lab(2022年版)~前編~
- ゼロからのプログラミングについての所感
- プログラミングに抱く「得体のしれなさ」問題
関連度が高いかもしれない記事
- ゼロからのプログラミングについての所感
- よくわかるNoratetsu Lab(2023年版)1月~3月
- NTA-DIY:2ヶ月目④~よくわからん三銃士~
- NTA-DIY:なんでこれを書いているのか考え直す
- よくわかるNoratetsu Lab(2022年版)~前編~
他の「プログラミング」タグの記事
- アウトライナー×つぶやき×平面配置②~ツール紹介編~
- 飽き性だから凝ったツールを作る
- ゼロからのプログラミングについての所感
- ツール製作日誌:プログラミングの勉強を開始して半年の振り返り
- プログラミングに抱く「得体のしれなさ」問題
- ツール製作日誌:三ヶ月で劇的ビフォーアフター② 生き方改革編
- ツール製作日誌:三ヶ月で劇的ビフォーアフター① 自作ツール紹介編
- ツール製作日誌:「面のアウトライナー」
他の「JavaScript」タグの記事