第3回Web × プログラミング ～JavaScript実装編～ でHelloWorld！できました

周南市のコワーキングスペース「カラム」で毎月第3木曜日に行われているJavaScriptの勉強会「Web × プログラミング 」の第３回目に参加してきました。やっとJavaScriptにHello World！できて率直にとっても嬉しいです。やったーーー！

講師は光市の株式会社ステラリンクの代表取締役である石川博之さん。参加者は超初級者（私）から実務でJavaScriptを使いこなしている人まで様々で、内容は主に初級者を対象としながら、要所要所で上級者向けのお話を織り交ぜる形となっています。受講者もわりと自由に発言できる雰囲気で、それぞれのレベルに合った理解を持ち帰る…というスタイルです。

「レポート」と呼べるようなものではありませんが、当日を振り返ってみたいと思います。ではではいってみましょう！


（見えづらいですが、マイ指し棒を颯爽と取り出す石川先生）


JavaScriptとは何か

まずはJavaScriptの歴史や、JavaScriptでできること、使われ方の説明から。実はこのお話は毎回されているので3回目。初参加の人がいる場合は説明する…って仰ってたけど、個人的には毎回繰り返して欲しいです。私は初級者なので聞き慣れない言葉が多い為、理解できるところとできないところがあるわけですが、同じことを何度か聞くうちに少しづつ理解が進んでいる気がします。

（先生曰く「もし、こんなのもう知ってるよ！という人は他のことやっててもらっても大丈夫です。それが”勉強会”だと思います」とのこと。）

具体的には

などの内容。詳くは第1回のスライドをご覧ください。

Web × プログラミング ～JavaScript編～（2017/2/16）


素のJavaScriptをHTMLの中に書いてみよう

昨今はJavaScriptそのものを記述するより、jQueryなどのライブラリを用いて簡略化した記述をすることが多いそうですが、今回はそういったライブラリを使わない基本的なJavaScriptの書き方を学びました！

実務上のメリットとしては、ライブラリをかまさない分だけ実行速度が速いこと、細かい調整が効くことなどです。

実際に書いていったソースコードを下記にいくつか紹介します。（メモしたことと自分の理解の範囲で記述しますが…初級者が書いたものとして、ご注意ください(^o^;)）

① htmlファイルの中にスクリプトを埋め込む

<script type="text/javascript"></script>

scriptタグで囲って、HTML内にJavaScriptを書いていきます。type属性にはMINEタイプを指定します。
MINEタイプ…ウェブとブラウザ間でやり取りされるバイナリデータが何であるかを明示するもの。
参考：拡張子とMIMEタイプ

② ブラウザに「Hello World!」を表示する。

document.write('Hello World!');

続いて、先ほどのscriptタグ内にJavaScriptを書き込んでいきます！「document」とはbodyタグで囲まれた内容のこと。ここに「Hello World!」と書き込みます。やっとJavaScriptの世界に挨拶できて感動。やったーーー！

③ ポップアップ表示で「Hello World!」

alert('Hello World!');

ブラウザにポップアップ表示で「Hello World!」させます。このメソッドはデバッグする際に有効。処理があるところまで来た時に、どんな値が入っているか確認できますね。

④ HTMLのIDを使って対象を取得する

alert(document.getElementById('target').innerHTML);

ここでは「getElementById」メソッドで'target'というIDが割り当てられた要素を取得し、それの「innerHTML」プロパティの内容をポップアップ表示させています。このようにJavaScriptからHTML内の操作したい対象を指定して、目的の処理を実行することができます。ここがとても重要。

⑤ HTMLのclassを使って対象を配列に取得する

var elements = document.getElementsByClassName('target2');
alert(elements[1].innerHTML);

今度は「getElementsByClassName」というメソッドを用いて、'target2'という名前が割り当てられたclassの要素を配列に全て取得しています。ここでは、elements[1]で2番目の要素を指定しています。

⑥ jQueryでの対象取得の記述方法（オマケ）

// ID指定
alert(jQuery('#target'));
alert($('#target'));

// class指定
alert(jQuery('.target2'));
alert($('.target2'));

JavaScriptのライブラリであるjQuery。これを用いるとJavaScriptを簡略化して記述することができます。上の例のように、「jQuery」は「$」で置き換えることができ、どちらでも可。ちなみに、ライブラリは読み込まなくてはいけないので、これだけ記述してもダメです。サーバーにライブラリを置くかGoogleから読み込むかする必要があります。

その他のポイント

コメントの書き方

// 一行コメントはこのようにスラッシュ2本です

/*
複数行にまたがる場合は、
このように書きます。
*/


陥りやすいミスで、複数行コメントを二重に囲んでしまうということがあります。その際、こちら↓は処理が通るのですが、

// OKパターン（コメントの開始が２つある）

/*
/*
〜〜〜
*/

こちら↓は処理が通りません。ご注意ください。

// NGパターン（コメントの終了が２つある）

/*
〜〜〜
*/
*/

// ↑２つ目の終了は色がコメント色（青）になっていませんね。

HTMLとJavaScriptの位置関係

今回のようにHTMLの中にJavaScriptを直接記述するときは、JavaScriptから操作したい対象はそれより上になければいけません。
一方、JavaScriptをファイルとして切り離しHTMLに読み込む場合は、操作したい対象より下で読み込んでも大丈夫です。

感想

ずっと気になりながらも、ちゃんと学べていなかったJavaScript。やっとプログラミング業界おなじみの入門フレーズ「Hello World！」を表示できて、何度も言ってしまいますが嬉しかったです。もう、何でもできそうな気になっています（笑）

実際何でもできるわけないのですが、それでも全く知らなかった分野で「０が１になった」ことは自分の中ではとても大きいことでした（もちろん十進法の１）。

そうできたのも、丁寧に教えてくださった石川さんのおかげです。いつもありがとうございます！！また、私の疑問を一緒に考えて教えてくださる学友のみなさん、そしてカラムのマスターの堀江さんのおかげでもあります。ありがとうございました！