JavaScriptとは?初心者向けにわかりやすく解説!

    • このページをはてなブックマークに追加

    公開日:2018年06月10日 最終更新日:2021年08月16日

    JavaScript」とは、動的なWebページを作成する事のできるプログラミング言語です。通常はブラウザー上で実行されます。JavaScriptを使うと、ユーザーのアクションに応じたコンテンツの表示の他、ブラウザー上で表示される地図やグラフィックアニメーションなども表示する事ができます。

    目次

    1. JavaScriptの基本

    1.1. JavaScriptの歴史

    JavaScriptは開発当初、Webサイトに動きをつけるプログラミング言語です。1995年、Brendan Eich(https://brendaneich.com/) がNetscape社のエンジニアの頃に開発された言語です。

    1996年の初めにNetscape2.0でリリースされました。現在では、「IE」や「Google Crome」、「Firefox」など様々なブラウザーにJavaScriptのエンジンが組み込まれています。

    ●『JavaScript』と『Java』の関係は?
    「JavaScript」は開発当初「LiveScript」と呼ばれていましたが、その当時人気のあったプログラミング言語の「Java」にあやかって「JavaScript」という名前に変更されました。「JavaScript」と「Java」にいくつかの共通点はありますが、まったく別の言語です。

    1.2. ブラウザーが翻訳する3つの言語

    インターネットもしくはローカルPCでWebページを開いた時、ブラウザーは以下3つの言語(※1)を翻訳して、ページを表示させます。

    ※1 Web技術で用いられる言語は3つだけでなく、サーバーサイドで動くプログラミング言語などもありますが、主にクライアントPC側のブラウザーで実行される言語を確認してみましょう。

    HTML・・単なるテキストや画像からなるページに「見出し」や「段落」といった構造と意味を持たせる言語です。

    CSS・・HTMLに「文字や背景の色」や「余白」といったレイアウトやデザインを設定するための言語です。

    JavaScript・・「メッセージボックスの表示」や「HTMLコンテンツの操作」、「カレンダー」、「地図」、「ゲーム」など、様々な動的コンテンツを作成できる言語です。

    「JavaScript」は「HTML」や「CSS」が翻訳された後で実行されます。

    ▲ページトップへ戻る

    2. JavaScriptでできること

    「JavaScript」を使ってできる事は多岐にわたっています。開発当初のJavaScriptはクライアントサイドで実行され動的Webページを作成していましたが、現在ではサーバーサイドで動作する「Node.js」の他、Adobe Acrobat、Yahoo! ウィジェットエンジン、組み込みコンピューターなど様々な所で使われています。

    本コラムでは、最も多く活用されている動的WebページでJavaScriptがどのように使われているかを見ていきましょう。JavaScriptのコードの詳細は後程学習するとして、まずはJavaScriptでどのような事ができるかサンプルで確認して下さい。

    2.1. HTMLコンテンツの変更

    JavaScriptを使うとWebページで表示するHTMLコンテンツを変更する事ができます。サンプルのボタンをクリックすると表示されているテキストが変わります。

    [JavaScriptのサンプル]

    ボタンをクリックするとテキストが変わります。

    ▲ページトップへ戻る

    2.2. HTMLコードの変更

    JavaScriptでHTMLコードそのものを変更する事ができます。

    例えば、画像を指定する「img」タグの「src属性」の値を変更すると画像に動きをつける事ができます。

    <img src="imageName.jpg">

    [JavaScriptのサンプル]

    ボタンをクリックすると花の色が変わります。

    ▲ページトップへ戻る

    2.3. CSSスタイルの変更

    CSSで指定する、文字の大きさや色なども変更する事ができます。ボタンをクリックするとテキストの色が変わります。

    [JavaScriptのサンプル]

    JavaScriptでHTML要素のスタイルを変更する事ができます。

    ▲ページトップへ戻る

    2.4. HTMLコンテンツを表示・非表示にする

    JavaScriptを使ってHTMLコンテンツを表示したり、非表示にしてみます。

    [JavaScriptのサンプル]

    JavaScriptでHTMLコンテンツを表示・非表示にする事ができます。

    ▲ページトップへ戻る

    3. JavaScriptの文法を学習する前に覚える事

    「JavaScript」の学習をすすめる上で、必要最低限覚えてほしいJavaScriptのルールについて少し説明しましょう。JavaScriptプログラムの基本中の基本ですが、プログラム初心者が陥りやすいコードの記述ミスでもあるのでしっかりと確認しておいて下さい。

    3.1. 半角英数字、大文字・小文字

    ●半角英数字・記号

    「JavaScript」のコードを記述する際には半角英数字と中カッコ「{ }」小カッコ「( )」など一部の記号を使います。
    また変数名や関数名を定義する場合には、同じく半角英数字に加えて、アンダーバー「 _ 」やドルマーク「$」などの記号を使う事が可能です。但し、「1文字目に数字を使う事」や"boolean"、"TRUE"などJavaScriptの「予約語を使う事」はできません。

    ●大文字・小文字の区別

    「JavaScript」は大文字・小文字を区別します。例えば、警告メッセージを表示する「alert」メソッド

    alert("Hello!!");

    Alert("Hello!!");

    と記述するとエラーになります。

    ▲ページトップへ戻る

    3.2. 改行を入れる時の注意事項

    「Jascript」のソースコードが長くなる時に改行を入れる場合、適切な場所で改行を入れないとエラーになる場合があります。

    通常JavaScriptを記述する場合、単語やカッコなどの区切りで改行を入れても問題なく実行されます。

    alert
    ("Hello, world!");

    ↑ 実行可能!

    しかし、単語を途中で改行したり、文字列の途中で改行を入れるとエラーになりますので、コードを改行する際には気をつけましょう。

    alert("Hello,
    world!");

    ↑ 実行時エラー

    ▲ページトップへ戻る

    3.3. セミコロン

    JavaScriptでは、処理の最後にセミコロン「;」をつけます。1つの命令を1行で記述する場合には、セミコロンはいらないのですが、バグの原因にもなりますので「セミコロン」をつける事を習慣づけておいた方がよいでしょう。

    var str1 = "Hello!"
    alert(str1)

    ↑ どちらも実行可能 ↓

    var str1 = "Hello!";
    alert(str1);

    ▲ページトップへ戻る

    4. Javasciptの開発環境

    開発環境を整えるのが面倒な言語もありますが、「JavaScript」の開発環境はとてもシンプルです。準備するのは

    ブラウザー

    テキストエディター

    のみでOKです。テキストファイルにコード記述したら結果をブラウザーですぐに確認できるので、プログラム初心者でも気軽に学習する事ができます。

    ▲ページトップへ戻る

    関連記事:JavaScriptのalertメソッドでアラートダイアログを作成しよう!

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Java】開発エンジニア|業務アプリケーションの開発 NEW

    年収 :300万円〜

    業務アプリケーション、Webアプリケーションの設計・開発~運用・保守までをご対応いただきます。 <...

    ヴィップシステム株式会社

    正社員

    【JavaScript】データアナリスト|クライアントのマーケティング支援 NEW

    年収 :300万円〜

    自社DXプラットフォームや自社のコンサルナレッジを活用してデータを集計し、ユーザーの行動を解析・予...

    トライベック株式会社

    正社員

    【PHP】WEBエンジニア|アパレルサイトの開発 NEW

    年収 :350万円〜

    アパレル、食品ECサイトなどの開発

    株式会社LOWCAL

    フリーランス

    【Ruby on Rails/JavaScript】フルスタックエンジニア★不動産テックサービスの開発 NEW

    同社は、中古マンションを簡単に購入・売却ができるスマホアプリを運営スタートし、AIや機械学習を用い...