「JavaScript」とは、動的なWebページを作成する事のできるプログラミング言語です。通常はブラウザー上で実行されます。JavaScriptを使うと、ユーザーのアクションに応じたコンテンツの表示の他、Webブラウザー上で表示される地図やグラフィックアニメーションなども表示する事ができます。
|
フルスタックエンジニア |
|
フルリモート |
|
Webアプリケーションの設計／開発／運用経験 他 |
|
|
サーバーサイドエンジニア |
|
|
フルリモート |
|
|
Ruby on Railsを用いた開発経験3年以上 他 |
あなたに合う案件をプロが探し、案件参画から、稼働中のお悩みまで全サポート致します。
まずは気軽にご連絡ください。
1. JavaScriptの基本
1.1 JavaScriptの歴史
JavaScript は Web サイトに動きをつけるプログラミング言語として、当時 Netscape 社のエンジニアだった Brendan Eich（https://brendaneich.com/）によって開発されました。そして1996年に、Netscape2.0というWebブラウザーの機能としてリリースされました。
現在では、「IE」や「Google Crome」、「Firefox」など、様々なブラウザーにJavaScriptのエンジンが組み込まれています。
•『JavaScript』と『Java』の関係は？
「JavaScript」は開発当初「LiveScript」と呼ばれていましたが、その当時人気のあったプログラミング言語の「Java」にあやかって「JavaScript」という名前に変更されました。「JavaScript」と「Java」にはいくつかの共通点はありますが、まったく別の言語です。
1.2 ブラウザーが翻訳する3つの言語
Webページを開いた時、ブラウザーは主に次の3つの言語を翻訳してページを表示します。
• HTML：単なるテキストや画像からなるページに、「見出し」や「段落」といった、構造と意味を持たせるための言語です。マークアップ言語と呼ばれています。
• CSS：HTMLと組み合わせて使用し、「文字や背景の色」や「余白」といった、レイアウトやデザインを設定するための言語です。スタイルシート言語と呼ばれています。
• JavaScript：「メッセージボックスの表示」や「HTMLコンテンツの操作」、「カレンダー」、「地図」、「ゲーム」など、様々な動的コンテンツを作成できる言語です。スクリプト言語と呼ばれています。
「JavaScript」は、「HTML」や「CSS」が翻訳された後で実行されます。
2. JavaScriptでできること
「JavaScript」を使ってできることは、多岐にわたります。開発当初のJavaScriptはクライアントサイドで実行され動的Webページを作成するものでしたが、現在ではサーバーサイドで動作する「Node.js」も登場しています。他にもAdobe Acrobat、Yahoo! ウィジェットエンジン、組み込みコンピューターなど、JavaScriptは様々な所で使われています。
本コラムでは、最も多く活用されている動的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コンテンツを表示・非表示にする事ができます。
▶ IT未経験のエンジニア転職エージェントおすすめ30選【2023年6月】－お仕事応援ドットコム
3. 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行で記述する場合には、セミコロンはいらないのですが、バグの原因にもなりますので「セミコロン」をつける事を習慣づけておいた方がよいでしょう。
const str1 = "Hello!" alert(str1)
↑
どちらも実行可能
↓
const str1 = "Hello!"; alert(str1);
4. Javasciptの開発環境
「JavaScript」の開発環境は、とてもシンプルです。準備するのは
「ブラウザー」
と
「テキストエディター」
のみでOKです。テキストファイルにコードを記述したら、すぐに結果をブラウザー上で確認できるので、プログラム初心者でも気軽に学習する事ができます。
当サイトプロエンジニアのコンサルタントが厳選したおすすめのフリーランス案件特集はこちら
特集ページから案件への応募も可能です！
実際にフリーランスエンジニアとして活躍されている方のインタビューはこちら
