JavaScriptとは?特徴や基本的な書き方、勉強方法まで徹底解説!

JavaScriptとは?

JavaScriptとは、平たく言うとWebブラウザ上でさまざまな動きを入れることができるプログラミング言語です。ブラウザの中で使われているJavaScriptの処理によって、ポップアップ画面やWebサイト上のアニメーションを動かしたりできます。なお、似た名前の言語にJavaがありますが、まったく別ものです。

HTML・PHPとJavaScriptの違い

HTML・PHPとJavaScriptの違いは何か、説明しましょう。

HTMLは、文字、画像の表示や文章を構成するための言語です。Webサイトの土台のような役割を果たします。HTMLで作成したWebサイトは静的であるのに対し、JavaScriptはWebサイトに動きをつける言語ですので、動的であるという違いがあります。

PHPはJavaScriptと同様、Webサイトに動的な機能をつける言語です。PHPはアクセスした時間帯によってWebサイトの内容を変えることができます。違いは、処理が行われる場所です。PHPはサーバサイド言語と呼ばれ、Webサーバで処理が行われますが、JavaScriptはクライアントサイド言語で、ユーザー側のブラウザで処理が行われます。

JavaScriptの主な機能

JavaScriptの主な機能は、Webサイト上に動きをつけることができることです。たとえば、HTMLコンテンツやHTMLコード、CSSスタイルなどが変更でき、それによってテキストが変わったり、画像に動きをつけたり、文字の大きさや色を変えることができます。また、メッセージボックスの表示やカレンダー、ゲームなどの動的コンテンツを作成できるのも特徴です。

JavaScriptの使用場面

画像のポップアップを表示させる

Webブラウザに表示されているページの上に、別のウインドウを重ねて表示するポップアップは、確認画面を表示したり、Webサイトに掲載されている画像や写真を拡大して表示することなどに使われます。ポップアップは、HTMLとCSSでも可能ですが、JavaScriptを利用するとより簡単に実装できます。
Webブラウザ上に表示されるポップアップ(ポップアップ・ウインドウ)は、広告表示に利用されることが多く、ネガティブな印象もありますが、ユーザーの注意喚起を行ったり、重要なことを告知したり、選択肢を表示するなど、重要な役割があります。JavaScriptを活用すれば、ポップアップの形や表示する場所、表示方法やタイミングなどを工夫することができ、Webサイトの表現が広がります。

マウスの動きに合わせてメニューを表示する

Webサイトを設計・デザインするときに、メニューボタンをどのように表示するかは、サイト全体のUI(ユーザーインターフェース)はもちろん、Webサイトのデザインを左右する重要な要素になります。メニューをすべて、常にWebサイトに表示しておくのでなく、メニューボタンをクリックすると、それまでは非表示になっていたメニューが表示される、いわゆる「アコーディオンメニュー」もJavaScriptを使って実装できます。
アコーディオンメニューは、PCよりもスマートフォンでWebサイトにアクセスする人が多くなっている今、PCに比べると小さくなる表示エリアを有効に活用するための手法です。情報を整理し、ユーザーを望む情報に的確にナビゲーションするために欠かせないものと言えます。

Googleマップを活用する

Googleマップを店舗などの案内に使ったり、アクセス案内などに使うケースが増えています。Googleが提供しているGoogle Maps JavaScript APIを使うと、単にGoogleマップをWebサイトに掲載するだけでなく、ユーザーの使い勝手に合わせてカスタマイズし、例えば、独自のマーカーを地図上に表示したり、ルート検索などが行えるようになります。このGoogle Maps JavaScript APIを使いこなす際には、JavaScriptの知識があれば、より手軽に、高度な活用が可能になります。
なお、Googleマップなどの地図サービスでは、Webサイト全体を更新しなくても、マップ内の情報を更新することができます。これはAjaxという技術ですが、AjaxにはJavaScriptが使われています。

画像を切り替える

