javascript(jQuery)で始めるプログラム基礎

今回から、何回かに分けて、プログラムの基本的な考え方をお伝えしていきます。

「プログラム」と聞くと、どの様なイメージを持つでしょうか?

「意味不明な単語が並んでいる」
「難しそう」
「理系」

何れにしても、初学者の方は、ハードルが高いと感じる方多いと思います。
そんな方の為に、比較的馴染みやすいjavascriptを例に、プログラムに慣れていただける様記事を書いてみます。

1.プログラムがやっている事はたった4種類

一見すると、無秩序で煩雑に感じるプログラムですが、きちんと意味のある言葉が並んでいます。
そして、その言葉には必ず意味があります。
一行一行意味があり、それを学んでいく事で、何が書いてあるかがわかる様になります。
実はプログラムは、たった4種類の事しかしていません。

1.入力
2.出力
3.分岐
4.繰り返し

以上の4種類の事しかしていません。というか出来ません。
場合によっては、数千行ものコードが書かれたプログラムも珍しくはないですが、
実はやっている事は、以上の4つに大別されます。
その4つを、世にいるプログラマーの方達は、巧に組み合わせてプログラムを作っています。
各々がどんな物なのか、今の時点ではイメージが付きにくいかもしれませんが、ひとまず大丈夫です。
これから説明していきます。



2.ファイルを用意する

javascriptのプログラムを書きながら解説します。
javascriptを書く方法は、大雑把に言うと2種類あります。

1.拡張子が「.js」というファイルに記述します。
2.htmlファイルにscriptタグを書き、その中に記述する。

以上の2種類です。
一般的に、1つ目の「.js」ファイルを作ってそこに記述する事が多いですが、
今回は、ひとまず動くサンプルを作ると言う事で、比較的簡単な、2のhtmlファイルにscriptタグを書いて記述する方法で解説します。

2-1.htmlファイルを作成する

htmlファイルを作ります。
DOCTYPEなどの記述をしておきます。
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>プログラム基礎</title>
</head>

<body>

</body>
</html>

2-2.scriptタグを記述する

headタグの中に、scriptタグを追記します。
この中に、javascriptの記述をしていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>プログラム基礎</title>
    <script>
    
    </script>
</head>
<body>
</body>
</html>




3.出力してみる

1.入力
2.出力
3.分岐
4.繰り返し

以上の記述の中で、入力が一番最初に書かれていますが、どちらかと言うと出力の方が単純な場合が多いので、そちらを解説します。

以下の記述を、用意したHTMLファイルのscriptタグの中に記述します。

<script>
    alert("javascript");
</script>
書けたら、HTMLをブラウザで開きます。 以下の様に、画面に小窓が作られ、「javascript」という文字が表示されたと思います。


「文字が表示された」という事は、javascriptが「文字を出力した」という事です。
alertというのは、文字などをポップアップで表示する(出力する)事が出来る、javascriptの書き方です。
ユーザーに何かしらの注意喚起をするのに使う事があります。

が、とりあえず今は、このalertをどう使うかを考える必要はありません。
「文字」を「出力」した。という事自体が大事です。

後は、「文字以外にも出力出来るか?」や、「alert以外に出力する方法はあるか?」という事を考えていく事ができます。

具体的には、「htmlタグを」、「画面上に」出力できれば、Webページで表現できる文字をJavascriptでコントロールする事が可能になります。

実際にやろうと思うと、Webページに文字を表示するのは、少し難しいので今回はやりません。とりあえず、「alertを使って、文字を出力した」という事を、しっかり意識してみてください。

同様に、alertを使って他の文字も出力してみてください。
例えば、以下の様に記述すると、alertの画面がOKボタンを押す度に、3回出力されます。

<script>
alert("javascript");
alert("とjQueryを使って");
alert("プログラムの勉強を始めます");
</script>




4.入力してみる

それでは、次は入力を試してみます。
入力を説明する為に、少しだけ新しい事を説明します。
「変数」という物を解説します。
先ほどの出力のファイルとは別に、同じ様にscriptタグでjavascriptがかける状態にしたHTMLファイルを用意します。


4-1.変数とは何か

初学者の方に、「変数とは何か?」を、日本語だけで説明するのは非常に難しいです。
書籍や、ネットの情報では、
「データを入れておく箱の様なもの」とか、
「値を入れておくもの」の様に表現されます。
その他様々な表現があると思いますが、言葉だけを聞けば聞くほど、よくわからなくなってしまします。
ここは、思い切って「そういうものだ」と割り切って、一度書いてみるのが、理解を深めるのに近道です。
変数を言葉だけで説明するのは、難しいですが、使用用途から考えていくと、イメージしやすいと思います。
そうして、ある程度プログラムに慣れてから、「データを入れておく箱の様なもの」という表現を読むと、「ああ、確かに」と、納得できると思います。


