そもそもプログラムってどうやって書くんだろう
JavaScriptのプログラミングがよく分からない
初心者が覚えておくべき基本構文って何だろう
これからJavaScriptを学習しようという方にとって、プログラミングとは何か？どうやって勉強を進めていけばいいのか悩むケースも少なくないでしょう。
特に、JavaScriptに関してはネット上にさまざまな情報が散乱しており、まず最初に何から手を付けて良いのか迷いますね
この記事では、初心者でもJavaScriptにおいてまず覚えておくべき基本構文を理解するための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。
一人でも多くの方がJavaScriptの不安を解消できれば幸いです。
プログラミングとは？
みなさんはプログラミングにどのようなイメージがあるでしょうか？
昔も今も、コンピュータは何らかの指示がないと何も動きません。例えば、Aという処理をしたら次にBの処理を実行してね…というような指示が必要なわけです。
（サンプル例） Aの処理を実行 ↓ Bの処理を実行 ↓ もしXが10ならDの処理を実行 ↓ もしそれ以外ならCの処理を実行
この指示を与える行為がプログラミングであり、どんな指示をするのかを記述したものがプログラムになります。
また、現在ではPython, Ruby, PHP, Java, C#…など、さまざまなプログラミング言語があります。これは利用するPCや環境・目的によって使い分ける必要があるのですが、ブラウザ上で実行できる唯一の言語がJavaScriptなのです。
そのため、Web開発において必ず学習する必要のある重要な言語であり、本記事ではJavaScriptをこれから学習する方に向けて最低限覚えておくべき基本構文について解説していきます。
変数
この章では、プログラミングに必要となるもっとも基本的な変数について解説していきます。主に、変数の役割や使い方について学習していきます。
変数とは？
プログラムを書くうえで必要不可欠なのが変数です。
変数はさまざまな値を一時的に保存することができて、いつでもプログラムから呼び出して利用することができます。また、好きな変数名を設定できるので、変数の中にどんな値が格納されているのかを把握しやすくしてくれます。
例えば、ユーザーがログインした時に以下のようなメッセージを表示するとしましょう。
こんにちは、太郎さん！
これは【太郎】というユーザーがログインしたときに表示するメッセージです。
次に、【次郎】さん【三郎】さんの場合も用意してみましょう。
こんにちは、次郎さん！
こんにちは、三郎さん！
このようにユーザーごとにそれぞれ異なるメッセージを用意しなければいけません。では、ユーザーが1,000人いたらどうでしょうか？もしくは、100万人のメッセージを用意することを想像してみてください。
どう考えても非効率ですよね。
ところが、変数を使うとたった1つだけメッセージを用意すれば良いのです。例えば、【太郎】という文字列が格納された変数があれば次のように記述できます。
こんにちは、【変数】さん！
実行結果
こんにちは、太郎さん！
このようにメッセージの中に変数を挿入すれば、変数に格納されている文字列を画面に出力させることができます。
つまり、変数の値を変えるだけで異なるメッセージを出力できるようになるわけです。
変数はプログラムを効率よく記述するための基本的な考え方になるのでよく理解しておきましょう。
変数の作り方
それでは、実際に変数を作ってみましょう！
これまでのJavaScriptでは変数を作る時にvarが使われていましたが、現在ではletかconstを使うのが主流なのでこれから学習する方はこちらを使うようにしましょう。
letとconstを使って値を格納するには次のように記述します。
let taro = '太郎'; let taro_age = 30; const hanako = '花子'; const hanako_age = 25;
let / constに続けて好きな変数名を記述し = で値を格納することができます。
格納された値が文字列や数値など、どんなものが格納されているのかは自動的に認識されます。また、このサンプル例だけを見るとletもconstも同じような使い方ができるように思いますよね？
しかし、大きな違いとしてconstで定義した変数は再代入ができません。
そのため、次のように違う値を同じ変数に続けて格納するとエラーになるのです。
const hanako = '花子'; hanako = '伊藤'; // エラーになる
対して、letの場合は再代入ができます。
let taro = '太郎'; taro = '三郎'; // 問題なし
プログラムの途中でうっかり変数の中身を変更したくないようなケースは意外と多いので、2種類の定義方法を使い分けられるようになりましょう。
また、さらなる活用事例やより深い変数についての知識を学びたい方は、次の記事に詳しくまとめているのでぜひ合わせて参考にしてみてください！
配列
この章では、複数の値を格納することができる配列について見ていきましょう！主に、配列の役割や作り方、値の取得・変更について学習していきます。
配列とは？
前章で学んだ変数は、基本的に1つの値しか格納することができません。
しかし、配列を使うと複数の値をまるで1つのデータのように扱うことが可能になるので、より複雑な処理を効率化することができるわけです。
例えば、次のように複数の文字列を格納する場合を考えてみましょう。
const apple = 'リンゴ'; const banana = 'バナナ'; const ichigo = 'イチゴ';
このように変数は1つの値しか格納できないので、必要な文字列だけ変数も用意することになります。これが100個とか1000個必要だと考えると大変ですよね。
このような場合、複数の文字列をたった1つの配列へ一気に格納することができるわけです。
配列の作り方
それでは実際に配列を作ってみましょう！
基本的な作り方は変数と同じなのですが、格納する値を [ ] で囲んだ中に記述していくのが基本になります。
const array = ['リンゴ', 'バナナ', 'イチゴ'];
この場合は、arrayという名称の配列に3つの文字列を格納しています。
[ ] の中に必要なだけ値を格納することが可能で、【,（カンマ）】を使って値を区切っていきます。
また、値は文字や数値が混在していても問題ありません。
const array = ['リンゴ', 200, 'バナナ', 100, 'イチゴ', 300];
さらに、配列の中に別の配列を格納することも可能なので、複雑なデータ構造を作ることもできるようになります。
配列要素の取得
配列の作り方が分かったところで、格納されている値を取得する方法についても見ておきましょう。
先ほど配列に値を格納する時に [ ] で囲んだ中に1つずつ値を記述していきました。実は、この順番はインデックスと呼ばれており、0,1,2,3,4・・・という感じで番号が自動的に割り振られているのです（0から数える点に注意しましょう）
例えば、先ほど作成した配列をもう一度見てみましょう。
const array = ['リンゴ', 200, 'バナナ', 100, 'イチゴ', 300];
この場合、0番目のインデックスに格納されているのが【リンゴ】であり、1番目が【200】になるというわけです。
このインデックス番号を利用することで、配列に格納されている値を次のように記述することができます。
console.log(array[0]); console.log(array[1]);
実行結果
リンゴ 200
配列名に続けて [ ] の中にインデックス番号を記述するわけです。つまり、array[0]と記述すると0番目のインデックスに格納されている値を取得することができるのです。
配列についてはさまざまな活用方法があるため、次の記事で体系的に学習しておくことをオススメ致します！
制御構文
この章では、プログラムを組み立てるのに必須となる制御構文について見ていきましょう！主に、制御構文の役割や代表的なIF文・for文について学習していきます。
制御構文とは？
制御構文というのは、一般的にプログラムを分岐させたり繰り返したりといった処理を実現する構文を指すことが多いです。
代表的なのはIF文やfor文でしょう。
例えば、とある条件の時に任意の処理を実行したいという時はIF文がよく使われます。
if(【条件式】) {
// 実行したい処理を記述する
}
条件を作成することで、複数の処理に分岐させるという複雑な処理をプログラムすることができるわけです。
また、ある条件下の間は任意の処理を繰り返し実行させたい…という場合にfor文がよく使われます。
for(【条件】) {
// 実行したい処理を記述する
}
設定した条件に合致している間は、任意の処理をずっと繰り返し実行し続けます。
このようなプログラムを意図的に制御することができる構文を制御構文と呼ぶわけですね。
IF文による条件分岐の作り方
それでは実際にIF文を使って処理を分岐させてみましょう！
例えば、変数の値が100より小さい場合のみ任意の処理を実行するには次のように記述します。
const num = 10;
if(num < 100) {
console.log('100より小さいです');
}
この例では、条件式をnum < 100としているので変数の値が100より小さい場合のみコンソールログへ文字列を出力します。 ちなみに、elseを使うことで条件に合致しなかった場合の処理も同時に記述することができます。
const num = 10;
if(num < 100) {
console.log('100より小さいです');
} else {
console.log('100より大きいです');
}
このように、条件式に当てはまるかどうかでプログラムを分岐させることができるので便利ですね。
IF文については他にもさまざまな活用方法が用意されているので、次の記事で体系的に学習を進めてみてください！
for文による繰り返し処理の作り方
今度はfor文を実際に作ってみましょう！
例えば、10回繰り返し処理を行うためには次のように記述をします。
for(let i=0; i<10; i++) {
console.log(i);
}
実行結果
0 1 2 3 4 5 6 7 8 9
for文は初期値として設定された変数を指定した量だけカウントアップしていきます。この例であれば、初期値iに対してi++というカウンタを作成しているので、1ずつカウントアップしていきます。
つまり、初期値iが条件式(i<10)をもとに10未満の間は処理を繰り返すという意味になります。 このfor文は処理を繰り返すという特性から、配列の要素をすべて取得するようなケースでもよく使われます。
var lists = ['佐藤', '伊藤', '鈴木', '木村', '田中', '高橋'];
for ( var i = 0; i < lists.length; i++ ) {
console.log ( lists[ i ] );
}
実行結果
佐藤 伊藤 鈴木 木村 田中 高橋
このように配列要素のインデックス番号をfor文の繰り返し処理を使って、1つずつ取得していくわけですね。
また、for文は他にもfor-in文、for-of文、forEach文があり、それぞれ目的に応じて使い分けると効率の良いプログラムを作成することができます。詳しくは次の記事で体系的にまとめているのでぜひ参考にしてみてください！
まとめ
今回は、JavaScriptを学習するうえで覚えておくべき基本構文について見てきました！
最後に、もう一度ポイントをおさらいしておきましょう！
- 変数はlet / constを使い分けられるようになろう
- 配列は複数の値を1つのデータのように扱える
- 制御構文には主にIF文、for文がある
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