Webサイトのトップ画像を次々と切り替えて表示する、いわゆるスライドショーは、ユーザーの興味・関心を引きつけるために使われるテクニックですが、この画像切り替え(スライドショー)にもJavaScriptが使われています。画像をクリックすると次の画像に切り替わる、「<」「>」のような矢印ボタンを押すと画像が切り替わる、一定の時間で自動的に切り替わるなど、さまざまな表現をJavaScriptで簡単に実現することができます。
またECサイトなどでたくさんの商品画像などを表示するときには、前述のGoogleマップの項目で紹介したAjaxを使うと、ページ全体を更新することなく、商品画像だけを次々と表示することができます。ECサイトには、Ajax、つまりJavaScriptは必須の技術となっています。

フォームの記入漏れチェック

Webサイトの申し込みフォームなどに氏名やメールアドレスなどの情報を記入し、送信しようとしたときに、記入モレや記入の不備を指摘された経験はないでしょうか。「生年月日が抜けている」「電話番号が抜けている」など、ユーザーのミスや不注意を指摘してくれる便利な機能ですが、これにもJavaScriptが使われています。
HTMLだけでも入力チェックはある程度可能なのですが、JavaScriptを使うと、エラーメッセージを工夫したり、文字数や文字種(全角、半角、ひらがな、カタカタ、英数字など)などの複雑なチェックも可能になります。

JavaScriptを習得するメリット

JavaScriptを習得すると、さまざまなメリットがあります。

メリット1:比較的簡単に習得できる

JavaScriptは他のプログラミング言語にくらべ、プログラムの構文がシンプルに構成されているのが特徴です。また、基本的な部分は他のプログラミング言語と同じ部分も多いことから、初心者でも比較的簡単に習得できる言語といえます。

また、JavaScriptはブラウザとテキストエディタさえあれば開発可能です。よって、手軽に始められるのもメリットでしょう。

メリット2:仕事の幅が広がる

JavaScriptは、Webページをはじめ、Webアプリ、ゲーム、モバイルアプリなども作成・開発できます。そのため、仕事の幅が広がる可能性大です。

メリット3:将来性のあるスキル

JavaScriptはライブラリやフレームワーク、拡張言語などが次々と登場しており、日々進化を遂げています。今後JavaScriptがますます発展し、生産性が上がっていくことが予想されますので、将来性のあるスキルです。JavaScriptを身につければ、あらゆる企業で活躍が期待できます。

【初心者向け】JavaScriptの書き方

JavaScriptの基礎知識や使用場面、習得するメリットを見てきましたが、ここで初心者向けにJavaScriptの具体的な書き方を紹介します。JavaScriptがどんなものか、より具体的に理解できるはずです。

記述する場所は、2パターン

まず、JavaScriptを記述する場所には、2つのパターンがあります。1つは、HTMLファイルの中に直接書くパターン、もう1つは、HTMLファイルとは別にJavaScriptのファイル(「jsファイル」と呼びます)を作り、HTMLファイルから参照する方法です。
どちらの方法でも、同じ結果=同じ動きになります。慣れないうちは、HTMLファイルに直接書き込む方法がわかりやすくて簡単です。JavaScriptに慣れ、高度な動きを実装できるようになれば、管理や修正の面から、別にjsファイルを作る方法がよいでしょう。特に複数のスタッフで、大規模なWebサイトを開発・運用していく場合には後者がおすすめです。

HTMLファイルに直接書く方法

まず、HTMLファイルを作成します。テキストファイルに、以下のサンプルファイルのように記述してください。ファイル名称は何でもかまいませんが、ファイル名の最後を「.html」とします。

 

<b>サンプルファイル(そのままコピーしてもOKです)。</b>

 

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>Hello World</p>

<script>

alert(“Hello”);

</script>

</body>

</html>

 

このHTMLファイルの中の7行目〜9行目、つまり、

 

<script>

alert(“Hello”);

</script>

 

の部分がJavaScriptを直接書き込んだ部分です。

7行目の<script>と9行目の</script>で挟まれているのが、JavaScriptの命令文。ここでは「alert」、つまりユーザーにメッセージを表示する機能が命令として書き込まれています。その後ろの (“Hello”) は「Hello」という文字を表示するという意味です。””(ダブルクォーテーション)で挟まれた部分にアラートとして表示したい文字列などを書き込みます。

 

このHTMLファイルを保存し、ブラウザで開くと、「Hello」と書かれたポップアップウィンドウが表示されるはずです。

