今回の記事は、Javacriptを触ったことのない初心者向けの入門となっています。開発のための準備から、最初のサンプルプログラムまでを順に体験していきましょう。
JavaScriptの作成に必要なもの
始める前に、JavaScriptの開発に必要なものの確認です。JavaScriptはWebページ、つまりhtmlファイルに埋め込んだりして使うものなので、必要なものはhtmlと同じになります。
コードを書くためのテキストエディタ（メモ帳など）、表示のためのブラウザがあれば大丈夫です。
詳しくはhtml入門の記事の冒頭で解説しているので、あわせてご覧ください。
※1 JS Nodeを利用する場合など複雑になるケースもありますが、今回はシンプルにブラウザ上で動作するものを扱います。
最初のステップ「Hello world」
それではまずファーストステップとして、サンプルプログラムを動かしてみましょう。言語を問わず、最初のサンプルプログラムにはよく「Hello world」という文を表示するというものがつくられます。今回はこれをメッセージボックスで表示するというものをつくってみます。
htmlファイルを作り、htmlとJavaScriptを書く
実際にファイルを作る手順を示します。テキストエディタを開き、サンプルコードをコピーまたは打ち込んで、「index.html」 という名前で保存してください。保存場所はパソコン内の好きなフォルダで構いません。
Note:HTMLファイルの保存のしかた
メモ帳でhtmlファイルを保存する場合、保存時に「ファイルの種類」ドロップダウンボックスを「すべてのファイル」にする必要があります。そうしないと「index.html.txt」になってしまい、htmlファイルとして扱われません。
また、「xxx.html」と言う名前のファイルはダブルクリックするとブラウザで開かれます。
またメモ帳で編集したい場合は、メモ帳の画面にドラッグ＆ドロップすることで開くことができます。
以下がサンプルコードです。
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>JavaScript練習</title> </head> <body> <h1>ステップ1：HellWorld</h1> <script>//メッセージボックスを表示 alert("Hello, World!");</script> </body> </html>
htmlの内容について
今回はJavaScriptの記事なので、htmlの詳しい話は省略します。さしあたって、<body>～</body>タグの間が実際ブラウザ上に表示される本文であることと、<Script>タグに注目していただければOKです。<script>タグ
このタグは、htmlの中にJavaScriptを埋め込むためのタグです。つまりここにある
alert("Hello, World!");
ブラウザで表示してみよう
ファイルを保存したら、それをブラウザにドラッグ＆ドロップして開いてみましょう。「Hello, World!」という内容のメッセージボックスが表示された後、「ステップ1：HellWorld」と書かれたページが表示ｓれればOKです。
コードをいじってみる
表示ができたら、少しコードを変えてみましょう。
alert("Hello, World!");
コピーして複数行にすれば、その回数分メッセージボックスが表示されます。
このように、サンプルコードをそのまま実行するだけでなく、自分でアレンジを考えてやってみる事でより理解を深めることができます。
発展形：ボタンを押してページ上の文字をかえる
最初の一歩が終わったところで、もう少し発展的な内容もやってみましょう。今回は
ボタンを表示し、押すとページ内の文章を変更する
という内容にします。
コードを修正する
さきほどのindex.htmlファイルの<body>タグの間を以下のように修正してください。<body> <h1>ステップ2：文章を変える</h1> <!-- 文章を表示する用のdiv --> <div id="text">ここの文章がかわります</div> <!-- クリック時に changeText() を呼ぶ --> <button onclick="changeText()">文章の変更</button> <script>// ボタンから呼び出される関数 function changeText() { const text = document.getElementById("text"); text.textContent = "Hello, World!" }</script> </body>
<div id="text">ここの文章がかわります</div> の部分
JavaScriptで変更するためのボックス(div要素)を定義しています。ここで重要なのはid=textという部分です。コードがこのボックスを取得するのにこのidの値を利用します。
<button>タグ
これはページ上にボタンを表示するためのタグです。onclick=""の部分で、ボタンを押した時に呼びだすJavaScript関数の名前を指定することができます。ここで指定したchangeText関数は、<script>タグの中のコードで作っています。
changeText(){～}
ボタンを押した時に呼ばれる関数です。関数の意味と作り方ついては省略しますが、このような書き方で名前の付いた処理のまとまりを作っておける、と覚えておいてもらえればOKです。
const text= document.getElementById("text");
つまりこの部分で、text変数にidに"text"が設定された<div>タグの要素を取得します
text.textContent = "Hello, World!";
ブラウザで表示してみる
修正が出来たら、またブラウザで実行してみましょう。「ここの文章がかわります」という文章の部分が、ボタンを押した後に「Hello world」に変更されればOKです。
開発者ツール（コンソール）はデバッグに便利
今回学習するサンプルコードはここまでになります。お疲れさまでした。最後に、エラーの解析に不可欠な開発者ツールについても少し触れておきます。
多くのブラウザにはページを解析するための開発者ツールが備わっています。
これはエラーメッセージやデバッグ用のテストメッセージの表示など、デバッグには欠かせない機能があります。
テストメッセージを表示してみる
今回はテストメッセージを表示してみましょう。開発者ツールにだけメッセージを出力する命令として、
console.log("テストメッセージ");
これをブラウザで実行した後、開発者ツールを開きます。
開き方は
Chrome：「Ctrl+Shift+J」(Mac：「Cmd+Opt+J」)
FireFox：「Ctrl+Shift+K」(Mac：「Cmd+Opt+K」)
です。FireFox：「Ctrl+Shift+K」(Mac：「Cmd+Opt+K」)
押すと、ブラウザの画面が分割され、右側に以下のような画面が出ます。
（画像はChromeのものです）
ここに先ほど追加した「テストメッセージ」という文章が出ています。
（表示が画像と異なる場合は、開発者ツール上部にある「コンソール」という文字の部分をクリックしてください）
今回作ったプログラムは単純なのであまり関係ないですが、長い処理の中で、ここの変数の値が正しい値になっているかなどを確認したい時、このコンソール出力が重宝します。
また、予期せぬエラーが起きた場合などもここにメッセージが出力されるので、上手く動かない時はここを確認してみましょう。
まとめ
今回はJavaScriptを知らない人向けの最初の一歩という内容でした。ごく簡単な内容でしたが、どんなファイルを作ってどうすれば動かせるのか、基礎の部分は理解していただけたかと思います。
この先のステップについて、当サイトでも学習記事や学習サイト紹介記事などを予定しておりますので、よろしければそちらもご活用下さい。
