JavaScriptの基本構文

JavaScriptは、ウェブ開発の世界で広く利用されている強力なプログラミング言語です。

その柔軟性と使いやすさから、初心者から経験豊富な開発者まで多くの人々に愛されています。

JavaScriptの基礎構文を理解することは、効果的なコーディングの第一歩です。

本記事では、JavaScriptの基本的な構文について詳しく解説し、初めて学ぶ人でもわかりやすいように丁寧に説明していきます。

変数の宣言方法やデータ型、条件文やループ構文など、知っておくべき重要な要素を網羅し、具体的なコード例を交えながら解説していきます。

これから一緒にJavaScriptの基礎を学び、実際に使える知識を身につけていきましょう。

タップできる目次

JavaScriptはどこに書くのか
セミコロンの役割
コメント
use strict とは？
まとめ

JavaScriptはどこに書くのか

JavaScriptのコードは、ウェブページのHTMLドキュメント内に書くことができます。

1. インラインJavaScript

最もシンプルな方法は、HTML要素の属性として直接JavaScriptを記述するインラインスクリプトです。

例えば、ボタンをクリックしたときに特定の動作をさせたい場合、以下のように記述します。

<!DOCTYPE html>
<html>
<head>
  <title>インラインJavaScriptの例</title>
</head>
<body>
  <button onclick="alert('ボタンがクリックされました！')">クリックしてね</button>
</body>
</html>

2. 内部JavaScript

内部スクリプトは、HTMLドキュメント内の<script>タグにJavaScriptを記述する方法です。

この方法では、JavaScriptコードがHTMLコードと同じファイル内に含まれるため、管理が容易です。

<!DOCTYPE html>
<html>
<head>
  <title>内部JavaScriptの例</title>
  <script>
    function showMessage() {
      alert('ボタンがクリックされました！');
    }
  </script>
</head>
<body>
  <button onclick="showMessage()">クリックしてね</button>
</body>
</html>

3. 外部JavaScript

外部スクリプトは、JavaScriptコードを別のファイルに分けて記述し、そのファイルをHTMLドキュメント内で読み込む方法です。

この方法は、コードの再利用性が高く、複数のHTMLページで同じJavaScriptファイルを使用することができます。

function showMessage() {
  alert('ボタンがクリックされました！'); 
}

<!DOCTYPE html>
<html>
<head>
  <title>外部JavaScriptの例</title>
  <script src="script.js"></script>
</head>
<body>
  <button onclick="showMessage()">クリックしてね</button>
</body>
</html>

実務では、特に大規模なプロジェクトや複数のページに渡るウェブサイトの開発において、外部JavaScriptの方法がよく使用されます。

外部ファイルを使用することで、コードの管理が容易になり、メンテナンス性が向上します。

また、同じJavaScriptファイルを複数のページで共有することができるため、一貫性のある動作を保証できます。

さらに、キャッシュの利点を活用することで、ページの読み込み速度を向上させることも可能です。

セミコロンの役割

JavaScript（JS）では、セミコロン（;）が文の終わりを示すために使用されます。

これは、言語の構文を明確にし、複数の文が適切に区切られるようにするためです。

セミコロンの役割については以下の通りです。

文の終わりを示す

JavaScriptでは、各文の終わりにセミコロンを付けることで、その文が終了したことを示します。

これは、複数の文を1行に書く場合にも有効です。

let x = 10;
let y = 20;
console.log(x + y); // 30

省略可能

JavaScriptは「自動セミコロン挿入（ASI）」という機能を持っており、特定の状況ではセミコロンを省略できます。

たとえば、改行やブロックの終わりなどがある場合です。

let x = 10
let y = 20
console.log(x + y) // 30

エラーを防ぐ

セミコロンを省略すると、意図しないエラーが発生する可能性があります。

特に、複雑な構文や長いコードでは、セミコロンを適切に使用することでエラーを回避できます。

return // 自動的にセミコロンが挿入される
{
  name: "John"
};
// 実際には undefined を返す

セミコロンは、コードの可読性や保守性を向上させる重要な役割を果たします。

特に、エラーを防ぎ、意図した通りにコードが実行されるようにするために有効です。

コメントは、コード内に書かれたプログラマのメモや説明であり、コードの動作を説明したり、後でコードを見直す際の手助けとなります。

コメントはコードの実行には影響しないため、自由に書き込むことができます。

シングルラインコメントは、1行で記述するコメントです。// の後にコメントを書きます。

特定の行やステートメントに関する簡単な説明を付けるのに便利です。

/// これはシングルラインコメントです
let x = 10; // 変数xに10を代入します

マルチラインコメントは、複数行にわたるコメントを記述するために使用します。

/* で始まり */ で終わります。