なお、<script>タグの位置には明確な決まりはありません。また文字列を表す「”」(ダブルクォーテーション)」は「’」(シングルクォーテーション」でもOKですが、統一して使うようにします。

jsファイルを作る方法

次に、HTMLファイルとは別にjsファイルを作り、HTMLファイルから参照する方法を紹介します。上記のHTMLファイルを書き換えて作ります。
まず、7行目〜9行目の

<script>
alert(“Hello”);
</script>

を、

<script src=”hello.js”></script>

に書き換えます。これはhello.jsというJavaScriptのファイルを参照して、実行するという命令文です。
次に、HTMLファイルとは別にjsファイルとして、hello.jsを作成します。HTMLファイルを作ったときと同じように、テキストファイルに以下のように書き込みます。

alert(‘Hello World!’);

ファイル名をhello.jsとして保存します。ファイル名を間違えると、HTMLファイルが参照できなくなるので、注意してください。

HTMLファイルとjsファイルが用意できたら、HTMLファイルをブラウザで開きます。先ほどと同じポップアップウィンドウが表示されるはずです。

JavaScriptの勉強方法

JavaScriptの勉強方法は、さまざまなタイプがあります。目標設定をもうけて、自分自身に合った勉強方法を選ぶと効率よく勉強を進めることができます。それをふまえて、JavaScriptの勉強方法を見ていきましょう。

勉強方法1:本で学ぶ

勉強方法の1つ目は、本で学ぶ方法です。

本を読み、まずはJavaScriptとはなにか、プログラミングの基本などを理解します。その後、本に掲載されているコードを実際に書き写してみましょう。コードを書くうちに、コードの意味や仕組み、順番、法則などを徐々に理解できるようになります。

また、本は1冊だけでなく複数の本を読むと、理解が進みます。

参考となる本を選ぶときには、以下のポイントをおえるとよいでしょう。
・自分のレベルに合った本を選ぶ
・図説が多く、見てわかりやすい、専門用語がやさしく書かれている
・出版日が新しい本(最新情報が盛り込まれいてるため)
・コードのサンプルが多い本

この方法であれば、安価で学習できることがメリットです。本を読んだあとに、学習サイトに移行し、学習を続けるとよいでしょう。

勉強方法2:学習サイトを活用する

今やWeb上には、JavaScriptの学習サイトがたくさんあります。上手に活用することで、JavaScriptの習得に役立つでしょう。

学習サイトには、ステップアップ方式でJavaScriptを学べるものから、ゲーム感覚でプログラミングを学習できるもの、短い動画で学べるもの、無料、有料など、さまざま。そこで、以下のポイントをふまえて学習サイトを選んでみてください。

・自分のレベルを明確にしてくれるサイト
・自分に合った学習内容
・解説が丁寧で、実際の動作が確認できる動画などがある
・環境構築なしでコーディングできる

学習サイトではコーディングの練習などもでき、大変便利ですが、習得できるのはJavaScriptの基礎的な部分だけです。学習サイトで学んだあとは、実際にコードを使って自分で何かを作ってみましょう。

勉強方法3:スクールに通う

本や学習サイトは独学するのに役立ちますが、うまく学べない、挫折してしまう、独学では限界を感じる、などの可能性も高いです。独学に自信がない方は、プログラミングスクールに通ったり、オンラインレッスンを受けることをおすすめします。

プログラミングスクールやオンラインレッスンであれば、わからないことをすぐに聞けますし、丁寧に教えてもらえます。

スクール代は、およそ3ヶ月で20〜40万円が相場です。費用はかかりますが、その分充実した授業を受けることができます。

利用価値の高い言語・JavaScriptを習得しよう

JavaScriptはWebサイトだけでなく、さまざまなものを開発ができ、利用価値の高い言語です。習得すれば、仕事の幅が広がり、キャリアアップにもつながります。この記事をきっかけに、JavaScriptの習得をめざしましょう。

求人詳細ページへのリンク

仕事カタログページへのリンク

関連コラム

JavaScriptとは?特徴や基本的な書き方、勉強方法まで徹底解説!のページです。ITエンジニア・移動体通信エンジニア(技術者)の派遣求人ならブレーンゲート。株式会社ブレーンネットはシステムエンジニアやネットワークエンジニア、プログラマーの派遣・転職をサポートいたします。