JavaScriptを始めよう（中学生向け）

１．準備するもの
ソフトウェアは様々なものがあり，どれを使うのかは個人の好みによります。初心者はどれを選んでよいかわからないと思いますので，フリーで使いやすいものを紹介しておきます。なお，このソフトウェアを必ず使うよう指示するものではありません。 ソフトウェアのインストール方法については，ここでの説明は割愛します。
２．プログラミング言語とは
私たちがパソコンを使う時，企業や個人などが開発したソフトウェアを利用しています。ワープロソフト，表計算ソフト，ウェブブラウザなどがそれです。これらのソフトウェアは，それぞれの用途で使いやすいように設計されています。例えば，ワープロソフトで「このボタンを押すと文字が太字になる」というように，決められた命令がボタンやメニューにまとめられています。ボタンに割り当てられている命令は，どのようにして割り当てられたのでしょうか。また，命令の内容はどのようにして，人からコンピューターへと伝えられたのでしょうか。コンピュータに対しての指示や命令はプログラミングよってなされます。ソフトウェアの開発者は，プログラミングによってソフトウェアを構築していくのです。
さて，プログラミングをするためには，プログラミング言語を学ぶ必要があります。コンピューターには人の言葉が通じません。そこでコンピューターにも理解でき，かつ，人も理解できる言葉が必要です。この言葉がプログラミング言語です。ややこしいことに，プログラミング言語は無数に存在します。それらの言語には，似ているものもあれば，まったく似ていないものもあります。言語によって，得意な分野や苦手な分野があります。ですから，どんなことをしたいか（どんなソフトウェアを作りたいか）によって，学ぶべき言語が異なってきます。以下に現在よく使われているプログラミング言語をあげてみます。 この他にも有名なものやよく使われているものがたくさんあります。今回学ぶJavaScriptは，主にウェブサイトの動的な表現のために進化してきました（昔のウェブサイトは，本のように動かないものでした）。JavaScriptで書かれた命令を実行する仕組みはウェブブラウザに備わっています。今後，テキストエディタでJavaScriptの命令文を書き，ブラウザでそれを動かすというステップを繰り返しながら，JavaScriptを学んでいきます。
３．JavaScriptの特徴
どのような言語にも長所と短所があります。私が考えるJavaScriptの長所と短所をまとめます。
＜長所＞
  • 開発環境の準備が簡単
  • 柔軟である
  • ウェブとの親和性が高い
  • ウェブブラウザが動作する環境であれば動く
  • 知識と技術があればかなりのことができる
＜短所＞
  • ウェブブラウザのサンドボックス内で動作するので，様々な制約がある
    （ファイル処理やハードウェアの操作など）
  • 単独で動くソフトウェアを作れない
  • 様々なライブラリがあり複雑化している
  • バグの発見がしにくい
意味のわからない言葉については，今のところ読み飛ばしてください。いずれにせよ，初心者がプログラミングを学ぶための最初の言語として，JavaScriptはそんなに悪くない選択だと思います。
４．初めの一歩
JavaScriptは，普通ウェブブラウザ上で動作させます。プログラミングを始めるためには表示するウェブページのファイルを作成する必要があります。ウェブページのファイルは，HTML(Hyper Text Markup Language)という言語で書きます。JavaScriptを学ぶためには，HTMLついても学ぶ必要がありますが，初めはJavaScriptに関する部分だけ説明していきます。とりあえず，テキストエディタを起動し，次の文字を半角で入力し，「index.html」という名前を付けて保存してください。
<html>
<head>
<script type="text/javascript">
function start() {

}
</script>
</head>
<body>
<form>
<input type=button value=start onclick=start()>
</form>
</body>
</html>
保存したファイルをウェブブラウザで開いてください。画面に「start」というボタンが表示されればＯＫです。ボタンを押しても何も起きませんが，これで初めの一歩は終わりです。
５．初めの一歩の説明
注目すべき行だけ取り出して説明します。
<input type=button value=start onclick=start()>
この行はHTML文です。ボタンを表示し，ボタンのラベルを「start」に設定しています。value=startをvalue=testに書き換えるとボタンのラベルが「test」になります。また，onclick=start()はこのボタンをクリックしたときに実行するJavaScriptの関数を設定しています。今のところ，関数とはプログラムのコードのまとまりととらえておいてください。

