JavaScriptのDOM操作を終えた途端に、課題に全く歯が立たなくなった。章末の問題まではたどり着いていたものの、解答を見て通過する元気すらなくなって、超基本からやり直している。
超初心者がフロントエンド言語を学習するときにはどのエディタがいいのだろうか
その過程で、前に書いたGASも修正。
【GAS】少しは成長？：スプレッドシートからカレンダーへ予定を登録
Contents
「早く終わらせたい」vs.「理解度」
JavaScriptへの挑戦は今夏の目標で、「夏中に終わらせないと」という気持ちばかりが前に出て、知らず知らずの内に、コードの字面を追うことだけに終始していた模様。
これまでの単元を復習
まだまだあと半分もあるから、まずは全体像を見るつもりで進めるという選択肢も合ったが、あまりのついていけなさに、前に進むモチベーションはない。そこで、本当に最初（変数名の付け方）からやり直すことにした。 初歩の初歩だけれど、ここからすでにあまり真剣に取り組んでいなかったことを改めて思い知る。
変数名：わかりやすい名前を
これまで「面倒くさーい」と変数名をテキトーにつけていたけど、どの教材でもくどいほどに変数名の付け方の説明がある。あれほど訳のわからないエクセルを渡されたことを愚痴っていたのに、自分のことになると甘い、と反省。
プログラムも一度書いて「はい、終わり」というものではなくなりつつあります。（中略）そして、プログラムを変更する場合に、まず必要となるのは「コードを読んで理解する」ということです。この「読む」という作業は、時として「書く」よりも大変だったりします。 （『改訂版JAVASCRIPT本格入門』（山田祥寛、「8.5 読みやすく保守しやすいコードを書くーコーディング規約ー」より））
猛省。 過去散々ハチャメチャな変数名をつけてきた私は、スマートな名前を思いつくことよりもまず（１）lowerCamel記法、（２）無意味な省略をしない、（３）名詞を使う（関数は動詞）を守ることを自分に課してこれまでの課題をやり直し。 「面倒くさい」と思う気持ちはまだ完全に抜けないものの、例題のコードなどを見ても、確かに分かりやすい変数名が付いていると格段に理解が進む1。
GitHubだったり、オープンな開発が進むとこういうトレンドが生まれるのか、と興味深い。どうして同じ会社内ではこういうお作法について考える雰囲気が出来上がってこないのだろうという不思議。
初期化=0を忘れて立ち止まる
改めて課題をしていてハマったのが、forループでまわす配列の計算。配列の要素の平均を求めるだけの単純なものだったのだけど、エラーが出てしまう。
| function averageScore(arr) { | |
| var total; | |
| for (var i = 0; i < arr.length; i++) { | |
| total += arr[i]; | |
| } | |
| return total / arr.length; | |
| } |
どこがダメか全くわからず、20〜30分ほど私を悩ませたこの課題。コードの書き方は覚えたけど、実のところ、今でもしっかりと理解出来ていない。（自信を持って原因を言い切れない。）カウンタ変数の初期化が必要というのは分かるのだけど、どうしてこの変数も初期化が必要なのだろう。値を格納するまでは、undefinedとなっているから放っておいても良さそうに感じる。
JavaScriptは、VBAと違って変数の宣言時ににデータ型を書く必要がない。そのため、var num = 1; と数値を入れた後に、num = one; としてもいい。
number＋number
var scoreJohn = 80;とvar scorePeter = 78;の合計を求める場合には、scoreJohn ＋ scorePeterでいい。
string＋string
文字列の連結も＋。つまり、var greeting = 'Hello ';とvar name = 'John';という変数は greeting ＋ name; というすることでつなげることが出来る。（→ 'Hello John'）
string＋何か
この場合は、「何か」は文字列に変換されて連結される。 宣言をせずともなんて便利なんだ！と思っていたけど、'80' ＋ '78'だったら、158ではなく、'8078'が返されてしまう。 私のコードはそこが問題だったのか。そう思って修正したのが下のコード。（模範解答として紹介されていたのは2つ目のコード。）
var total;をvar total = 0;変更。
| function averageScore(arr) { | |
| var total = 0; | |
| for (var i = 0; i < arr.length; i++) { | |
| total += arr[i]; | |
| } | |
| return total / arr.length; | |
| } | |
| // Another solution: | |
| var averageScore = function (arr) { | |
| var total = 0; | |
| arr.forEach(function (elem) { | |
| total += elem | |
| }); | |
| return total / arr.length; | |
| } |
初期化しないと機能しない理由がよく理解できないけど、コード規約で初期化をすることが推奨されていることもあるので、今後は必ず初期化する。
次の話につながるのだけど、まさか= 0;が原因だと思わず、Function Expressionの作り方が間違っているのかなど、見当違いの部分の確認をしまくっていた。（いや、間違っていたのだけど。）
初心者の壁？：Hoisting、ScopeとFunction Expression
JavaScriptは関数が重要2らしいということや、Hoisting（変数宣言の巻き上げ）/Scope（変数のアクセスできる範囲）といったエリアが初学者にとっての最初の壁になりがちということをこの週末に本を読んで初めて知った。私もきちんとぶち当たった。
「もう進めない！」と決定打となったのは、Closure（関数閉包）という訳のわからないヤツ。ただ、その前からすでに理解が不足していたことに、平均を求める課題をやり直しているときに気がついた。
あろうことかJavaScriptでも重要なHoistingとScopeというトピックをスルーしていたのだ。（理由：なんとなく面白くなくて。）
これらを読み飛ばすと、Function Expression（関数リテラル）も分からない。
実際、「変数にしておくと違うもの入れちゃったら、使えなくなっちゃうじゃん。普通のfunctionだけでいいよ。」と本気で思ってた・・・・。バカ。
避けていたHoistingとScopeを復習してはじめて、「なんでvarじゃなくてletを推奨するの？」とか「なんで’Function expression’を使った方がいいの？」とかおぼろげながら見えてきた。
変数宣言の巻き上げは、他の言語にはないJavaScript独特のものです。 （『徹底マスターJAVASCRIPTの教科書』（磯博、p.32））
私は本を読んだけど、ネットでサクッと理解する場合には、このあたりが分かりやすい。
https://wp-p.info/ https://asciidwango.github.io/js-primer/
でも完璧には理解が出来ていない
関数宣言文で定義した関数も、関数リテラルで定義した関数も、使い方は同じです。（中略）しかし、1つだけ違いがあります。それは、関数宣言文による関数定義は巻き上げられるが、関数リテラルによる関数定義は巻き上げられないということです。 （『徹底マスターJAVASCRIPTの教科書』（磯博、p.57））
反省もどこへやら、またもや分かった気になって、「オッケ、普通の関数はやや問題ありなわけね。じゃ、今後の課題はできるだけ普通のfunction使わないようにする」と意気込んだまでは良かったけど、どうしてそうなのかの部分、定義位置のことはすっかり抜け落ちて、平均を求める課題の際に、一番下に置いて呼び出してみた。当然機能せず、結局あきらめて、普通の関数に戻す、という呆れる状態。
関数利用後に関数を定義すると、関数利用時にタイプエラーになります。 （徹底マスターJAVASCRIPTの教科書』（磯博、p.57））
本には、「何度も失敗してモノにしていく」、的な優しい言葉があるけど、ここまでひどい状態は想定外じゃなかろうか。調子に乗ることなく復習を繰り返して知識を定着させたい。
最終的な目標はプログラムを作れるようになること。実際にプログラムを入力して何が起きるのかを目にし、自分の体験としましょう。（中略）プログラムは1文字間違えてもエラーになることがありますが、それも大事な経験です。 （『スラスラ読めるJAVASCRIPTふりがなプログラミング』（及川卓也、p.13））
体系立てた学習の必要性を実感
GASなどのおかげで私のような素人にもプログラミングが身近なものになってきたと思う。ググれば自分の作りたいものに近いものを作っている人たちがいて、レシピが比較的簡単に手に入る便利な世の中だ。
例えコードの大半が他人の書いたものであっても、そのコードを使って何かを動かせたときには面白いと感じるし、もっと利用してみたいと思う。そうやって、ググる→何かを動かす→ググるのサイクルを繰り返す内、勘のいい人たちは言語を身につけていくのかもしれない。
一方で自分の苦手な部分を避けがちな私のようなタイプは、カリキュラムに沿って進める時期を無理やり設けないと、自分の思い描いたものを作れるレベルには到達できそうにない。
JavaScriptはよくいえば「柔軟な」、悪くいえば「あいまいでいい加減な」言語です。ただなんとなく他人のコードを真似するだけでもそれなりのコードは書けてしまいますが、それだけにバグやセキュリティ上の問題をはらみやすい言語でもあります。本格的にマスターするには、基礎段階での確かな理解が欠かせません。 （『改訂版JAVASCRIPT本格入門』（山田祥寛、「本書の読み方」より））
といういうことで、今月のJavaScript本の購入履歴を無理やり正当化して〆たい。
You must log in to post a comment.