JavaScriptとは?基本的な書き方や勉強方法〜入門〜

公開日:

JavaScript(ジャバスクリプト)とは、Webサイトやシステムの開発に使われているプログラミング言語のこと。私たちが普段使っているスマホやパソコンで見るサイトの多くは、JavaScriptが使われて作られています。今回は、JavaScriptは具体的にどのような言語なのか、JavaScriptを使うとできること、基本的な記述方法、学習方法まで解説します。

JavaScriptとは

JavaScriptとはブラウザを「動かす」ためのプログラム言語のこと。例えば、Webサイトを訪問したとき、ポップアップ画面やカルーセルのように、Webサイト上でアニメーションが動いているのを見たことがあるのではないでしょうか?あのようなブラウザが「動く」ために、指示を出しているプログラミング言語がJavaScriptなのです。また最近ではサーバーサイド、スマホアプリ、デスクトップアプリでも使われています。

JavaScriptの特徴、強み

JavaScriptの最大の特徴は、その高い汎用性。過去にはブラウザを動かすための言語はたくさんありましたが、現在主流となっているのは、このJavaScriptです。

JavaScriptはHTMLやCSSなど、他のプログラミング言語と組み合わせて使うことで、ブラウザ上でアニメーションを動作させることができますが、近年は、Node.js(ノードジェイエス)という、ブラウザ側だけでなくサーバー側でも動くJavaScriptも普及してきました。
また、JavaScript言語を使うための開発環境も充実してきました。iOSとAndroidアプリの両OSに対応したアプリが開発可能なクロスプラットフォーム開発環境であるAppcelerator(アップセラレーター)やMonaca(モナカ)、React Native(リアクトネイティブ)、Electron(エレクトロン)が登場。スマホアプリからデスクトップアプリまで、JavaScriptを使って開発できるようになりました。

Javaとの違いは?

さて、名前が似ているプログラミング言語に「Java(ジャバ)」という言語があります。
Javaは、JVM(Java Visual Machineの略)という仮想マシンの上で動くプログラミング言語のこと。Webサービス、システム開発、業務システムなどに利用されています。
Javaは、どのようなOSを使っていても、JVMが入っていなければ動作しません。また、実際に動かす際にはコンパイル(プログラミング言語をコンピュータが理解できる言語に変換すること)が必要です。

一方、JavaScriptは仮想マシンを使う必要はありません。また、コンパイルも基本的に不要です(現在主流になりつつある開発手法では一部コンパイルが必要になる場合もあります)。

つまり、ハードウエアに依存しないプログラムとして開発されたJavaと比較すると、JavaScriptは手軽に開発できることを重視して開発された言語といえます。

JavaScriptはネットスケープコミュニケーションズという企業で開発され、当初はLiveScriptという名称でした。当時世界的に人気が上昇していたJava(サン・マイクロシステムズが開発)と提携していたこともあり、のちに名称をJavaScriptに変更しました。このような言語が開発された背景から、2つの言語の名前は似ているのです。

その後、マイクロソフトのInternet Explorer3.0に搭載されるようになりJavaScriptは爆発的に普及するようになりました。

JavaScriptを使うのはどんなとき?

JavaScriptは、HTML、CSS、JavaScriptを使って、ユーザーが見る部分(フロントエンド)をプログラムします。HTMLはページ構造を記述、CSSはページの装飾を記述、JavaScriptはページの動的な処理を記述します。

JavaScriptで可能なWeb上の処理例

また、JavaScriptが使われて開発されたサービスには次のようなものがあります。

JavaScriptが使われているWebサイトやサービス例

このように、JavaScriptは、WebサイトやWebサービス開発に使われ、その中でも、よりユーザーに近い部分(ユーザーが閲覧や操作をする場面)を開発するときに使われます。よって、システムエンジニアやフロントエンドエンジニアが使用することが多いでしょう。

Webアプリの開発もJavaScriptで

アプリには、iOSやAndroidスマホにインストールして使うネイティブアプリと、スマホにダウンロードする必要がなくブラウザにアクセスするだけで使えるWebアプリがあります。
JavaScriptを使えば、Ruby(ルビー)やPython(パイソン)というほかのプログラム言語と併せて使うことで、Webブラウザ上で動作する各種アプリサービスを開発できます。

JavaScriptの基本的な書き方

それでは、具体的にJavaScriptの基本的な書き方をみてみましょう。
JavaScriptで記述する際には、HTMLファイルの中に書く方法と、HTMLファイルとは別のjsファイルを作って、HTMLに参照させるという方法があります。どちらの方法でも動きますが、最初はHTMLファイルの中に書き込む方法がおすすめです。

