【JavaScript開発に必須】ツールや開発環境をご紹介！

2023 3/26

2023年3月6日 2023年3月26日

この記事のランク
読む時間	4分
重要度

JavaScriptは動的なWebページが作れるプログラミング言語で、ユーザーの操作に応じてポップアップの表示や、データベースから欲しい情報を取得するなどサーバーサイドで利用されています。

HTMLやCSSで構築されたWebサイトに組み込んで使うこともあれば、IoTやスマホアプリの開発にも使われている人気のあるプログラミング言語です。

Pythonソフトウェア財団である「PyPl」の2022年1月の調査では、Google検索される割合がプログラミング言語全体で、Python 28.34%、Java 16.93%に続いて、JavaScript 9.28%と第3位となっています。

JavaScriptはスクリプト言語といってコンパイルというコンピュータが処理するために機械語に変換する作業が不要で、ソースコードを記述してファイルを保存したら直ぐに動かすことができます。

JavaScriptの開発環境は、大きく「オフライン環境」と「オンライン環境」があります。

ななころ

Twitter(@nana_korobi04)でも情報発信していますので、
フォローいただけると嬉しいです！

オフライン環境を利用する

オフライン環境で必要なものは、テキストエディタとWebブラウザのみです。

OS標準のテキストエディタを使っても良いのですが、お馴染みのVisual Studio Code（通称VSCode）を利用するのがオススメです。

なぜなら、Web開発の現場ではJavaScriptを単体で動かすよりもHTMLから呼び出す方法が圧倒的に多く、開発中にファイルの数が増えてしまい、メモ帳だと管理が煩雑になるためです。

Webブラウザの方はGoogleChromeを利用します。

理由は世界で最も利用されているWebブラウザがGoogleChromeのため、特に拘りがなければシェアの高い製品を使うのが無難です。

HTMLファイルを作成する
JSファイルを作成する
WebブラウザからHTMLを読み込む

HTMLファイルを作成する

HTMLファイルを作成する

STEP

HTMLファイルの作成

VSCodeから「新規ファイル」を選び、任意のファイル名でHTMLファイルを作成します。

STEP

HTMLのコーディング

HTMLファイルの中身は以下の通り記述しておきましょう。

JavaScriptファイルのパスは任意で構いません。

<script type=”text/javascript” src=”JavaScriptファイルのパス”></script>

JSファイルを作成する

JSファイルとは、JavaScriptファイルのことで、HTMLの中に埋め込んで記述することもできますが、HTMLファイルとJSファイルは分離させましょう。

例えば、複数のHTMLファイルからJSファイルを呼び出している場合、分離していればJSファイルは1ファイルだけ対応すれば済みますが、それぞれのHTMLの中にJavaScriptのコードを記述していると全てに手を加えなくてはならず、メンテナンスが大変だからです。

今回は環境準備がメインですので、JSファイルの中身は、ログを表示する以下のサンプルコードを記述します。

console.log(‘Hello’);

WebブラウザからHTMLを読み込む

WebブラウザからHTMLを読み込む

STEP

HTMLを開く

HTMLファイルをクリックして、Google Chromeで開きましょう。

STEP

表示を確認

HTMLからJSファイルが呼び出されて、Webブラウザに「Hello」の文字が表示されているはずです。これでJavaScriptのオフラインの開発環境と実行ができるようになりましたね。

オンライン環境を利用する

オンライン環境で最も簡単にJavaScriptを開発するには、Webブラウザのみを使います。

簡単なコードの確認であれば、VSCodeを使わずにGoogleChromeのデベロッパーツールで直接コードを記述して実行することができるのです。

デベロッパーツールの使い方

STEP

デベロッパーツールの起動

デベロッパーツールは、GoogleChromeを起動し、右クリック>メニューから「検証」を選択するか、「Ctrl+Shift+I」のショートカットキーでも起動することができます。

（MacOSの場合は、「Cmd+Opt+I」で起動できます）

STEP

コンソール画面の表示

メニューが開いたらJavaScriptのコードを入力するためのコンソール画面に移動します。

デベロッパーツールの画面上部にある「Console」のタブを選択すると、コンソール画面が表示され、コードを書くことができます。

また、複数行コードを記述してから実行したい時は、「Shift」＋「Enter」キーを押すと改行ができます。

STEP

コードの実行

コンソール画面では「Enter」キーを押すとコードが実行されます。

デベロッパーツールは直ぐにブラウザに反映されて動きが見えるので、デザインの確認やコードの検証をするなど、簡単な動作確認として利用されることが多いです。