PR

【JavaScript入門】基本文法/基礎文法を5分で

JavaScript

JavaScriptを１から学習する方向けに、コーディング時の基本となるJavaScriptのルール・お約束ごと・基本文法を１から網羅的に解説します。

JavaScript基本ルール
  • JavaScriptでは：大文字と小文字が明確に区別される
  • JavaScriptでは：空白（ブランク）と改行は無視される
  • JavaScriptでは：文の区切り（終わり）には「；（セミコロン）」
  • JavaScriptでは：「//」or「/* */」でコメントを記入できる
  • JavaScriptでは：予約語と同じ命名は不可

↑の内容を理解すれば、もしあなたが他のプログラミング言語を習得済みであれば、リファレンスを見ながら１からJavaScriptで開発することができるようになるはず。このページでは初心者でも理解できるよう、１つ１つサンプルを載せながらご説明します。

その他、コーディングをするうえで基本となるお約束ごとや前提知識も併せて解説しておりますので、是非最後までご覧下さい。

スポンサーリンク

【前提】文と式とブロック

まず初めにJavaScriptを学習する前提として、JavaScriptにおける「文（Statement）」と「式（Expression）」の違いについて詳しく解説いたします。これらはプログラミングの基本概念であり、初心者にとって重要な知識です。

JavaScript：文（Statement）とは？

  • 定義:
    • 文はJavaScriptに実行するべき指示を与えるコードの単位。
    • 一連のアクションを実行するための命令とみなすことができる。
  • 特徴:
    • 通常、セミコロン（;）で終了します。
    • 変数宣言、ループ、条件分岐、関数宣言などが文の例です。
    • 文は値を返さないため、他の文や式の中で使うことはできません。
  • 例:
    • var x = 5; - 変数宣言文
    • if (x > 3) { console.log(x); } - 条件文
    • for (var i = 0; i < 5; i++) { console.log(i); } - ループ文

ザックリいえば「文」はJavaScriptの処理の最小単位です。処理を実行する1ステップが１つの「文」だと理解すればOK。

人間に例えれば「歩く」とか、走る」とかですね。JavaScriptでは、この最小の処理単位を「文」と呼びます。（勉強するにつれて、その辺の内容は理解できるようになるので今は「へぇ～」と理解いただければOKです。）JavaScriptでは、この最小単位「文」が集まって複雑な処理を行うことができます。

後述するように文は、最後に「；（セミコロン）」を付けて区別します。

JavaScript：式（Expression）とは？

  • 定義:
    • 式は、値を生成し、他の式の一部として組み合わせることができるコードの単位。
    • １つまたは複数の値、変数、演算子の組み合わせ。
  • 特徴:
    • 式は値を返す。
    • 数値、文字列、論理演算、算術演算などが式の例。
    • 式は他の式や文の一部として使うことができる。
  • 例:
    • 3 + 4 - 算術式
    • x * y - 変数を使った式
    • myFunction() - 関数呼び出し式

式は「1+1」や「10*10」などのことです。文の一部（例えば変数に入れる値など）に含まれます。

ポイント　文と式の違い

  • 主な違い:
    • 文は何かを「する」ためのコード。値を返さない。
    • 式は何かを「評価」し、値を返す。
  • 相互関係:
    • 一部の文は内部に式を含むことができます（例: var x = 3 + 4; では 3 + 4 が式）。
    • 式は文の中で値を返すために使用されますが、文自体が値を返すわけではありません。
// 文（Statement）の例
var x = 5; // これは変数宣言文です。値を返しません。

if (x > 3) {
    console.log('xは3より大きい'); // これも文です。条件に基づいて実行されます。
}

// 式（Expression）の例
var y = x * 2; // これは変数宣言文ですが、'x * 2'は式です。

console.log(y); // この文の中で、yは式として評価されます。

function double(z) {
    return z * 2; // ここでの 'z * 2' は式です。値を返します。
}

var result = double(x); // double(x)は関数呼び出し式です。値を返し、その値がresultに代入されます。

console.log(result); // この文の中で、resultは式として評価されます。
  • このサンプルでは、var x = 5; や if (x > 3) {...} のような部分が「文」の例です。これらは単にJavaScriptに実行するべき命令を与えていますが、値を返すことはありません。
  • 対照的に、x * 2 や double(x) のような部分は「式」の例です。これらは値を生成し、その値を他のコードの一部として使用できます。

JavaScript：ブロック（Block）とは？

ブロックは複数の「文」を１まとめにしたものです。

「{　　}」で囲まれた範囲がブロックとなります。

{
  var x = 1;
  var y = 1;
  var z = x + y;
  console.log(z);
}

ブロックについては、JavaScriptの学習を進めていく段階で理解できればOK。初めてJavaScriptを触るうちは、ある程度の理解で問題ありません（文をまとめたものなんだな！という理解で良いです）。

一応、以下にブロックの基本を整理しておきます。

ポイント　ブロック（Block）の定義

  • ブロックは、波括弧 {} で囲まれたコードの集まり。
  • 複数の文（Statements）をまとめて、単一の単位として扱う。

