【JavaScript入門】初心者向けに「基礎文法」を完全まとめ

JavaScriptとは

JavaScriptとはWebサイトやWebアプリケーションの作成に使用されるプログラミング言語です。
計算などの「処理」をするプログラムでもあります。

たとえば、ボタンをクリックしたときにイベントを発生させたり、スライドショーやアニメーションなどの動きのあるコンテンツをつくれます。

HTML、CSSだけではできない「動くコンテンツ（インタラクティブ）」を作れます。

JavaScriptの文法は「プログラミング言語の中でも、シンプルで覚えやすいほう」と言われています。

JavaScriptを書く2つの方法

javascriptを書く方法は、おおまかに2つです。

拡張子「.js」というファイルに書く
htmlファイルのscriptタグ内に書く

1つ目の「.js」ファイルを作り、書くことが多いです。
本記事では、サンプルの意味でhtmlファイルのscriptタグ内に書く想定で、ブログを書いていきます。

プログラムでできる4つのこと

出力
入力
分岐
繰り返し

すべてのプログラムは4つだけで動いています。

たとえば、テレビやレコーダーは入力、出力のみ。

HTML、CSSは出力のみ（書いてあるものを出すだけ）で、分岐や繰り返しはできません。

JavaScriptの出力

JavaScriptの出力

JavaScriptのアラート（alert）の使い方
JavaScriptのコンソール（console）の使い方

alert( )を使い、ブラウザに注意メッセージを出力できます。
文字列だけでなく、数値、変数、計算結果などポップアップ表示できます。

またconsole.log( )を使って、開発者ツールに出力できます。
具体的な出力場所は、ブラウザの画面で右クリックから「検証」→「Elementsの横のConsole」で確認できます。

JavaScriptの出力について、詳しくは「【JavaScriptの出力】アラート、コンソールの使い方の基礎」で解説しています。

JavaScriptの入力

変数について
変数の使い方
変数の3つの種類

変数とはデータを格納しておく箱のようなものです。
さまざまな値を保持しておくJavaScriptの機能です。

変数を作成することを「定義する」という言い方をする場合もあります。
文章中の「共通部分」をデータとして代入しておくと、合理的に作業ができます。

変数の定義方法3つ

var 変数名
let 変数名
const 変数名

【var】Variable（可変という意味）の略称。
変数を変更でき、かつ有効範囲が広い。

【let】変更可能の変数。
有効範囲が狭いため、変数名が被りにくく使い勝手が良い。

【const】有効範囲が狭く、変更不可の変数。
追記や変更もできません。

「const → let → var」の順番で使えばOK。

変数については「【JavaScriptの入力】変数の使い方、3つの種類を解説します」で解説しています。

JavaScriptの文字列【概要から連結】

JavaScriptの文字列の概要
JavaScriptの文字列の連結

文字列は'（シングルクォート）もしくは" （ダブルクォート）でくくって記述します。
文字列は加算演算子＋で連結できます。
HTMLを出力するときは、"(ダブルクォート)などの記号も文字列の一部として扱う場合があります。
`（バッククォート）で括られた文字列では、${変数名}で文字列を結合できます。
その他の特徴として、`を使うとその中の改行が有効になります。

詳しくは「【JavaScriptの文字列】概要から連結・結合をまとめました」で解説しています。

JavaScriptの数値

JavaScriptの数値の概要
JavaScriptでの様々な計算例
JavaScriptの少し複雑な計算

数値とは数字のことです。
半角入力で、'（シングルクォート）や"（ダブルクォート）を使わずに記述します。
四則演算ができます。
( )がある場合は、( )を先に計算します。
割ったときの余りを求める剰余算もあります。

その他、HTMLの書き方やさまざまな計算例については「【JavaScriptの数値】概要から四則演算など計算例まとめ」で解説しています。

JavaScriptの条件分岐【if構文】

if構文の書き方（else、else if）、記述例、注意点
if構文を使ってうるう年を判定する方法、記述例

分岐は大事なプログラムです。
HTMLではできないからです。

「ある条件を満たした場合、処理する」というプログラムが可能です。
条件に応じて、処理内容を切り替えられるのです。

たとえば、以下のように。

もし○○だったら、XXをする。
そうじゃなくて●●だったら、YYをする。
○○でも●●でもなかったら、ZZをする。

if構文については「【JavaScriptの分岐】if構文の書き方、うるう年の判定方法」で解説しています。

