JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの基本をわかりやすく解説！変数・スコープ・書き方の基礎知識

JavaScriptは、動的なWebページを作成するために欠かせないプログラミング言語です。この記事では、JavaScriptの基本的な概要から、変数やスコープの概念、そして実際のコードの書き方まで、初心者の方にもわかりやすく解説していきます。

JavaScriptとはどのような言語か

JavaScriptは、動的なコンピュータプログラミング言語の一つです。軽量であることが特徴で、主にWebページの一部として利用されています。クライアントサイド（ユーザーのブラウザ側）で動作するスクリプトにより、ユーザーとの対話的なやり取りを実現し、動的なページを生成することができます。

また、JavaScriptはインタプリタ型（通訳方式）のプログラミング言語でありながら、オブジェクト指向の機能も備えている点が大きな特徴です。事前にコンパイルする必要がなく、コードをそのまま実行できるため、手軽に開発を始められる言語といえます。

変数（Variables）とは

他の多くのプログラミング言語と同様に、JavaScriptにも「変数」があります。変数とは、名前の付いたデータの入れ物（コンテナ）と考えることができます。入れ物の中にデータを格納しておけば、後からその名前を指定するだけで、簡単にデータを参照・利用することができます。

変数のスコープ（Scope）

変数の「スコープ」とは、その変数がプログラム内で有効となる範囲のことです。JavaScriptの変数には、次の2種類のスコープしか存在しません。

  • グローバル変数（Global Variables） − グローバルなスコープを持つ変数です。JavaScriptコード内のどこからでも定義・参照できるため、プログラム全体で共有したいデータに適しています。
  • ローカル変数（Local Variables） − 定義された関数の中でのみ表示（参照）される変数です。関数の引数（パラメータ）も、常にその関数に対してローカルなものとして扱われます。

JavaScriptの記述方法とscriptタグ

JavaScriptは、<script>...</script>タグの中にステートメント（文）を記述することで実装できます。

<script>タグは、Webページ内のどこにでも配置することが可能ですが、一般的には<head>タグの中に記述しておくことが推奨されています。これにより、ページの読み込み時にスクリプトが確実に準備された状態になります。

サンプルコード：Hello Worldを表示してみよう

ここで、「Hello World」という文字列を出力するシンプルな例を見てみましょう。以下のコードでは、JavaScriptコードをHTMLコメントで囲んでいます。これは、JavaScriptに対応していない古いブラウザがコードを誤ってテキストとして表示してしまうのを防ぐための、オプション的な配慮です。

コメントの終わりには「//-->」という記述があります。「//」はJavaScriptにおけるコメント記号を意味するため、ブラウザがHTMLコメントの終了部分をJavaScriptのコードとして誤って解釈しないようにする役割があります。

続いて、document.writeという関数を呼び出しています。この関数は、文字列をHTMLドキュメントへ出力するためのもので、テキストだけではなく、HTMLタグやその両方を出力することも可能です。

<html>
   <body>
      <script>
         <!--
            document.write("Hello World!")
         //-->
      </script>
   </body>
</html>

このコードをブラウザで実行すると、画面に「Hello World!」という文字列が表示されます。まずはこのような簡単な例から試して、JavaScriptの基本を少しずつ身につけていくことをおすすめします。

  1. JavaScriptの関数式（Function Expression）とは？特徴と使い方を解説

    JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。 関数式の主な特徴 関数を変数に格納し、変数名を指定して呼び出せる 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる この「ホイスティングされない」という点が重

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2