-
JavaScriptとは?初心者向けにわかりやすく解説!
公開日:2018年06月10日 最終更新日:2019年09月26日
「JavaScript」とは、動的なWebページを作成する事のできるプログラミング言語です。通常はブラウザー上で実行されます。JavaScriptを使うと、ユーザーのアクションに応じたコンテンツの表示の他、ブラウザー上で表示される地図やグラフィックアニメーションなども表示する事ができます。
目次
1.1. JavaScriptの歴史
1.2. ブラウザーが翻訳する3つの言語
2.1. HTMLコンテンツの変更
2.2. HTMLコードの変更
2.3. CSSスタイルの変更
2.4. HTMLコンテンツを表示・非表示にする
3. 3. 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のスキルが活かせる最新求人情報をチェック!
おすすめ記事
-
JavaScriptで日付を計算する方法
JavaScriptで日付を計算する方法
JavaScriptのDateオブジェクトを使って、日付や時刻を計算する方法について解説します。「getYear()メソ...
-
JavaScriptの配列要素の値を追加/削除する方法
JavaScriptの配列要素の値を追加/削除する方法
JavaScriptの配列要素の値を追加/削除する方法についてサンプルコードを用いて解説します。配列オブジェ...
-
JavaScript案件に必要なスキル、経験、今後の動向
JavaScript案件に必要なスキル、経験、今後の動向
Webサイト開発、特にフロントエンド開発において、必要不可欠となってきているプログラミング言語がJava...
-
-
ピックアップ
フリーランス
【JavaScript/Ruby】フルスタックエンジニア★サブスク型動画配信プラットフォームの開発
同社はメディア事業や動画事業、アプリビジネスなど多方面で事業を展開しています。 今回は、フルスタ...
正社員
【Java】システムエンジニア|Webサービスの設計・開発
年収 :350万円〜550万円
【仕事内容】 システムエンジニアとしてWebサービス系、業務系アプリケーションの要件定義、設計、開発...
株式会社日本ビジネス開発
フリーランス
【PHP】サーバーサイドエンジニア★オウンドメディアの構築
月額単価 :50万円〜60万円
PHPを用いたオウンドメディア構築支援のサーバーサイド開発を担当して頂きます。 複数案件が並行して...