function start() {

}
この行はJavaScriptのプログラムコードです。正確な言い方をすると，「start」という名前の関数を宣言している，といいます。今後，「{」と「}」の間の行に命令文を書いていくことになります。今は空白行になっているので，「start」ボタンをクリックしても何も起きませんが，ここに命令文を書き込むとボタンをクリックしたときにその命令が実行されます。
６．１行のプログラム
  1. index.htmlをテキストエディタ開き，次のように書きかえる。
    ＜変更前＞
    function start() {

    }
    ＜変更後＞
    function start() {
    　　alert("test");
    }
    ※alertの左側の空白には，「Tab」キーを使ってみましょう。プログラムのコードを書くときに，読みやすいようにタブ（スペースのこともある）を入れるのが普通です。数行のコードでは問題になりませんが，１００行を超えるようなコードを書くときには，読みやすさがとても重要になります。
  2. 上書き保存する。
  3. index.htmlをブラウザで開く。（既に開いている場合はリロード（F5）する）
  4. startボタンをクリックする。
正しく動作するとポップアップウィンドウが出てきて，「test」と表示されます。（こんな感じ：例）
alert()という命令文は，指定した文字列（数値なども可）をポップアップで表示させるものです。

＜コードを書くときの注意＞
コードは基本的に半角の英数字と記号で記述します。命令文に全角文字（ひらがな，漢字など）は使えません。また，どこか一か所でも間違いがあると，動作しなかったり誤った動作をしたりします。初心者はスペルミスや，余計な文字を入力してしまう失敗をよくします。特に，全角のスペースが含まれていると気づきにくいものです。スペースは常に半角で入力する習慣をつけましょう。
なお，命令文の命令の部分には全角文字は使えませんが，表示する文字などには使用できます。

alert("test");の部分をalert("こんにちは");に書きかえて保存，リロード，ボタンのクリックをしてみましょう。全角文字が使えるのは" "の間の部分だけです。
７．変数
プログラミングをするうえで，ある数値や文字などを記憶しておいてほしい場合があります。これらの数値や文字は変数に入れておくことができます。記憶しておきたいデータを変数に入れることを「変数に代入する」といいます。
function start() {
　　var a = 2017;
　　alert(a);
}
この例では，aという変数を用意し，その変数aに数値の2017を代入しています。このようにvarという命令文で，新しい変数を用意することができます（変数の宣言）。変数の名前には予約語と呼ばれているいくつかの単語は使えませんが，英数字であれば基本的に自由に決めることができます。ただし，スペースを変数名に使うことはできません。=によって右辺を左辺に代入することになります。
function start() {
　　var a;
　　a = 2017;
　　alert(a);
}
この例は，先程の例と同じ動作をしますが，変数の宣言と変数への数値の代入を２行に分けて記述したものです。aに2017が代入された後は，aは常に数値の「2017」としてあつかわれます。
次の例が何を表示するか考えながら実際に試してみましょう。
function start() {
　　var a;
　　a = 2017;
　　alert(a + 1000);
}
function start() {
　　var a = 2017;
　　var b = 111;
　　var c = a + b;
　　alert(c);
}
function start() {
　　var a = 2017;
　　a = a -17;
　　alert(a);
}
最後の例は，プログラミング特有の表現です。右辺の変数aはこれまでの値を表し，変数aに新しい値を代入しているのです。
数値を代入するときには，右辺にその数値を打てばよいのですが，文字を代入したい時には" "で囲むことになっています。
function start() {
　　var a;
　　a = "こんにちは";
　　alert(a);
}
function start() {
　　var a;
　　a = "こんにちは";
　　a = a + "，ごきげんよう";
　　alert(a);
}