3. JS魔法修行: (1) 旅のはじまり
ここまでで以下のことが解りました。
- HTML - 文書を定義するもの
- CSS - 見ためを定義するもの
次は JS です。
いよいよプログラムの "実体" となる部分をやっていきます。
いよいよプログラムの "実体" となる部分をやっていきます。
JS は Javascript の略です。
3-1. JSで旅に出る！
世の中 には色々なプログラミングがありますが、ここでは 「ウェブプログラミング」 をやっています。またその中でも 「フロントエンド」 と呼ばれるものを学んでいます。なぜこれをやるかというと、一つに ブラウザさえあれば簡単にできる という理由があります。しかしもう一つは 実用的だから です。
90 年代あたりからインターネットが爆発的に普及したのは、それまでの大学や軍事施設だけでなく、家庭でもパソコンが利用されるようになったからです。そして誰もが世界に繋がるようになりました。
ミレニアルを越えてモバイル端末が普及するとこれはさらに加速し、ウェブは私たちの生活の一部になりました。アプリケーションといえば、それまでの工業や特殊なビジネスなど目的に特化したものが開発され、パッケージ販売されるのが一般的でした。しかし "モバイル端末にブラウザが搭載される" と、ウェブを閲覧することのできる全ての人たちがアプリケーションの対象となり、我々の生活の "あらゆる場面" がウェブサービスとして提供される ようになりました。
これにともない Web 技術 が飛躍的に進化しました。
JS はそのための技術としてここ数年で目を見張るような進化を遂げ、もはや JS だけでウェブ・サービスの大半が実現できるようになりました。何よりも言語としての JS が比較的簡単に習得できるのは幸いでした。プログラミングを学んだことがない人でも JS さえ書ければ世界へと繋がる可能性がさらに拡がるようになった のです。
実際あらゆる端末には今や "Bluetooth"、"加速度センサー"、"GPS"、"カメラ"、"ネットワーク・アクセス" などさまざまな機能が備わっています。これら多様な機能が JS から利用できることを考えるだけでもその可能性は想像できるはずです。
既 存のサービスをそのまま利用することがこれまでのウェブだとすれば、JS を筆頭とするウェブプログラミングによって「好きなようにウェブを体験する」という流れが最近のウェブの方向性として新たな登場しているように思います。
JS はその道具であり、プログラミングでウェブを自分たち自身に繋げるための "実用的" な手段です。これは多様な可能性を秘めたウェブ空間を "旅" するための "現代の魔法" であると私は信じています。
いっしょに JS の魅力を追求していきましょう。
3-2. JS を書こう (alert 編)
現在の HTML を見てみましょう。
第三章なので web_03.html と呼びます。
外部 CSS ファイルを読み込む <link> を覚えていますか？ (参照: 「2-4. CSS を外部ファイルにする」)
<head></head> に入れたタグです。
それとおなじように JS も外部ファイルとして読み込むことができます。
CSS の読み込みの下に以下のように新たな行を追加しましょう。
CSS の読み込みの下に以下のように新たな行を追加しましょう。
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="app_03.js"></script>
これで app_03.js という外部ファイルが読み込めるようになります。
でも実際に app_03.js が必要ですね。app_03.js というファイルを新たに作成し、以下を記述して下さい。
まず最初は alert というものを使ってみることにします。
// ペパロニ・ピザを一枚下さい
alert('I would like a slice of pepperoni pizza please');
ファイルを保持し、ブラウザを更新します。
するとこんなのが出ます。
alert のように何か仕事をしてくれるものを 「関数」 といいます。名前から分かるように alert は 「警告(アラート) メッセージ」 を出すための関数です。
どのプログラミング言語にもたくさんの関数があります。
そもそも関数がなければ、プログラムは仕事をしてくれません。
そもそも関数がなければ、プログラムは仕事をしてくれません。
OK を押すとアラートが閉じます。
alert には I would like... という文字を入れていますね。逆にいうとこの関数はこの文字を "渡されている" とも言えます。渡されるものを 「引数」 といいます。"ひきすう" と読みます。alert は I would like... という 「引数」 を一つ受け取っている、と表現します。
ここで渡している引数 I would like... は 「文字列」 です。文字列というのは JS に用意されている 「データのかたち」 の一つです。そして "データのかたち" は 「型 (かた)」 と呼ばれます。JS には幾つかの 「型」 があります (数値、配列、オブジェクトなど)。これについては６章で詳しく説明します。
ちなみに I would like... は '...' (シングルクオート) で括って'I would like...' としていますね。これは "..." (ダブルクオート) で括っても構いません。どっちにしても 「文字列」 になります。
これから積極的に 「関数」 を使いますし、自分だけの 「関数」 も作ることになります。
3-3. JS を書こう (console.log 編)
次は console.log という関数を使ってみしょう。
app_03.js を書き換えます。
// ペパロニ・ピザを一枚下さい
console.log('I would like a slice of pepperoni pizza please');
ファイルを保持し、ブラウザを更新します。
・・・・
・・・・
・・・・
・・・・
あれ？ 何も起きませんね？
Control + Shift + I を同時に押してみましょう。
Mac の場合は Option + ⌘ + I です。
Mac の場合は Option + ⌘ + I です。
こんなのが出てきます。
ブラウザのページがに分割されて、なんか 「開発者のための画面」 みたいなのが出てきます。
その名も 「開発者ツール」 といいます。いくつかタブが並んでいるので Console というタブを選んで下さい。
その名も 「開発者ツール」 といいます。いくつかタブが並んでいるので Console というタブを選んで下さい。
Console タブを見てみましょう。
console.log で出したかった文字列が出ています。
console.log で出したかった文字列が出ています。
さっきのショートカットを押せば、閉じます。
また押せば開きます。
何度も試してみて下さい。
また押せば開きます。
何度も試してみて下さい。
「開発者ツール」 は console.log といっしょに使うものです。プログラムを書いていて、何かをその場で表示したいときに使います。
3-4. 見ための恐怖に打ち克つ
console.log は 「関数」 であり、その場で何かを表示したいときに使うものだと言いました。
ちょっとここで console.log という 「名前」 が付けられた経緯をお話しましょう。
ちょっとここで console.log という 「名前」 が付けられた経緯をお話しましょう。
こんな経緯です。
部下 新しい機能を作ったんです
上司 ほう。どれどれ・・・
部下 得体の知れない何かを排出する機能だから 魑魅魍魎排出機能 と名付けたのですがいかがでしょうか
上司 チミ・・・ それは・・・ ちょっと名称として長いような気がするし、何より響きがオドロオドロシイと思うよ・・・
部下 そうでしょうか
上司 そうだよ、チミ・・・
部下 どうすればいいですか？
上司 そうだな・・・ console とかどうかな？ 親しみのある感じだし、短いから・・・
とこんな感じです。さらに二人の会話は続きます：
部下 この機能には３つのタイプがあるんです
上司 へぇ、どんな？
部下 一つ目はエラーを出すやつ。二つ目は警告を出すやつ。三つ目は、いたって平凡なメッセージを出すやつです。
上司 ふむふむ・・・
部下 当初の案として考えていた名称は 一つ目が 魑魅魍魎排出機能: 致命的過失編。二つ目が 魑魅魍魎排出機能: 最終通告編。そして三つ目が 魑魅魍魎排出機能: 無常編。 です。
上司 やっぱ長いよ、チミ・・・・ それになんかちょっと怖いし・・・ (お経みたいで・・・)
部下 どうすればいいでしょうか
上司 そうだな、まんまがいいと思うよ・・・ それと関数についてはモジュール名の後に 「. (ドット)」 を付けるのとかどうかな。つまり console.error と console.warn と console.log みたいな感じで。フツーが一番だよ、フツーが。
と、こんな感じです。
何が言いたいかというと、関数名というのは 「よかれと思ってつけられた」 ということです。
プログラミングをやっていると
何かすごい関数に出会うときがあるんですよ。
何かすごい関数に出会うときがあるんですよ。
例えば
AbstractRequestExpectationManager.RequestExpectationGroup
みたいなのとか。
なんか威圧的で、よもや意図的に "近づけまい" としているんじゃないかと疑いたくなるような。
こういうのがズラッと並んでいると 「もうダメだ」 と思ってやめたくなる。
見た目からして 「到底こんなの理解できるはずがない」 と思えるからです。
見た目からして 「到底こんなの理解できるはずがない」 と思えるからです。
でもこれは誰もが体験する心理的な 罠 です。
こう考えてみて下さい。
モジュールの裏側では確かに複雑なことをやっているかも知れません。だけど作者はそれを 「やさしい印象」 にしたかったんです。そのためにあるのが 名前 です。名前を工夫することで、裏側で何をやっているかを知らなくても、
直感的にそれが何なのかを伝えるのが 「名前」 の役割です。
だから長ったらしく、いかめつい関数名にこれから何度も出会い、挫折しそうになったら、作者の努力を察してあげて下さい。関数の名前というのは、その作者が考えに考え抜いた末に付けた 努力の結晶 なのですから。
3-5. JS を書こう (navigator.onLine 編)
話が長くなりました。JS に戻りましょう。
短くてもパワフルな関数というのは多数あります。
短くてもパワフルな関数というのは多数あります。
navigator.onLine もそのうちの一つです。
関数名から推測できますか？
これはブラウザがネットワークに繋がっているかを調べてくれる関数です。
関数名から推測できますか？
これはブラウザがネットワークに繋がっているかを調べてくれる関数です。
では app_03.js を書き換えます。ピザの注文の記述は消しちゃいましょう。
if (navigator.onLine) {
console.log('yes!');
} else {
console.log('no...');
}
ファイルを保持し、ブラウザを更新します。
さて上のコードの中にこういうのがあります。
if (xxx) { A } else { B }
プログラムするときは 「あまり考えないように」 と言いました。
上の部分はちゃんと "無視" できましたか？
上の部分はちゃんと "無視" できましたか？
"無視" するといっても何をやっているかを 推測できる のは大事です。
こんな意味になります。
もし xxx だったら A そうでなければ B を実行してね
if (navigator.onLine)・・・・
もしオンラインだったら・・・
もしオンラインだったら・・・
WiFi が繋がっていれば yes! がログ出力されます。
そうでなければ else のあとの部分が実行されます。
no... の出力です。
そうでなければ else のあとの部分が実行されます。
no... の出力です。