まず、HTMLファイルを作成します。デスクトップの分かりやすい場所に、テキストドキュメントを作ってください。デスクトップ画面で、右クリックをするとメニューが表示されるので、新規作成を選択、テキストドキュメントを選択してください。ファイル名は、仮にhelloとしておきます。

次に、テキストドキュメント内にHTMLファイルにコードを書き込んでいきましょう。

次ようなのコードを記述します。そのままコピーしても大丈夫です。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p>Hello World</p>
        <script>
             alert("Hello");
        </script>
    </body>
</html>

何が書かれているのかを詳しくみてみると、

<script>
    alert("Hello");
</script>

というところがJavaScriptの部分です(そのほかの部分はHTMLの知識の範囲になるので省略します)。

<script>と</script>でJavaScriptの命令を挟むというのが書き方の基本です。""(ダブルクォーテーション)で挟まれた"Hello"の部分はプログラムではなく、文字列を表しています。

では、作成したファイルをHTML形式にして保存しましょう。名前をつけて保存をクリックし、ファイル形式を「テキストファイル」から、「すべてのファイル」にします。ファイル名の後ろに.htmlをつけて完成です。

デスクトップに戻り、右クリックで開きます。ブラウザを選択し、ファイルを開いてみましょう。

このようなポップアップが表示されればOKです。一番簡単なJavaScriptを使ったHTMLファイルができました。

次に、HTMLファイルとjsファイルを分けて作る方法をご紹介します。
最初に作ったhello.htmlをメモ帳などで開いてください。

<script>
    alert("Hello");
</script>

の部分を、

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

に書き換えます。

このコードは、JavaScriptの部分をhello.jsというファイルを呼び出して実行するという意味です。

では、先ほどと同じ場所(デスクトップ)に、hello.jsを作成します。HTMLファイルを作成したのと同じ要領で、右クリック、新規作成、新しいテキストドキュメントを作成します。

alert('Hello World!');

と記述し、ファイル名をhello.jsとして保存します。

それでは、hello.htmlを先ほどと同じようにブラウザから開きましょう。

このようにポップアップが表示されればOKです。

JavaScriptの習得方法

JavaScriptはプログラミング言語の中でも比較的学習しやすいといわれています。開発環境を整える必要がなく、手軽に開発することが可能です。また、簡単なファイルであれば、メモ帳などのテキストエディタとブラウザで実行できます。

習得におすすめの学習ツール

初心者向けの学習ツール

Progate

イラスト中心のスライドで学ぶことができます。入門書が難しくて読む気にならない、長いコードは難しそうと感じてる人におすすめです。ブラウザ上でコードを入力、実行でき、スマホやタブレットでも学習を進めることが可能です。通勤時間のちょっとした時間を見つけて学習するのに最適です。
Progateの詳細はこちら

CODEPREP

ブックと呼ばれる単位のレッスンを学習していきます。ブック1冊あたり10分という短い時間で学習できることが特徴です。穴埋め問題を解いていくところから始まり、最終的には自分でコードを書けるようになります。分からないところがあれば、ディスカッションボードで質問することもできます。勉強仲間がいると、モチベーションが上がります。
CODEPREPの詳細はこちら

中級者向けの学習ツール

code.9leap.net

ブラウザだけで開発を進めることができるツールです。HTML5 ベースのエディタ CodeMirrorが入っています。自分が作ったものを試しにブラウザ上で実行してみるという使い方もできますし、他の人が作ったコードをダウンロードすることも可能です。enchant.jsを使ったゲームプログラミングを、チュートリアルつきで学べるサイトでもあります。見本のコードを自分なりに変更して、オリジナルのゲームアプリ制作ができます。
code.9leap.netの詳細はこちら

MDN

中級から上級者向けのリファレンスです。JavaScriptを記述するときに、仕様の記述の参考や逆引き辞書として活用できます。
MDNの詳細はこちら

JavaScriptを学習して、活躍できるエンジニアに

JavaScriptを学べば、Webサイト構築のフロントエンドエンジニアとして開発に携わることができます。具体的には、企画設計されたWebサービスのデザインやサービス仕様を、実際にブラウザで表示させたり動作させたりすることを任されるようになるでしょう。

今回は、JavaScriptを使うとできることや記述方法、学習方法についてご紹介しました。JavaScriptは、WebサイトからWebアプリまで幅広く使われているプログラム言語。簡単なコードの記述から始めて、設計仕様やサービス内容で求められる動作を実現できるエンジニアを目指しましょう。

Modisで探す、エンジニアの仕事

IT・エンジニア派遣に特化したModisでは、スキルを活かせる求人・未経験からOKの求人を多数ご紹介しています。