長い説明やコードブロックの解説に適しています。

/*
これはマルチラインコメントです。
複数行にわたる説明を書くことができます。
例えば、関数の説明や注意書きなどです。
*/
function sum(a, b) {
  return a + b; // aとbを足し合わせる
}

コマンドのショートカットキー

windows:ctrl + / または ctrl + shift + /
Mac:cmd + / または cmd + shift + /

use strict とは？

JavaScriptには「strict mode」と呼ばれる実行モードがあります。

このモードは、名前の通り、厳格な実行環境を提供し、安全でない古い構文や機能の一部を無効にします。

"use strict"という文字列をスクリプトや関数の先頭に記述することで、そのスコープ内のコードを厳格モードで実行できます。

さらに、"use strict"がモジュールの実行コンテキストでデフォルトとなるため、モジュール内では自動的に厳格モードが適用されます。

これにより、よりセキュアで最適化されたコードを書くことが奨励されます。

厳格モードの利用は、特に大規模なプロジェクトやチーム開発において、コードの一貫性と信頼性を高めるために推奨されます。

メリット

use strict の使用にはいくつかの重要なメリットがあります。

エラーチェックの強化

厳格モードでは、JavaScriptの潜在的なエラーを早期に検出します。

これにより、コーディングミスを防ぎ、デバッグが容易になります。

たとえば、未宣言の変数の使用や、読み取り専用プロパティへの値の代入などがエラーとして報告されます。

セキュリティの向上

厳格モードでは、JavaScriptの脆弱な部分を無効にするため、セキュリティが向上します。

不正な操作や予期しない動作を防ぐことで、アプリケーションの安全性が高まります。

最適化の助け

JavaScriptエンジンは、厳格モードのコードをより効率的に最適化できます。

これにより、パフォーマンスの向上が期待でき、アプリケーションのレスポンスが改善されます。

意図しないグローバル変数の防止

厳格モードでは、暗黙的なグローバル変数の作成が禁止されます。

これにより、変数のスコープが明確になり、予期せぬ副作用を防ぎます。

シンプルで読みやすいコードの促進

古く安全でない構文や機能が禁止されるため、コードがシンプルで読みやすくなります。

これにより、コードの保守性が向上し、チームでの開発がスムーズに進みます。

デメリット

use strictには多くのメリットがありますが、デメリットもいくつか存在します。

互換性の問題

厳格モードは一部の古いブラウザや既存のコードベースと互換性がない場合があります。

既存のコードにuse strictを追加することで、エラーが発生する可能性があります。

柔軟性の制限

厳格モードでは、古い構文や危険とされる機能が禁止されるため、特定のプログラミング手法やトリックが使用できなくなります。

これにより、ある程度の柔軟性が失われることがあります。

レガシーコードの改修が必要

既存のレガシーコードを厳格モードに適応させるためには、コードの見直しや修正が必要です。

大規模なプロジェクトでは、この作業が大変になることがあります。

予期しないエラー

厳格モードを有効にすることで、これまで正常に動作していたコードがエラーを投げる可能性があります。

これは、開発者が意図しない動作を引き起こすことがあるため、導入時には注意が必要です。

使い方

use strict は、スクリプトや関数の先頭に記述して使用します。以下にいくつかの例を示します。

// スクリプト全体で使用する場合
"use strict";

function myFunction() {
  // 厳格モードが有効
}

// 関数内で使用する場合
function myFunction() {
  "use strict";
  // この関数内だけ厳格モードが有効
}

主な効果

暗黙的なグローバル変数の禁止: 未定義の変数に値を代入すると、通常モードでは暗黙的にグローバル変数が作成されますが、厳格モードではエラーになります。
削除できないプロパティの削除禁止: delete 演算子で削除できないプロパティを削除しようとするとエラーになります。
重複するプロパティの禁止: オブジェクトリテラルで重複するプロパティを定義するとエラーになります。
セキュアな eval: eval 関数によって生成される変数や関数が、実行コンテキストの外に漏れないようにします。
this の変数へのバインド: 関数内での this の値が undefined またはグローバルオブジェクトにバインドされることを防ぎます。

strict modeを使用するべきか

use strict の使用は、コードの安全性と可読性を向上させるために推奨されます。

その理由としては、クラスやモジュールでは自動的にuse strictを有効にしているからです。

特に新しいプロジェクトやコードを書き直す場合には、厳格モードを導入することで、より健全なコーディング習慣を身につけることができます。

ただし、既存の大規模なコードベースに導入する際には、慎重な検討とテストが必要です。

まとめ

JavaScriptの基本構文は、プログラミングの基礎を理解するために欠かせない重要な要素です。

まずは書き方を学ぶことで、JavaScriptに触れることができます。