どもども～、あべしんです！
- 言語は問わずプログラミングを始めてみたい！
- JavaScriptを始めたいけど何からやればいいかわからない…
- JavaScriptの基礎を手っ取り早く学びたい！
という意見が日本中から寄せられたので (笑)
今回はJavaScriptの基礎をわかりやすく、未経験者目線で解説します。
この記事のポイントは次の通り。
- 細かい話やマニアックな話は抜き
- 基礎を全て網羅するのではなく最低限の部分に絞っている
- 「深く理解する」ではなく「コードが書けるようになる」がメイン
- 実際のコードと画像付きで解説
この記事1つでJavaScriptの大まかな基礎部分が習得できます。
集中すれば1日で終わるくらいのボリュームです！
サクッと基礎を習得してJavaScript使いの第一歩を踏み出しましょう！
今回の内容は「プログラミング全般の基礎」でもあるので、他の言語にも共通している部分が多いです。
用意するもの
以下3つです。
- エディタ
- Webブラウザ
- HTMLファイル
エディタ
プログラムコードを書くためのツールです。
メモ帳などでもできますが、よりプログラミングに特化したエディタツールを使ってみましょう。
次のようなメリットがあります。
- コードが種類ごとに色分けされる
- コードが読みやすい・書きやすい
- メモ帳にはない便利機能が使える
有名なエディタツールはいくつかありますが、僕がおすすめするのはVisual Studio Code(略してVSC)です。
初心者～上級者まで使える人気のエディタツールで、初心者でも扱いやすいのが特徴です。
→【実践】プログラミングしてみよう→まずはHTMLを書いてブラウザに読み込ませる
Webブラウザ
WebブラウザはGoogle Chromeがおすすめです。
他のWebブラウザでも問題ないですが、今はGoogle Chromeが主流です。
まだ入れてない方は下記からダウンロードしましょう。
HTMLファイル
HTMLファイルとは、ファイル名の最後が「.html」になっているファイルのことです。
このファイルをWebブラウザに読み込ませることでWebページを表示することができます。
ここでは詳しい解説はしませんが、今は知らなくても問題ありません。
今回はこのHTMLファイルの中にJavaScriptのプログラムコードを書いていきます。
まず好きな場所にHTMLファイルを作りましょう。
(テキストファイルを新規作成してファイル名を変えればOKです。)
ファイル名は何でもいいですが、今回は「js-practice.html」としましょう。
作ったファイルをVisual Studio Codeにドラッグ＆ドロップします。
半角の”!” (Shift + 1)を入力してそのままEnterキーを押します。
すると画像のようにいろいろと文字が出てきます。
これらの文字の意味についてはとりあえずスルーで大丈夫です。
赤枠の部分が“en”になっている場合は“ja”に変更します。
加えて「<body>と</body>」の間に、「<script>と</script>」を追記してください。
<script>と</script>は、「この間に書かれるコードはJavaScriptですよ」ということを意味してます。
なのでここから先は<script>と</script>の間にJavaScriptのプログラムコードを書いていきます。
これで準備完了です。
それではJavaScriptを書いていきましょう！
JavaScriptの基礎
以下の順番で解説します。
- データ
- 変数
- 代入
- 配列
- 演算子と式
- 条件分岐
- 繰り返し
- 関数
- コメント文
データ
何かしらの情報です。
データには様々な種類があります。
- 「123」などの数値データ
- 「こんにちは」などの文字列データ
- 複数のデータを1つにまとめたデータ
他にもありますが、最初は数値と文字列の2種類さえ覚えておけばOKです。
変数
変数とは「データを入れる名前付きの箱」のようなものです。
変数を扱うにはまず「宣言」をします。
宣言とは、「○○という名前の変数をこれから使います！」と前もって示しておくことです。
「let 変数名;」で宣言できます。
わかりやすくするために変数名はhakoとしましょう。
let hako;
これで宣言完了です。
hako変数をいつでも使えるようになりました。
しかし宣言をしないことでプログラムが正しく動かない場合があるので、基本的に宣言はするものと覚えておきましょう。
代入
数学の代入と同じで、変数にデータを入れることです。
「変数名 = 入れるデータ;」で代入ができます。
let hako;
hako = 5;
これでhako変数の中に5が入りました。
「名前を決めて宣言する → データを入れる」の順番を知っておけばOKです！
ここで変数の中身を確認する方法を紹介します。
「console.log()」というものを使います。
これは()の中にデータ(または変数)を書くと、そのデータを表示してくれるというものです。
let hako;
hako = 5;
console.log(hako);
表示される場所はGoogle Chromeのデベロッパーツールです。
実際に見てみましょう。
一度js-practice.htmlファイルを保存して、Google Chromeにドラッグ＆ドロップしてください。
その後画像のようにGoogle Chromeの右上にあるメニューから、デベロッパーツールを開きます。
デベロッパーツールの画面が出てくるので、画像のように「console」タブを選択してください。
すると「5」と表示されています。
これはconsole.log(hako)と書いたことで、hakoに入っている値が表示されたということです。
以降の解説でも何度も登場します。
また、代入は次のような書き方もできます。
let hako = 5; // 宣言と同時に代入
let hako2;
hako2 = hako; //変数の値(5)を代入
これで「変数にデータを入れる方法」と「変数のデータを確認する方法」がわかりましたね！
配列
配列は「複数のデータをひとまとめにした変数」です。
「同じジャンルや意味を持つデータ」が複数ある場合、それぞれに対して1つずつ変数を用意すると、変数の数が膨大になってわかりづらくなってしまいます。
そこで配列を使い、データ達をひとまとめにすることで管理しやすくなるというわけです。
配列内の各データには、それぞれ何番目かを表す番号(インデックスといいます)が割り振られます。
果物データを例にするとこんな感じ。
左端が「0番目」になっていますね。
JavaScriptに限らず、プログラミングでは配列の先頭は1ではなく0とカウントします。
これはお決まりなので覚えておきましょう！
配列も普通の変数同様、宣言と代入が必要です。
「let 配列名 = [データ,データ,データ・・・・];」
上の図と同じように代入してみましょう。
let fruit = ["りんご", "バナナ", "ぶどう"];
中のデータを扱う際は、「配列名[番号]」と書きます。
0～2番目のデータをconsole.log()で見てみましょう。
let fruit = ["りんご", "バナナ", "ぶどう"];
console.log(fruit[0]);
console.log(fruit[1]);
console.log(fruit[2]);
保存してWebブラウザを更新すると
設定した果物の名前のデータが表示されました。
また、代入で一部のデータのみを変更することもできます。
1番目だけメロンに変えてみましょう。
let fruit = ["りんご", "バナナ", "ぶどう"];
fruit[1] = "メロン";
console.log(fruit[0]);
console.log(fruit[1]);
console.log(fruit[2]);
1番目がメロンに変わっていますね。
演算子と式
演算子は、簡単に言うと式に使う記号です。
式を使う目的は計算です。
主な計算は次の3つです。
- 値を変化させる
- 値同士を比較する
- 値を代入する
(代入は先ほど登場しましたね)
プログラミング始めたてでもよく使用する演算子と式をまとめました。
| 演算子 | 式 | 意味 |
| ++ | A++ | Aの値を+1する(インクリメント) |
| — | A— | Aの値を-1する(デクリメント) |
| + | A + B | 足し算 |
| – | A – B | 引き算 |
| * | A * B | 掛け算 |
| / | A / B | 割り算 |
| % | A % B | AをBで割った余り |
| ** | A ** B | AのB乗 |
| < | A < B | AがBより小さい |
| > | A > B | AがBより大きい |
| <= | A <= B | AがB以下 |
| >= | A >= B | AがB以上 |
| = | A = B | AにBを代入 |
| == | A == B | AとBが等しい |
| != | A != B | AとBが等しくない |
| === | A === B | AとBが等しい(型も意識する) |
| !== | A !== B | AとBが等しくない(型も意識する) |
| && | A && B | AかつB(AND) |
| || | A || B | AまたはB(OR) |
その場合、数値も文字列とみなして文字列同士を繋げてくれます。
いくつか式をコードにしてみましょう。
let A = 5;
let B = 3;
let moji = "こんにちは！";
console.log(A + B);
console.log(A / B);
console.log(A % B);
console.log(B + moji);
console.log(moji + "いい天気ですね！");
実行結果は次の通り。
他の式もコードで書いて結果を見てみましょう！
条件分岐(if文・else文)
条件分岐は「条件によって処理を分岐させる」というものです。
「○○の場合はAの処理、そうでない場合はBの処理」という形になります。
条件分岐はifとelseを使用します。
let hako;
hako = 5;
if(hako === 5) // hakoのデータは5と等しいですか？
{
// 質問の答えがYESの場合↓を実施
console.log("hakoの中身は5です！");
}
else
{
// 質問の答えがNOの場合↓を実施
console.log("hakoの中身は5ではありません！");
}
7行目と12行目はどちらか片方しか実行されません。
ifの()の中の式を“質問”に置き換えるとわかりやすいです。
「hakoのデータは5と等しいか？」という質問に対して、YES or NOでどちらを実行するかが決まるというわけです。
js-practiceを上書き保存してChromeを更新してみましょう。
hakoのデータは5なので、7行目の「hakoの中身は5です！」が表示されていますね。
では2行目を「hako = 6;」にしてみましょう。
hakoのデータが5ではないので、12行目の「hakoの中身は5ではありません！」が表示されました。
if文の式を複雑にしたりif文同士を組わせたりすることで、いろんな処理のパターンを作ることができます！
繰り返し(while文・for文)
読んで字のごとく同じ処理を繰り返すものでループ処理とも言います。
whileとforの2種類があります。
while文
条件分岐のifと同じく、()の中の式(質問)がYESの場合に繰り返して処理を実行します。
逆にNOの場合は繰り返さず終了します。
let hako;
hako = 1;
while (hako < 6) {
// hakoが6より小さい場合↓を実施
console.log(hako + "回目の処理");
hako++;
}
この場合、hakoの値が6より小さい場合に6、7行目が実行されます。
7行目でhakoの値がプラス1されるので、「1、2・・・5」と増えていき、6になったら4行目の質問の答えがNOになるので繰り返し処理が終わります。
デベロッパーツールで実行結果を見てみましょう。
6行目の処理が5回実行されていることがわかりますね。
もし繰り返し処理を使わずに同じことをやろうとした場合、console.log()の処理を5つ書くことになります。
これだと効率が悪いですよね。
このように、同じ処理を何度も実行する場合繰り返し文を使うとコンパクトに書くことができます。
処理の数が100や1000になっても、4行目の式の値を変えてあげるだけでOKです！
今回の例の場合、7行目の「hakoにプラス1する処理」を書き忘れてしまうと、hakoの値がずっと1のままになります。
すると4行目で必ずNOとなってしまい、一生処理を繰り返してしまいます。
これを「無限ループ」といいます。
無限ループするとWebブラウザが固まったり強制終了されたりするので注意しましょう。
for文
while文と違い、()の中に「繰り返しに必要な式をまとめて書く」ことができます。
let hako;
for (hako = 1; hako < 6; hako++) {
console.log(hako + "回目の処理");
}
while文の場合は「hako = 1」と「hako++」は別の場所に書いてましたが、for文はこのように";"で区切ることでまとめて書けます。
実行結果はwhile文のときと同じです。
while文とfor文どっちを使うべき？
始めたてのうちはfor文を使うことをおすすめします。
理由は次の通り。
- 必要な式がまとまってる方がわかりやすい
- 無限ループを防ぎやすい
補足として、while文とfor文の使い分けの基準を解説します。
→繰り返しの回数が決まっておらず、値の変化などをきっかけに繰り返しを終了させたい場合
・for文
→繰り返しの回数が決まっている場合
今回の例は書き方を重視しているため上記の違いが分かりにくいかもしれませんが、ある程度繰り返し処理になれるまではfor文を使いましょう。
関数(function)
関数とは、複数の処理を1つにまとめて扱いやすくしたものです。
特徴は次の通り。
- 複数の処理を1つにまとめたもの
- 呼ばれないと実行されない
- 引数を受け取る
- 戻り値を返す
引数は、関数を呼ぶときに渡す「処理の材料となるデータ」です。
戻り値は、関数の処理が全て終わったときに関数から受け取るデータです。
※どちらも必須ではないので書かなくても関数は実行できます。
それではコードを見てみましょう。
let hako; // kansuに渡す引数
let modori; // kansuの戻り値を入れる
hako = 5;
// hakoを引数で渡してkansuを呼ぶ
modori = kansu(hako);
console.log(modori + "が返ってきました！")
function kansu(hikisu) {
let hako2;
console.log("kansuが呼ばれました！");
if (hikisu === 5) {
console.log("hikisuの値は5です！");
} else {
console.log("hikisuの値は5ではありません！");
}
for (hako2 = 1; hako2 < 6; hako2++) {
console.log(hako2 + "回目の処理です！");
}
return 1;
}
いきなりコードの量が増えましたが、やってることはそんなに難しくありません。
処理の順番は次の通りです。
- 6行目で引数を渡してkansu(関数)を呼ぶ
- 10～24行目の処理を実行
- 6行目でkansu(関数)の戻り値を受け取る
- 7行目を実行
6行目でkansuという名前の関数を呼び、呼ぶときにhakoを引数として渡してます。
9行目以降で関数を"定義"しています。
定義とは、関数の名前、引数、処理をまとめたもので、言わば「関数が何者か？」を表します。
定義の書き方は「function 関数名(引数){ 処理 }」です。
処理の部分には今まで学んだif・else文やfor文など複数の処理が書かれてますね！
呼ばれた時に引数として渡されたhakoのデータを、関数の中ではhikisuという名前で扱っています。
(なので値は5です)
hikisuも変数と同じ扱いになります。
24行目の「return 1;」が戻り値です。
kansuの処理が全て終わると6行目に一旦戻り、そのときmodoriに戻り値である1が設定されます。
それでは実行結果を見てみましょう。
実行してみるとどういう順番で処理が動いているかわかりますね。
もう一度同じ処理を行いたい場合も、またkansuを呼ぶだけでOKです。
つまり、関数は一度作ればいつでも使いまわしができるという便利なものなんです。
実際に仕事などでプログラミングするときも、処理を一つ一つ独立させて書くことはほとんどなく、処理の種類ごとに関数を作ります。
ゲームやアプリなども関数の集合体で出来上がっているイメージです。
コメント文
好きな文章が書けます。
コメント文はプログラムコードではないので、処理に影響しません。
主な用途は次の通りです。
- 処理や関数の概要・説明
- 複雑な処理の要約
- 単純にメモ書き
コメント文の書き方は2パターンあります。
- 左端に「//」をつける(その行のみがコメント扱いになる)
- 両端を「/*」と「*/」で囲う(複数行のコメントが書ける)
// 1行だけのコメント
/* 複数行のコメント
文が長い時に活用しよう */
プログラミングを学習する上でコメント文は重要です。
ポイントや注意点をコメント文で書き記せば、プログラムコードとメモをセットで残すことができます。
こうすることで、プログラムファイル自体を学習ノートとしても活用できます。
一度学んだことをいつでも引き出せるように、コメント文はフル活用しましょう！
コメント