ついこの前、Pythonを学習し始めたばかりのプログラミング初心者が、またまた調子に乗って今度はJavaScriptのワークショップに参加してきた。
今回のワークショップの会場は、先月参加したPythonの集いと同じ。
18時半開始で、21時まで。「JavaScriptをさわったことのない初心者もOK」という誘い文句に思いっきり安心しきって申し込んだけど、申し込み完了のメールに、「事前にNode.jsとnpmをインストールしてきて」という一文。
・・・どうやって？
Node.jsをダウンロードしよう
「node.js npm」などのキーワードでググれば、たくさん解説ページが表示されるので、問題ない・・・はずだった。
MacにNode.jsをインストール
なぜだかNode.jsのインストールの段でエラーが出るという。。。
お手上げ状態になって、結局、次のサイトで【macOS Installer (.pkg)】をダウンロード。
Node.js ダウンロード
無事完了。（だがしかし、自分が一体何をしているのかわかっていない状態。）
ワークショップ：NODESCHOOL
会場へは三番乗りくらい。申し込み時点で、40人弱参加予定と表示されていたけど、実際の参加者は30人位だった。個人で教材の課題をこなしていく。もちろん講師（4人位）が各テーブルをまわって、つまずいていたら教えてくれるし、同じテーブルの人たちと相談したりもする。
使った教材は、NODESCHOOLで提供されているもの。
初心者の私は、javascriptingを選択。
課題に取り組むには (Macでの方法)
ここからは英語の解説を頼りに進めていくこととなる。
- ターミナルを立ち上げて、インストラクションにあるコマンド
npm install --global javascriptingを実行。
javascriptingを実行- 一番上に JAVASCRIPTING と書かれた青色のブロックが表示される。
- INTRODUCTION がハイライトされているので、【Enter】キーを押下。
- 解説にあるとおりにコマンドを実行してフォルダとファイルを作成する。私は一番ラク、という理由から、デスクトップにフォルダを作成。
cd desktop を実行。- 解説どおり、
mkdir javascriptingで【
javascripting】という名前のフォルダを作成。
- 解説どおり、
cd javascriptingで【javascripting】フォルダへ移動し、touch introduction.jsを実行して【introduction】という名前のjsファイルを作成。
- 最初の課題では、【introduction.js】に
console.log('hello');と入力して保存。（以降の単元では【## The challenges】以降の指示に従って取り組んでいく。）
- ターミナルに戻って、
node introduction.jsを実行。（→【hello】と表示されれば課題クリア！）
- 正誤の判定のため、
javascripting verify introduction.jsを実行。
- 以降完了したら、
javascripting verify jsファイル名を実行
- クリア出来ていたら、真ん中あたりにポジティブな単語が表示される（’YOU DID IT’とか’THAT NUMBER IS ROUNDED’など）。
- クリア出来ていない場合には、自分の答えと正解の違いが指摘される。
- ‘javascripting’を実行して、青いブロックの画面に戻る。
- 直前に取り組んでいた単元の右側に[COMPLETED]と表示され、次の単元がハイライトされるので、【Enter】を押下して進める。
- [COMPLETED]と表示されていなければ、直前の単元の課題がクリアできていないので見直す。
取り組み時のポイント
課題は全てファイルを作成するところから始まるので、コマンドを覚えておく。→ touch ファイル名
いくら正解のコードを打ち込んでいても、保存していなければやり直しというメッセージが返ってくる。→ キーボードショートカット：Ctrl＋S
直前に書いたコマンドは、↑（矢印キー）で再表示させる。（【例】node introduction.jsで思い通りの結果が返されず、ファイルを修正。その後、↑を押下して、再実行。）
私が躓いた箇所：LOOPING THROUGH ARRAYS (Exercise 14)
Exercise 10 の【FOR LOOP】で学習する文法
for (var i = 0; i < 10; i ++ ) {
console.log(i)
}
上記の応用問題（課題詳細は省略）で、私が隣の人に相談したのは、2点。
- 配列の要素数を調べるには？
- console.log()をforループから出してみるには？
最終的に二人では解決出来なかったので、先生に質問。
配列の要素数を調べるには
解答
文字数のカウント同様、.lengthを使用。
var pets = ['cat', 'dog', 'rat'];
for (var i = 0; i < pets.length; i ++){
}
console.log()をforループから出してみるには？
これは、ちょっと本題から逸れた話（課題で求められているのは別のこと）。
「配列の一番最後の要素を表示させる場合に、console.log(pets[i])をforループの外に置くにはどうするか」ということを二人で実験。
for (var i = 0;とあるように、カウンタ変数iはforループの中で有効（なのだそう）。ということは、console.log(pets[i])をループの外に出すためには、このiもまた外に出す必要がある。
var pets = ['cat', 'dog', 'rat'];
var i = 0;
for (i; i < pets.length; i ++ ){
pets[i] = pets[i] + 's';
}
console.log(pets[i])
【undefined】というメッセージが返ってくる。二人とも「？？？」状態だった中、先生がヒント：最初の質問の【要素数のカウント】。
そう、インデックス番号と要素数がごっちゃになってた！
pets.lengthで返る値は、3。2ではない。一方、インデックスは、ゼロからはじまる。つまり、ループを抜けた後のiには3が入ってている。console.log(pets[3])は存在しない、となるわけ。
それから、ループの外でカウンタ変数を宣言したら、省略が可能になるとのこと。これらをまとめると以下のようになる。
var pets = ['cat', 'dog', 'rat'];
var i = 0;
for (; i<pets.length; i ++ ){
pets[i] = pets[i] + 's';
}
console.log(pets[i-1]);
しかし、これは課題の解答とは異なる。参考まで、課題の解答は以下。
var pets = ['cat', 'dog', 'rat'];
var i = 0;
for (; i<pets.length; i ++ ){
pets[i] = pets[i] + 's';
}
console.log(pets);
ワークショップの感想
そんなこんななやり取りをしながら、21時手前までに【javascripting】の課題を全部完了。やっていることは、PyQだったりCodecademyとかと同じようなこと。ただ、アドバイスをくれる人や他の学習者たちが傍にいる中で取り組むのは、想像していたよりも面白かった。前述のようなやり取りなど、一緒に悩みながら解決していくのは時間がかかるけど、過程で得るものが多かった。
今回の主催者は、定期的にこのようなイベントを開催しているようなので、次回もぜひ参加したい。（それにしても、この会場で開催されるイベントは、ビールとピザが定番なのだろうか。。。）
あと、今回初めて知ったNODESCHOOL。どうやって使うのかをせっかく知ることが出来たので、時間を見つけて他の教材にも挑戦しようと思っている。