4-2.変数を使ってみる

とりあえず、変数は、「データを入れておく箱の様なもの」と割り切って、使ってみます。
ここで言う、「データ」とは、「文字や数字などのプログラムで使えるもの」と思っていただいて差し支えありません。
先ほどの、alertで文字を出力した際の、「文字そのもの」がデータです。
具体的には、
「javascript」、「とjQueryを使って」、「プログラムの勉強を始めます」という文字がデータという事になります。
さて、変数とは、「データを入れておく箱の様なもの」なので、この「データ」を「入れる」という事が必要になります。
その辺も合わせて、書きながら解説していきます。
なお、次からコメントアウトをコード上に書きながら解説していきます。
javascriptのコメントアウトは2種類あります。

1.「//」で始まる一行(一行コメント)
2.「/*」から、「*/」で括られた複数行(複数コメント)

2の方法は、cssと同じです。
1の方法は、//で開始した行がコメントアウト扱いになります。


//ここはコメントアウト
コメントアウトじゃない

/*
ここはコメントアウト
ここもコメントアウト
*/ 

それでは、変数を使っていきます。

まずは、「変数を定義」します。
変数の定義とは、「これから変数を使います。」という事を記述する事で、
これをしないと変数は使えません。
さらに、変数には名前をつける必要があります。
「データを入れておく箱の様なもの」ですから、その箱に名前を書いて管理するイメージです。
具体的には、以下の書き方です。

var 変数名;

「var」と言うのは、「変数を定義します」という事を表します。varの後に半角スペースを開けて、変数名を書きます。
この変数名は、自分で好きな名前をつける事ができます。
「hensu」でもよいですし、「hako」でも良いですし、なんでもOKです。
通常は、半角英数字で書きます。ただし、一番最初の文字が数字なのはNGです。
<script>

//「hako」という名前の、変数を定義します
var hako;

</script>

これで、hakoという名前の変数が、プログラム上で使用可能になりました。
それでは、引き続きhakoという変数に、データを入れてみたいと思います。
変数は、最初に定義するときだけ、varが必要で、それ以降は変数名の記述だけで使う事ができます。

//「hako」という名前の、変数を定義します
var hako;

//変数hakoに、「こんにちは」という文字を入れる
hako="こんにちは";

「=」の記号が出てきました。この=は、算数的に考えると、「左辺と右辺が等しい」という事になるのですが、プログラム的には意味が異なります。
プログラム的には、「右辺の物を左辺に代入する」という意味になります。
代入とは、要は入力のことです。

hako="こんにちは";

以上のコードは、「右辺にある、(こんにちは)という文字を、左辺にある変数hakoに入れる」
という意味になります。

それでは、引き続き変数hakoに入っているデータを先ほどと同じ様に、alertで出力してみます。以下の記述を追記します。

//「hako」という名前の、変数を定義します
var hako;

//変数hakoに、「こんにちは」という文字を入れる
hako="こんにちは";

//変数hakoをalertで出力
alert(hako);
「こんにちは」という文字が出力されるはずです。
この様に、一度変数に入力したデータは、変数ごと出力する事で、勝手に中身を出力してくれます。

先ほどの出力の時と違うのは、hakoを「"」で括っていない事です。
「"」で括らない場合、「変数hako」を出力します。
aleft(hako);
つまり、上記のプログラムの場合、「こんにちは」という文字を出力します。
もし、「"」で括ってしまった場合、それは、「hako」という文字を出力してしまいます。
変数として扱いたい場合、「"」無しで記述します。

尚、コードを書くときに半角スペースを入れて、見やすくする事が出来る場所があります。
例えば今回の場合、

hako="こんにちは";

の箇所は「=」の左右に半角スペースを入れて、

hako = "こんにちは";

この様な書き方でも大丈夫です。
また、「"」の代わりに「'」を使っても構いません。

hoko = 'こんにちは';

いずれも同じ様に動作します。
この辺の書き方は、好きに決めて大丈夫です。

さて、変数にデータを入れて、出力してみました。

が、その利用方法はまだまだ理解しにくいところがあると思います。
前述の「単なる文字の出力」と、今回の「変数に文字を入れてから出力」するのとの違いが非常にわかりにくいと思います。むしろ1行程増えて、面倒になっています。
そこで、もう少し変数の意義がわかる様に、別の記述をして確かめていこうと思います。


