あ、どうも僕です。
今回は、プログラムって、なんか難しそうと思って敬遠してきた方や、これからはじめようという超初心者の方向けに、プログラミングの超初心者講座をしたいと思うよ！
プログラミング見ただけで嗚咽しちゃう人とかいるよね！いた！ぼく！何だろう！職業病かな！
とにかく今回は、プログラミングに触れたことない人や、挑戦したけど挫折した人向けに、JavaScriptを題材にして、超初心者講座をやってみようではないか！
開発環境をそろえよう
まずは開発環境をそろえよう！プログラムって何があればかけるの？
- テキストエディタ
- ブラウザ
これだけ！
これだけあればプログラミングができるんだよ！
テキストエディタは何でもいいよ！
Windows標準のテキストエディタでも、Macのテキストエディタでも。
要は、テキストがかければ何でもOK！
プログラムってとっても敷居が低いんだね！
最近だと昔はえげつない値段してたプログムラムの開発環境も無料が当たり前になってきて、だれでも、お気軽にプログラミングが学べるような時代になったんだ。いい時代になったものだ。
はじめてのプログラミングを書いてみよう！
テキストエディタで、以下のコードを打ち込んで、「sample.html」と言う名前で保存して、ブラウザで開いてみましょう！
<html>
<body>
<script>
alert('Hello world!');
</script>
</body>
</html>ポップアップで「Hello World!!」と表示されたら成功だ！これであなたも、立派なプログラマーだ！おめでとう。そして、ありがとう。
JavaScriptはHTMLのコードに埋め込んで（外部ファイル化することもできる）ブラウザ上で実行できるプログラミング言語です。はじめてプログラミングに触れるのにはとっても敷居が低いのでJavaScriptを題材にしました。
上記のコードのscriptタグで囲まれている部分がプログラミングのコードです。上記の例では、「alert(‘Hello world!’);」の一行がJavaScriptによるプログラミングコードになります。
この「alert(‘〜’);」っていうのは、ポップアップで「〜」というメッセージを表示しろという命令をする関数です。
プログラムは基本的に前から順番に実行されます。このプログラム言語は1行しかないけど、プログラムが実行されて、1行目の命令が実行されて、それで終了という流れです。
関数というのは、処理の固まりに名前をつけたもので、呼び出すことによって内容が実行されます。
関数は「関数名(引数, 引数, ..)」といった書式で呼び出すことができます。引数というのはプログラミングに渡すパラメータのようなものです。
関数は定義といって、自分で定義するか、ライブラリを引き込んできて定義されているものでなければ呼び出すことはできないのですが、この「alert(〜)」という関数はAPIといって、JavaScriptにデフォルトで定義されている関数のうちの一つです。
JavaScriptにかぎらず、プログラミングというものは、定義されている関数、定義されている変数（後述）、定義されてるオブジェクト（後述）しか使えない。けど、言語によって、「alert(〜)」のようにデフォルトで提供されているAPIというものがあるんだね。基本、そのAPIを駆使してロジックを記述することによって、複雑な処理を実行しているわけだ、本当にべた書きでプログラムを書く場合は、PCの画面に直接描画するような言語だと、画面上のx:0,y:0の座標に黒色のピクセルを描画するとか、そういう命令を駆使していくことによってロジックを組んで、アプリケーションを作り上げていくわけですね。
変数を使ってみよう！
つぎは、プログラムの基本中の基本。変数というものを使ってみよう。以下は、「hoge」という名前の変数を定義して、その中身を表示するサンプルです。
<html>
<body>
<script>
var hoge = "変数の中の値です"; // 変数を定義する
alert(hoge); // 変数の中身を表示する
</script>
</body>
</html>１行目の「var 変数名 = 値;」が変数を定義している部分です。2行目ではその変数の中身をalert関数で表示しています。ポップアップで「変数の中の値です」というメッセージが表示されたら成功です。
変数とは、プログラム内で動的に変化する値を格納する箱です。JavaScriptでは変数の型（数値とか文字列）とかまで定義する必要がないので、何でも格納できてしまいます。ただし、これは楽ではあるのですが、使用する際に、格納されている値が数値なのか文字列なのか、ちゃんと意識私鉄使わないとバグの原因になります。特に文字列の連結とかするときに、数値と文字列を結合しちゃって、思いもしない値が表示されるなってことはよくあることんなので気をつけましょう。
ちなみに、プログラム中に記述されている「//」というのはコメント文といって、その行の「//」以降をコメントとしてプログラムで評価しないという記述です。コメントの記述には、上記のような1行形式のものから、「/*〜*/」といった、複数業にまたがるコメントもかけます。ソースコードにコメントを記述していくと、あとで読み返したときにプログラムの理解がしやすくなるので、積極的に書くようにしていきましょう。
次はこれまた基本、条件分岐をあつかってみようではないか！
条件分岐を使ってみよう！
以下はランダムに「!!!」か「???」か「…」を表示するサンプルコードである。
<html>
<body>
<script>
var value = Math.random();
if (value < 0.3) {
alert('!!!');
}
else if (value < 0.6) {
alert('???');
}
else {
alert('...');
}
</script>
</body>
</html>条件分岐は「if (条件) { 条件に一致した場合の処理処理内容 } else if (条件) { 条件に一致した場合の処理 } else { それ以外の場合の処理 }」という記述をする。条件は上から順番に評価されて、一致した条件分が実行される。「else if」と「else」は任意である。条件の評価はいろいろあるよ！
- 「値 == 値」値と値が等しい
- 「値 != 値」値と値が等しくない
- 「値 = 値」値が値以上の場合
- 「値 < 値」値が値より小さい場合（値を含まない）
- 「値 > 値」値が値より大きい場合（値を含まない）
基本的なものは以上だが、他にもある。
そして、条件式は、かつ「&&」や、または「||」などで連結して評価することができる。
例えば、aがbより小さく、かつcよりも小さい場合ならこう書く。「if (a < b && a < c) { 〜」条件はひとつひとつばらして書くのだ。
繰り返しを使ってみよう！
指定回数繰り返したり、ファイルの内容が読み終わるまでループするというのはよく使うパターンだ。繰り返しのサンプルコードは以下の通り。以下は画面に５回「!!!」と表示するサンプルコードである。
<html>
<body>
<script>
for (var i = 0; i < 5; i++) {
alert('!!!');
}
</script>
</body>
</html>繰り返しは、「for (初期化; 繰り返し条件（trueの間繰り返す）; ループ終了後の処理) { 繰り返し内容 }」が基本中の基本だ！繰り返しには、他にも「while (繰り返し条件) { 繰り返し内容 }」とかあるけれど、頻度としてはforループと呼ばれる上記の書き方が基本かつ定型文。「for (var i = 0; i < 繰り返し回数; i++)」という記述は定型文中の定型文なので、この書き方は暗記してしまおう。
関数を定義してみよう！
処理をまとめて名前を付けて定義したとか、繰り返し実行するようなロジックは関数として定義してしまいましょう。以下は自前の関数を定義して、それを呼び出すサンプルコードです。画面に「メッセージ」というポップアップが表示されたら成功だ！
<html>
<body>
<script>
// 自前の関数を定義
function showMessage(msg) {
alert(msg);
}
showMessage('メッセージ'); // 自前の関数を呼び出し
</script>
</body>
</html>関数の定義は「function 関数名(引数, 引数, …) { 処理内容 }」という記述で定義できる。定義した関数を呼び出すのは「関数名(引数, 引数, …);」だ！
まとめ
ここまで説明した内容が「プログラミング」をする上で基礎中の基礎となる内容だよ！ここまで書いた内容はJavaScrpitに限らず、どんな言語にも共通して全ての基礎となる部分だから（多少記述方法は違う場合もあるが）、理解しておくといろいろ応用がきくよ！
でも、プログラムって、高々この程度しかできないのかよ！こんなことしかできないなら、わざわざ勉強してまで習得しても面白くないよ！と思われるだろう。もっともだ。
でも、「この程度のこと」が分かっていないと、ライブラリを使うにしても、応用が利かないんだよ。逆に、「この程度のこと」がわかっていると、ライブラリのソースコードも何となく読めるようになるから、ちょっとしたカスタマイズにも対応できちゃったりするよ！
もしこの入門編が好評であれば、続きを書くよ！この続きがあるかないかは、あなたの反応にかかっている！
以上、よっしーでした。
関係ないけど、ソフトバンクの孫さんがツイートした“@masason: 髪の毛が後退しているのではない。私が前進しているのである。 RT @kingfisher0423: 髪の毛の後退度がハゲしい。”は、早くもツイートオブザイヤーに輝いてもおかしくないレベルのすばらしい切り返しだ。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
