【JavaScript】よく使うJavaScript基本文法まとめ

今回は、よく使うJavaScriptの基本文法をまとめます。
参考にしていただければ嬉しいです。

JavaScriptとは？

JavaScript（ジャバスクリプト）とは、Webブラウザ上で動くプログラム言語のことで、js（ジェイエス）と略して言ったりします。

以前、JavaScriptに関して記事を書いていますので参考にしてください。

→【JavaScript】JavaScriptとは？初心者向けに分かりやすく解説！

JavaScript基本文法

よく使うJavaScriptの基本文法をいくつかご紹介します。

文字を表示させる

htmlに文字を表示させることができます。
htmlに直接記述もできますが、IDやclassを指定させることもできます。

document.write("Hello world!!");

アラートを表示させる

ブラウザ機能のアラートを表示させることができます。
ただ、ユーザーの行動を一度止めてしまうことになるので、多用しないようにしましょう。

alert("Hello World!");

コンソールにログを表示させる

Chromeなどのデベロッパーツールのコンソールに任意の文字列などを表示させることができます。
開発中にとても便利なので覚えとくと良いでしょう。
ただ、公開後は不要なので、開発が終わったら忘れずに削除しましょう。

console.log("Hello World!");

コメントを入れる

コードだけだと他の人が見たときに分かり辛いので、コメントを入れて分かりやすく綺麗に記述することができます。
1行と複数行で、2通り書き方があります。

// 1行のコメント

/*
複数行の
コメント
*/

変数

変数とは、繰り返し使用する文字列や数値にデータを入れることができます。
この変数にデータを入れて宣言することで、繰り返し使用することができるようになります。

var name = "yu";
document.write(name);

varで「これは変数です！」と宣言して、nameが変数名になり、yuが値になります。
この状態で「document.write(name);」と記述すると「yu」と表示され、nameを繰り返し使用することができます。

関数

関数とは、1つのまとまりにすることができ、そのまとまりを呼び出して繰り返し実行することができます。

// 関数
function hello_text() {
    document.write("Hello world!!");
}

// 関数呼び出し
hello_text();

functionで囲ったものが関数で、別の場所で関数を呼び出します。
こうすることで、処理が同じであれば毎回記述が不要になり、綺麗に書くことができます。

条件分岐（if文）

◯◯がこうだったら実行、◯◯がこうではなかったら実行、と、特定の条件に当てはまる場合だけ実行することができます。

if (navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)) {
    // スマホ・タブレット（iOS・Android）の場合、ここに記述されたコードが実行される
} else {
    // PCの場合、ここに記述されたコードが実行される
}

if文を使うことで、スマホで見てる人には◯◯を表示、PCで見てる人には◯◯を表示など、工夫次第で色々なことが実現できます。

ループ（for文）

for文を使うことで、数行で同じ処理をさせることができます。

for (var i = 1; i <= 3; i++) {
    document.write(i + "回目<br>");
}

以下のように表示されます。

1回目
2回目
3回目

配列

変数と同じ意味で、1つの変数に複数の値を入れることができます。

var fruit = [りんご,みかん,メロン,パイナップル];
document.write(fruit[3]);

「パイナップル」と表示されます。

3番目だから「メロン」では？と思った方もいるかと思いますが、プログラムは「0」からカウントするので、0=りんご、3=パイナップル、と表示されます。

最後に

以上、よく使うJavaScriptの基本文法をまとめてみました。

この他にも数多くの文法があります。
全て覚えるのは大変なので、基本をまず抑え、その他は実現したいことをイメージして検索すると、大体JavaScriptで実現できることが多いです。

ライブラリもネット上にたくさんあるので、実現したいことがあれば検索してみましょう。