4-3.文字と文字をくっつける

また、新しいファイルを用意してscriptを書いていきます。
いままでは、「javascript」とか、「こんにちは」とか、一つの文字を、各々一つずつ出力していました。
そうではなくて、複数の文字をくっつけて出力する事が可能です。
例えば
「鈴木」という文字に、「さん」という文字をくっつけると、
「鈴木さん」という文字になります。
くっつけ方は、二つの文字を「+」で繋ぎます。

それでは、早速試しに出力してみましょう。
尚今回から、出力をalertではなく、console.log()を使ってみます。
毎回alertのOKボタンを押さずに出力がチェックできます。

<script>
//「鈴木」と「さん」をくっつけて出力
console.log("鈴木" + "さん");
</script> 


ブラウザで見てみると、一見すると何も表示されていない気がします。



実は、console.logで出力したものは、通常は見えないところに隠れています。
ブラウザ(Google Chromeを想定)上で右クリックし、「検証をクリックします。」デベロッパーツールが開きます。
デベロッパーツールの上部タブパネルから、「console」をクリックします。



コンソール画面が表示されます。
無事にコンソールに出力されているのが確認できます。


この、「コンソール」という機能は、サイトを見てくれるユーザー向けではなく、サイト開発者向けのツールです。
console.log();として、丸括弧の中に出力したいものを入力します。
変数などに何が入っているかを確認する為などに使います。

さて、コンソールには、「鈴木さん」と出力されました。
文字と文字を「+」で繋げると、連結されて出力されるのがわかるかと思います。
今回は、「鈴木」も「さん」も、どちらも直接連結しましたが、変数に入っていても問題なく連結されます。以下の様にコードを書き直してみます。

<script>
var hako = "さん";
console.log("田中" + hako);
</script> 


先ほどと同様に、「田中」と変数hakoの中身である、「さん」という文字が連結され、コンソールには、「田中さん」が表示されたはずです。

さて、それでは、以下のような場合を考えてみます。
たくさん出力する必要があるときです。

<script>
console.log("鈴木" + "さん");
console.log("田中" + "さん");
console.log("佐藤" + "さん");
console.log("高橋" + "さん");
</script> 

この場合も、普通に連結された文字が出力されます。


では、次に「さん」を、「様」に直してみます。
この場合、4つの文字、(鈴木、田中、佐藤、高橋)を全て直さなければなりません。

<script>
console.log("鈴木" + "");
console.log("田中" + "");
console.log("佐藤" + "");
console.log("高橋" + "");
</script> 

以上の様に、4箇所修正する必要があります。

一方、変数を使った場合はどうでしょうか。

<script>
var hako = "さん";
console.log("鈴木" + hako);
console.log("田中" + hako);
console.log("佐藤" + hako);
console.log("高橋" + hako);
</script>

以上のプログラムで、「さん」を「様」に直す場合、どこを直したら良いでしょうか。







答えは、以下の様になります。

<script>
var hako = "";
console.log("鈴木" + hako);
console.log("田中" + hako);
console.log("佐藤" + hako);
console.log("高橋" + hako);
</script>

変数hakoに代入している「さん」を、「様」に直すだけで、全ての出力(鈴木、田中、佐藤、高橋)が、「様」に直ります。

この様に、「使い回しができるもの」を、変数に代入(入力)しておき、プログラムを書く事で、後々の修正で非常に合理的になる場合があります。
実際に、上記の「さん」を「様」に直す例では、修正箇所が4分の1になっています。

上手に変数を使い、修正のしやすく合理的なプログラムを作るのが大事になってきます。



5.まとめ

今回は、まず最初という事で、プログラムの基本である、

1.入力
2.出力
3.分岐
4.繰り返し

のうち、入力と出力を試してみました。
主に、変数への入力と、アラートによる出力と、コンソールへの出力を試してみました。
入力、出力以外にも、変数や代入、文字の連結など、初めてのことが多く、慣れるまで少し時間がかかるかもしれませんが、根気よくこの記事を何度も読んで見てください。少しづつ何をやっているかがわかってくると思います。

なお、「やっていることはわかったけど、これをどうサイト制作に活かすかが解らない」という場合は、今の時点では深く考える必要がありません。
もう少しプログラムに慣れてからじゃないと、その疑問は解消できません。
あまり深く考えすぎずに、この記事のコードを何度も書いてみてください。

次回は、今回使った「文字」以外のデータについて色々解説していきます。