初心者のためのJavaScript入門｜Javaとの違い4つと使い方7つ
JavaScriptが開発された経緯
「JavaScript」は、もとはNetscapeNavigatorというブラウザで動作していたプログラムで、当初はLiveScriptという名称でした。
後に、Javaという開発言語を開発したSun MicrosystemsとNetscapeが業務提携したことで、プログラミング言語の名称も「JavaScript」と改められました。
JavaScriptは現在、主要なブラウザのいずれでも動作する言語として高い人気を誇っています。
JavaScript入門・Javaとの違い編4つ
JavaScriptとJavaはどちらも「Java」が名称に入っておりますので、言語の特徴や違いを覚えきれずに混乱している人も少なくないでしょう。
「Java」という名称が共通していることから、どちらかがどちらかから派生した言語なのだろうと勘違いしている人も多く見られますが、それも違います。
ここでは、JavaScriptとJavaの言語的な違いを4つの面から確認していきましょう。
JavaScript入門1：実行ファイル環境
JavaScriptとJabaでは実行ファイルの環境が異なります。
JavaScriptはスクリプト言語ですので、コンパイルは不要です。
一方、Javaはコンパイルにより実行ファイルを生成しなければなりません。Javaはサーバーで動作するプログラムですので、実行ファイルをサーバーで動作させます。
また、JavaScriptは基本的にWebページで動作しますので、ブラウザ上で動作確認をできますが、サーバー上で動かしたい場合は設定が必要となります。
JavaScript入門2：変数の処理 動的作業
JavaScriptでは変数を動的に扱いますが、Javaでは静的な扱いになります。
動的変数と静的変数の概念は理解するのが難しい内容ですが、簡単に説明すると「時と場合によって変化するのが動的変数」であり、「いつ使っても同じ状態の変数」が静的変数です。
JavaScriptでは、1つ目の質問の内容に応じて2つ目の選択肢を変更できます。Webサイトの住所設定画面をイメージすると理解しやすいでしょう。
JavaScript入門3：コードの特徴
Javaはオブジェクト指向のプログラム言語ですので、コードの再利用が可能ですが、JavaScriptはスクリプト言語ですので、処理全てをコード化しなければなりません。
JavaScriptは初心者でも理解しやすく難易度の低い言語ですが、実装のコード行数は多めになります。
Javaは構造や仕組みを理解する必要がある技術者向けの言語ですが、コードの再利用が可能なので効率的なプログラミングが可能です。
JavaScript入門4：ハードディスクへの書き込みの可否
JavaとJavaScriptではハードディスクへの書き込みの可否が異なります。
Javaはサーバーで動作するプログラムですので、情報をハードディスクに書き込めます。
一方、JavaScriptはWebブラウザ上の動きを制御するプログラムですので、基本的にハードディスクへの直接書き込み処理は行われません。
JavaScriptで実装するのは、Web画面上の動作制御と覚えておきましょう。ハードディスクへの書き込み処理は、画面とは分離された処理になります。
JavaScript入門・JavaScriptでできること編7つ
JavaScriptはWeb画面の動作制御に使われるプログラミング言語ですが、具体的にどのような制御が可能なのでしょうか。
ここでは、Web画面でよく見かける「JavaScriptを使って実現されている」機能を7つ紹介します。
今後、ここでご紹介する機能を見かけたときは、JavaScriptで実装されていることを意識してみてください。
JavaScript入門1：画像のスライド演出
多くのWebページで見かける、画像をスライドのように一定時間で切り替える動作はJavaScriptの入門編として実装が可能です。
よく見かける機能ということは、需要の多い機能といえます。多くの需要がある機能は、ゼロから実装しなくてもすでにライブラリに用意されています。
そのため、利用する画像を用意しておけば、jQueryというJavaScriptのライブラリを使って実現できます。
JavaScript入門2：Google マップを組み込み
Googleマップが組み込まれているWebサイトを閲覧することも多いのではないでしょうか。
WebサイトへのGoogleマップ組み込みもJavaScriptの入門編として実装可能です。
Googleマップの組み込みには、「Google Maps JavaScript API」を利用します。「Google Maps JavaScript API」は所定の手続きにより入手できます。
JavaScript入門3：マウスの動きによるメニューの表示演出
Webサイトで、メニューの上にマウスポインタを合わせると詳細メニューが表示されるという動きもJavaScriptで実装されています。
今や当たり前のように使われている機能ですが、JavaScriptの入門編として作成可能です。
ライブラリ化されていませんが、10数行のコーディングで実現できる機能なので、JavaScriptの入門者の練習プログラムにも適しています。
JavaScript入門4：AJAX・COMET技術が使える
AJAXとは、「Asynchronous JavaScript + XML」の略称であり、名称にもあるJavaScript技術が使われています。
COMETはクライアント側からのリクエストがなくても、クライアントにサーバーで発生したイベントを返せる技術です。AJAXと組み合わせることで、サーバー側のステータスが変わったら各クライアントに状態を送信する「行先表示板」のような仕組みを実装できます。
JavaScript入門5：画像のポップアップ演出
Webサイトの広告画像や商品画像にマウスポインタが合うと、画像がポップアップするという動作も日常的に見かけますが、この動作もJavaScriptで実装されています。
画像のポップアップ動作は、jQueryというJavaScriptのライブラリに用意されているので、JavaScript入門段階の方でもサンプルコードを参考にして、簡単に実装できます。
JavaScript入門6：アクセス分析サービスを埋め込める
管理するWebサイトにいつどのくらいアクセスがあったのかを分析し、Webサイトの運用検討に活かして、サイトを改良していく努力が必要です。
Webサイトへのアクセス情報を分析するために、Googleアクセス分析サービスが提供されており、サイトへの組み込みはJavaScriptを使って実装します。
JavaScriptを使ってトラッキングコードを埋め込むだけなので、入門段階の実装者でも対応できます。
JavaScript入門7：記入漏れチェックできる
アンケートや申請を送信するWebサイトでは、必須入力項目のチェックが必要になります。
JavaScriptを使えば、サーバーへ情報を送信する前に画面上の項目チェックが行えます。
記入漏れチェックの実装は、JavaScriptの入門編として実装することの多い機能です。そのため、記入漏れチェックを実装することで、JavaScript実装の基礎を学べます。
JavaScript入門・使い方編7つ
JavaScriptを使って実装できる機能を学んだら、いよいよ実装に取り組んでみましょう。JavaScriptは初心者が実装する入門編のプログラムとして、Webサイトでよく見かける機能を実装できます。
ここでは、JavaScriptを使ってプログラミングするにあたってのポイントを7つ紹介します。
JavaScript入門1：長整数リテラルを記述するポイント
長整数とは、数値型として扱えない大きな数値を扱うためのデータ型です。長整数リテラルでは、数値の最後に「n」を記述します。
例えば、799という数値を変数（num_data）にセットする場合は、「let num_data = 799n;」と記述することになります。
長整数リテラルは、10進数だけでなく、16進数、8進数、2進数も扱えます。10進数と同様に末尾に「n」を記述してください。
JavaScript入門2：数値リテラルを記述するポイント
JavaScriptでは数値として、整数と浮動小数点の数値を扱うことができ、いずれも10進数だけでなく、16進数、8進数、2進数も扱えます。
数値の扱いは、そのままの数値を記述して構いません。JavaScript入門者にとって扱いやすい値といえます。
変数（dt）に「1.23」をセットする場合は、「let dt = 1.23;」と記述します。16進数の「0xB6」は、「let dt = 0xB6;」と記述します。
JavaScript入門3：文字列リテラルを記述するポイント
JavaScriptで文字列を扱う際は、「’（シングルクォーテーション）」か「”（ダブルクォーテーション）」で文字列を囲みます。
JavaScriptの環境によっては「‘（バッククォーテーション）」で囲むことも可能です。
文字列の中に「’」や「”」が含まれる場合は、異なる方で文字列全体を囲みます。例えば「Eri’s notebook」を扱う場合は、「”Eri’s notebook”」と記述します。
JavaScript入門4：配列を作成するポイント
JavaScriptで配列を使用する際は、「[配列要素1,配列要素2,…]」という形式を使います。
配列要素として記述する値は、数値ならそのまま、文字列なら「’」か「”」で囲む必要があります。
例えば、「名前、年齢、性別」といった個人の情報を配列の変数（person）に設定する場合は、以下のように記述します。
person = [“Suzuki”,32,”男”];
JavaScript入門5：関数を定義する方法や使い方
JavaScriptでは、コードを記述して関数を定義することも可能です。
同じ処理を繰り返し使うことが予定される場合は、毎回同じ処理記述をするのではなく、関数化しておいて、必要に応じて関数を呼び出して使います。
関数定義の方法は複数ありますが、入門編としては「function 関数名｛｝」の形式を覚えておきましょう。「関数名」には、処理内容を推測できる名称をつけます。{}内に処理コードを記述します。
JavaScript入門6：変数の宣言方法
JavaScriptで変数を宣言する方法は3つありますが、変数のタイプによって使い分ける必要はなく、変数の使い方によって使い分けます。
変数の宣言には、[var」「let」「const」を使います。「const」を使って変数宣言する場合は値の設定が必須で、この値をプログラム中で変更することはできません。
つまり、「const」で宣言した変数は、実質的には定数の扱いになります。
JavaScript入門7：オブジェクトの作成方法
JavaScriptでオブジェクトを定義するときは、「{プロパティ名1:値1, プロパティ名2:値, …}」という形式で記述します。
プロパティ名と値の間を「：（コロン）」で区切り、異なるプロパティとの間は「,（カンマ）」で区切って複数設定が可能です。
プロパティ名と値は、文字列なら「’」または「”」で囲み、数値ならそのまま記述できます。
JavaScriptの学習方法3つ
JavaSCriptを使ってプログラミングしたいと思い立ったら、どのような方法でJavaScriptを学んだらよいのでしょうか。
JavaScriptはインタプリタ言語で、開発環境を用意するのも容易なため、初心者が独学で学ぶことも可能ですが、基礎からじっくりと固めたい方は、スクールを探してみるとよいでしょう。
ここでは、JavaScriptの学習方法について3つ紹介します。
JavaScriptの学習方法1：スクールに通う場合
スクールに通って入門講座で学べばJavaScriptだけでなく、JavaScriptと一緒に使うことの多いHTMLやCSSなども一緒に教えてもらえます。
特に入門者の場合は、分からないことにぶつかることが多いですので、質問できる人がいるのは心強いでしょう。
スクールを選ぶ際には、JavaScriptだけでなく、関連する言語やフレームワーク、ライブラリについても学ぶことができるかもチェックしておきましょう。
JavaScriptの学習方法2：学習サイトで学ぶ場合
学習サイトには無料のサイトもあり、多くのサイトにおいて動画で学ぶことができます。
スクールに比べると学習スケジュールに余裕を持て、書籍を参考にする独学よりも学習管理はしやすくなります。
無料サイトは、まず試しに使ってみるという利用の仕方でもよいでしょう。また、有料サイトについては、口コミ評価やコメントなどを参考にして、入門者が理解しやすいサイト選定をしましょう。
JavaScriptの学習方法3：書籍を使う場合
JavaScriptは、独学でもまったく歯が立たないということはなく、書籍を読んで理解したり、プログラミングしたりすることは十分可能です。
JavaScriptの習得に、急迫したような時間的制限がない場合は、市販書籍の入門編を購入して、独学で取り組んでみるのもよいでしょう。
市販書籍のレベルは入門編から高度なものまで多種多様ですので、イラストや丁寧な説明がされているかを目安に選ぶようにしましょう。
JavaScript入門を学ぼう
JavaScriptは、プログラミング言語の中では難しい部類ではなく、入門レベルでも「使える機能」を実装できます。
Webサイトの動きやプログラミングそのものに興味がある方は、JavaScriptのプログラミングに挑戦してみましょう。
学びの場も、スクールや学習サイト、書籍などで提供されていますので、自分のライフスタイルに合わせて学んでいくことが可能です。