JavaScriptの配列

JavaScriptの配列の定義方法、出力方法
配列を使って「今日の日付」を出力する

配列を使うと複数データの代入ができます。

たとえば、箱に仕切りをつけて複数データを入れるのが配列です。

配列の定義方法

配列は[ ] でくくります。
挿入したいデータを、,（半角カンマ）で羅列していきます。

const hairetsu = [ 'データ1' , 'データ2' , 'データ3' ];

配列の出力方法

配列データを出力するには、データの順番を [ ] で指定します。

console.log(hairetsu[1]);

データの順番は0から始まるので注意です。

その他、配列の基礎事項については「【基礎】JavaScriptの配列の定義方法【今日の日付を出力】」で解説しています。

JavaScriptの繰り返し【for構文】

繰り返し処理を行なうfor構文の書き方
配列を使うfor構文や、for of 文について
for構文を使ったさまざまな繰り返し文

for構文は、同じような処理を繰り返すときに使います。
for構文は、次のような書式で書きます。

for( 初期化 ; 継続条件 ; 最終式 ){
　繰り返したい文
}

//初期化：繰り返しを始める前に初期化を実行
//継続条件：真偽値を書く式や関数を書く
//最終式：ブロックの処理のあとで毎回実行

配列と繰り返し文は相性が良く、組み合わせると連続的に処理できます。

「for of 文」は配列から1要素ずつ順番に取り出して繰り返しができます。

for( 変数 of 配列名 ){
　処理
}

その他、繰り返し処理についての詳細は、下記にまとめています。
»【JavaScript】繰り返しの処理を行なうfor構文の書き方

JavaScriptのオブジェクト

JavaScriptのオブジェクトの定義と出力
オブジェクトを繰り返し文や配列で出力する方法

オブジェクト

オブジェクト（Object）は英語で「もの」という意味がありますが、JavaScriptでは「対象」と考えます。
JavaScriptではWebブラウザ内のさまざまな要素に「命令」できますが、その対象が「オブジェクト」です。

メソッド

メソッド（Method）には「方法」などの意味がありますが、JavaScriptでは「命令」と考えます。
オブジェクト（対象）に「何を」して欲しいのかを示します。

パラメーター

パラメーター（Parameter）は「設定値」などの意味ですが、メソッドに調整を加えていきます。

JavaScriptの書式

オブジェクト．メソッド（パラメーター, パラメーター2, パラメーター2, …）;

JavaScriptのオブジェクトについて詳しくは「JavaScriptのオブジェクトの定義と出力【配列、繰り返し】」にまとめています。

JavaScriptの関数

関数とは、複数の文をまとめて、名前をつけたもの。

関数をつくるメリットは2つです。

メリットその1：プログラムが理解しやすい
メリットその2：関数を何回でも呼び出せる

関数の書き方は、複数あります。

1．他のプログラムでもよく使われる方法
function 関数名( [引数] ){
　処理
}

2．javascriptならではの変数に格納する方法
const 関数名 = function( [引数] ){
　処理
}

3．アロー関数
const 関数名 = ( [引数] ) => {
　処理
}

関数の書き方、記述例、引数、戻り値について「JavaScriptの関数の書き方と使い方【引数と戻り値について】」で解説しています。

JavaScriptのイベント処理の書き方

イベントとはユーザーの動作のタイミングに合わせて、処理を実行させること。

ボタンをクリック
フォームに入力する
マウスカーソルを動かした

イベント実行までの3つの手順は、おおまかに以下のとおり。

関数の定義
HTMLの取得
イベントのセット

JavaScriptのイベント処理の書き方【3つの手順】
querySelector、addEventListenerの使い方
無名関数の使い方、書き方の例文

上記内容について、詳しくは「JavaScriptのイベント処理の書き方【3つの手順／無名関数】」で解説しています。

JavaScriptの真偽値判定とif構文

真偽値は、使える値があらかじめ決まっています。
文字列や数値と違い、以下のどちらかしか使えません。

true：「真」と書き、条件を満たした状態を表します
false：「偽」と書き、条件を満たしてない状態を表します

詳細はトグルボタンの書き方と合わせて、下記で解説しています。
» JavaScriptの真偽値判定とif構文【トグルボタンを作ろう】

以上です。

【JavaScript入門】初心者向けに「基礎文法」を完全まとめ