ブロックの特徴と使用方法

  1. スコープの作成:
    • ブロックは独自のスコープ（Scope）を作成する。
    • let と const で宣言された変数は、そのブロック内でのみ有効（ブロックスコープ）。
  2. 制御構造内での使用:
    • ループ（for, while など）や条件文（if, else, switch など）の内部でよく使用される。
    • これにより、複数の文を単一の制御構造の中で実行できる。
  3. コードの整理:
    • ブロックを使用することで、コードを整理し、可読性を高めることができる。
    • 関連するコードを１つのブロックにまとめることで、コードの構造が明確になる。
if (true) {
    // この部分はブロック内
    let x = 5;  // この変数xはブロック内でのみ有効
    console.log(x);  // 出力: 5
}

// ここでは変数xは参照できない（ブロックスコープ外）
// console.log(x);  // これはエラーになります

for (let i = 0; i < 3; i++) {
    // この部分もブロック
    console.log(i);  // 出力: 0, 1, 2
}

// 変数iもブロックの外では参照不可
// console.log(i);  // これもエラーになります

ここまでがコーディングを行う上で超・前提となるJavaScriptの基本構造（文と式とブロック）です。

ここから本格的にJavaScriptをコーディングするうえで基本となる文法ルールを１つ１つ見ていきましょう！

基本文法１：大文字と小文字が明確に区別される

JavaScriptは、大文字と小文字を区別する言語です。つまり同じ文字でも大文字と小文字では異なる文字として扱われます。このルールは変数名、関数名、キーワード、オブジェクトのプロパティなど、すべての識別子に適用されます。

var test;　//"t"が小文字
var TesT;  //"T"が大文字

大文字と小文字の区別を誤ると、意図しないバグの原因となるため要注意。たとえば意図した変数にアクセスできない、または未定義の変数を参照してしまう・・・など。

一般的な慣習として、変数や関数名にはキャメルケース（例: myVariableName）の使用が推奨されます。定数にはアッパーケース（例: MAX_VALUE）を使用することが多いです。

Q
キャメルケースとは・・・？
A

プログラミングにおいて変数名や関数名を命名する際の一般的な方法です。この命名規則の特徴は以下の通りです。

  1. 形式
    • 複数の単語が連結されているが、空白や区切り文字（アンダースコア _ やハイフン -）を使用せず、単語の境界を大文字で示す。
  2. 種類:
    • ローワーキャメルケース（Lower Camel Case）: 最初の単語は小文字で始め、続く各単語の初文字を大文字にします。例：myVariableName。
    • アッパーキャメルケース（Upper Camel Case）: 各単語の初文字を大文字にします。このスタイルはしばしばパスカルケース（PascalCase）とも呼ばれます。例：MyClassName。
  3. 使用例:
    • JavaScriptでは、変数や関数名にローワーキャメルケースを使用するのが一般的です。例：calculateTotal。
    • クラス名やコンストラクタにはアッパーキャメルケースを使用するのが一般的です。例：ProductList。
  4. 目的:
    • コードの可読性を向上させるために使用されます。キャメルケースによって、複数の単語から成る識別子が読みやすくなります。

基本文法２：空白（ブランク）と改行は無視される

JavaScriptでは、ブランクや改行は基本的に無視されます。コードの見やすさに応じて、自由に改行したりインデントをそろえたりしてOK。

以下２つのコードはJavaScriptでは同一のコードであるとみなされます。

function repeatText(s,num) {
	var t,n;
	t = "";
	for (n=0;n<num;n++) {
		t += s;
	}
	return t;
}
function repeatText(s,num) {var t,n; t = "";
	for (n=0;n<num;n++) {t += s;}
	return t;}

ポイント　空白と改行の使用例

  1. インデント（字下げ）:
    • コードブロックや制御構造（例えば if 文、for ループ）を視覚的に区別するためにインデントを使用します。
if (condition) {
    // この部分はインデントされています
    doSomething();
}
  1. 行の分割:
    • 長いコード行は、読みやすさのために複数の行に分割されることがあります。
let result = someFunction(parameter1, parameter2,
                         parameter3, parameter4);
  1. 空白の挿入:
    • 演算子とオペランドの間に空白を入れることで、コードの可読性を向上させます。
let sum = a + b; // '+' の前後に空白があります

基本文法３：文の終わりには「；（セミコロン）」

JavaScriptでは、一般的に文（statement）の終わりにセミコロン（;）を置きます。これにより、JavaScriptエンジンは文の終わりを明確に認識できます。

var x = 5;  // 変数宣言の後にセミコロン

x = x + 1;  // 式の評価の後にセミコロン

console.log(x);  // 関数呼び出しの後にセミコロン

JavaScriptには「自動セミコロン挿入（ASI）」という機能があり、セミコロンを省略した場合でもほとんどの場合、JavaScriptエンジンが自動的にセミコロンを挿入してくれます。ただし、常に期待通りに動作するわけではないためそこだけ注意が必要。

いずれにせよ、文の終わりには必ずセミコロンを置くことは忘れずに。。。

基本文法４：「//」or「/* */」でコメント

