JavaScriptってなに？ページに動きをつけよう

たける ボタンをおすと数字が増える、みたいな「動き」はどうやって作るんですか？

りこ それが3つめのことば、JavaScript。ページに「動き」をあたえる、ロボットの脳みたいなものだよ。

3つのことば、それぞれの役わり

ここまでで HTML と CSS を見ました。3つめが JavaScript（ジャバスクリプト） です。それぞれの役わりをならべると、こうなります。

HTMLだけでもリンクやフォームは動き、CSSでもアニメーションは作れます。ボタンで数を計算するなど、自分で決めた処理にはJavaScriptを使います。そこに JavaScript を足すと、ボタンをおしたり、数字が変わったり、動くようになります。

ボタンをおすと文字が変わる

たとえば、ボタンをおすと「（ここに出ます）」が「こんにちは！」に変わる、という動きを書いてみます。

<button onclick="document.getElementById('msg').innerText = 'こんにちは！'">
  あいさつする
</button>
<p id="msg">（ここに出ます）</p>

むずかしく見えますが、やっていることはシンプルです。

• <button> … おせるボタン
• onclick="..." … 「おされたら、これをやってね」という指示
• document.getElementById('msg') … id="msg" の場所をさがす
• .innerText = 'こんにちは！' … その中の文字を「こんにちは！」に書きかえる

ボタンをおす前と、おしたあとでは、こう変わります。

ボタンをおした「合図」を受けて、JavaScriptが文字を書きかえてくれました。これが「動き」です。

たける なるほど！でも、`document.getElementById` とか…ちょっと長くてむずかしいです。

りこ いいところに気づいた。動きが増えると、こういう書き方はどんどん大変になる。それをすごくラクにしてくれるのが、いよいよ次から学ぶ React なの。

だから React が登場する

ボタン1個ならいいですが、画面が大きくなって「ここも変えたい」「あそこも変えたい」が増えると、document.getElementById(...) のような書き方は、こんがらがってきます。

その「動き」を、もっとかんたんに・きれいに書けるようにする道具が React です。次のセクションから、いよいよReactに入ります。

JavaScriptは奥が深いことばですが、このシリーズではReactを使ううちに、必要なところを少しずつ覚えていきます。今は「JavaScript＝動きをつけることば」とわかっていれば十分です。

まとめ

• JavaScriptはページに動きをつけることば（HTML＝ほね組み、CSS＝見た目、JS＝動き）
• ボタンの onclick で「おされたらどうするか」を指示できる
• 動きが増えると素のJavaScriptは大変になる → それをラクにするのが React
• JavaScriptはReactを使いながら少しずつ覚えればOK

次の第5回からは、いよいよ React です。「部品で作る」という新しい考え方を学びましょう。

確認してみる

HTMLの例をindex.htmlに保存して開き、ボタンを押す。idを変えると文字が変わらなくなるので、msgという名前が対応しているか確認する。

仕様・手順の参照先