JavaScriptでコメントを記述したい場合は「//」or「/* */」を使います。コメントはコードの可読性を高めるために非常に重要で、コードの一部を説明したり、一時的に実行を停止したりするのに使用されます。

  1. 一行コメント
    • // を使って、その後の行の残りの部分をコメントアウトします。
    • このタイプのコメントは、短い説明やメモに適しています。
// これは一行コメントです
var x = 5;  // 変数xの宣言に一行コメントを付けています
  1. 複数行コメント:
    • /* で始まり */ で終わるコメントは、複数行にわたるコメントアウトに使用されます。
    • 長い説明文や、複数行のコードを一時的に無効化するのに便利です。
/*
   これは複数行コメントです。
   このコメントは複数の行にわたります。
*/
var y = 10;  // 通常の一行コメント

コメントの入れ子はNG
/*
      /* コメントをネストさせる */
*/

コメントのネストはNGです。ネストさせた場合、構文エラーとなります。

ポイント　コメントの使用目的

  1. コードの説明:
    • コードの特定の部分が何をしているのか、なぜそのように書かれているのかを説明するために使用されます。
  2. デバッグ:
    • コードの特定の部分を一時的に無効化してデバッグする際に役立ちます。
  3. リマインダーやTODO:
    • 未来の自分自身や他の開発者に向けたメモとして使用されることがあります（例：// TODO: この関数を最適化する）。
  4. ドキュメントの目的:
    • コードのドキュメントとして、関数やクラスの使用方法を説明するためにも使用されます。

コードを見ればその内容がわかるような場合は、過度にコメントを記述する必要はありません。コメントはコードの意図を明確にするためにのみ使用すべきなので、一定のルールに沿って記述するようにしましょう。

基本文法５：予約語と同じ命名は不可

予約語とは、JavaScriptの言語自体によって特別な意味を持つ単語のこと。これらの単語を変数名、関数名、クラス名などの識別子として使用することはできません。

予約語の定義

  • 予約語（Reserved Words）
    • JavaScriptにおいて、あらかじめ定義された特別な意味を持つ単語のこと。
    • これらの単語は、文法的な構造を形成したり、特定の操作を指示したりするために使われる。

予約語の例

  • 基本的な予約語:
    • if, else, while, for, break, continue などの制御構造に関する単語。
    • function, return, var, let, const などの宣言に関する単語。
  • 拡張された予約語:
    • JavaScriptの新しいバージョン（特にES6以降）では、class, export, import などの追加の予約語が含まれます。

まとめ　JavaScriptの基本文法/基礎文法

JavaScript基本ルール
  • JavaScriptでは：大文字と小文字が明確に区別される
  • JavaScriptでは：空白（ブランク）と改行は無視される
  • JavaScriptでは：文の区切り（終わり）には「；（セミコロン）」
  • JavaScriptでは：「//」or「/* */」でコメントを記入できる
  • JavaScriptでは：予約語と同じ命名は不可
// 大文字と小文字の区別
var myVariable = 10;  // 'myVariable' は小文字で始まる
var MyVariable = 20;  // 'MyVariable' は大文字で始まる
console.log(myVariable);  // 出力: 10
console.log(MyVariable);  // 出力: 20
// 上記の二つの変数は、大文字と小文字が異なるため、別々の変数として扱われます。

// 空白（ブランク）と改行は無視される
var      x     = 5;      // 多くの空白
var y = 10;  // 通常の空白
console.log(x + y);  // 出力: 15
// 上記の例では、空白の量が異なっても、無視されます。

// 文の区切りにセミコロン
var a = 3; var b = 4; var sum = a + b;  // 複数の文を一行に書くことができます。
console.log(sum);  // 出力: 7

// コメントの使用
// これは一行コメントです
/* これは
   複数行
   コメントです */
console.log('Hello, world!');  // 出力: Hello, world!

// 予約語と同じ命名は不可
// var if = 5;  // これはエラーになります。'if' は予約語です。
var validName = 5;  // これは有効な命名です。
console.log(validName);  // 出力: 5

スキルアップを手軽に！
話題のサブスク型プログラミングスクールをご紹介。

SAMURAI TERAKOYAblank
月額2,980円から始める－入会金不要/途中解約自由。無料体験プランからスタート可能！​
飲み会1回分以下の料金で継続的なスキルアップを。

Freeks(フリークス)
blank月額10,780円でJavaScript、Pythonなどのカリキュラムが学び放題。
質問し放題＆転職サポート制度あり。

ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】（最大240,000円）

このWebサイトは現役のエンジニアが以下３点を目的として運営しています。

  1. 勉強：一度理解した内容を忘れないように。
    →　アウトプットは「最強のインプット」である！ 
  2. 備忘：忘れたとしても後から見返せるように。
    →　未来の自分への「お手紙」を書いています。 
  3. 共有：〇〇ってこうだったんだ！の感動をシェアできるように。
    →　あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
JavaScriptWEBデザイン
Web開発プログラミング
シェアする
ビズドットオンラインをフォローする
ビズドットオンライン
タイトルとURLをコピーしました