JavaScriptの開発環境【2018年版】

    • このページをはてなブックマークに追加

    公開日:2018年06月20日 最終更新日:2019年09月26日

    JavaScriptの開発は、「テキストエディター」と「ブラウザー」があれば可能です。統合開発環境のインストールといった面倒な手間をかけることなくJavaScriptの実行を手軽に確認する事ができるので、初心者におすすめのプログラミング言語です。プログラミング初心者は、まず「エディター」と「ブラウザー」を使ったJavaScriptの実行を試してみる事をおすすめします。 少し慣れてきたら、オンラインエディターのようなサービスを利用したり、Eclipseのような統合開発環境の構築をしたりするのも良いでしょう。本コラムではおすすめの「エディター」と「ブラウザー」、それから「ブラウザーのデベロッパーツール」、「オンラインテキストエディター」のご紹介をします。

    目次

    1. JavaScriptの実行環境に必要なもの

    1.1. エディターとブラウザー

    JavaScript」の開発に最低限必要なツールは「テキストエディター」と「ブラウザー」です。JavaScriptのソースコードをテキストエディターで記述して、ブラウザーで動作確認をします。他のプログラミング言語に比べると簡単に開発環境を準備する事ができます。

    ●エディターとブラウザー

    ▲ページトップへ戻る

    1.2. その他の開発ツール

    「テキストエディター」と「ブラウザー」だけでなく、「オンライン(ブラウザー上)のテキストエディター」や「統合開発環境(IDE)」といったツールを使って開発を行う事も可能です。また、「Google Chrome」や「Firefox」などのブラウザーにはプログラムを実行したり、ソースコードのデバッグ機能のついたデベロッパーツールが備わっています。次の章以降で詳しく見ていきましょう。

    ▲ページトップへ戻る

    2. 初心者におすすめのエディター

    2.1. Windows編

    Windows」には、標準で「メモ帳」というテキストエディターがインストールされていますが、HTMLやプログラミング言語を記述するのに便利な無料の「テキストエディター」がありますので、是非使ってみて下さい。以下の関連記事では、シンプルで定番の「TeraPad」、多機能の「サクラエディタ」他無料でインストールできるテキストエディターを紹介しています。

    関連記事:「初心者におすすめ】テキストエディター15選!

    ▲ページトップへ戻る

    2.2. Mac/Linux編

    「Mac OS」に標準で搭載されている「テキストエディット」はとても使い勝手の良いエディターですが、標準の設定だとリッチテキストで表示されるため、標準テキストで編集する設定にすると、HTML、CSSやJavaScriptなどのコードを記述するツールとして使えます。その他にも無料でインストールできる。「CotEditor」を使ってもよいでしょう。

    また、「Brackets」や「Atom」、「Visual Studio Code」は、マルチプラットフォーム対応のテキストエディターで、Windowsだけでなく「Mac OS」や「Linux」にもインストールする事ができます。

    ▲ページトップへ戻る

    3. ブラウザーのデベロッパーツールを使ってみよう!

    ブラウザーの機能は、Webサイトを閲覧するだけではありません。デベロッパーツールを使って、Webサイトの「HTML」や「CSS」などのソースコードを表示したり、「JavaScript」などのプログラム解析をしたりする事ができます。早速簡単なJavaScriptのコードを記述して、ブラウザーで確認してみましょう。今回は、「Google Chrome」の開発ツールでJavaScriptの「alert」メソッドを記述し実行してみます。

    3.1. 「Google Chrome」のコンソール

    「Chrome」ブラウザーの右側にある「Google Chrome の設定」から[その他のツール(L)]→[デベロッパーツール(D)]を選択します。

    ●デベロッパーツール

    ブラウザー内にデベロッパーツールの「コンソール(cosole)」が表示されます。

    ●デベロッパーツール

    コンソール」のコマンドプロンプトである大なり記号「>」に続いて、

    alert("Hello World!");

    と入力してエンターキー(Enter)を押して下さい。

    ●コンソール

    「Chrome」ブラウザー上には「Hello World!」と書かれたメッセージボックスが表示されます。

    ●Hello World!

    ▲ページトップへ戻る

    3.2. 「Mozilla Firefox」のコンソール

    次に、「Firefox」のデベロッパーツールを見てみましょう。「Chrome」と同じようにコンソールでJavaScriptを実行してみます。

    「Firefox」ブラウザーの右上にある「メニューアイコン」から[ウェブ開発]→[ウェブコンソール]を選択して下さい。

    ●ウェブコンソール

    ブラウザー内にデベロッパーツールの「ウェブコンソール」が表示されます。

    ●ウェブコンソール

    ブラウザー下部にある「コンソールのコマンドプロンプトの記号「>>」に続き、

    alert("Hello World!");

    と入力してエンターキー(Enter)を押して下さい。

    ●コンソール

    「Firefox」ブラウザー上に「Hello World!」と書かれたメッセージボックスが表示されましたでしょうか?

    ●Hello World!

    ▲ページトップへ戻る

    4. オンラインエディターでJavaScriptを実行してみよう!

    オンラインでJavaScriptを実行できるWebサービスもちょこっとした開発には便利です。ブラウザー上で、「HTML」、「CSS」、「JavaScript」の記述とプレビューができるので場所を選ばず作業を行うことができます。

    4.1. JSFiddle

    JSFiddleは、HTML、CSS、JavaScriptをWeb上で実行できるオンラインエディターで、「mootools」や「jQuery」などメジャーなライブラリもプルダウンメニューから指定するだけで利用できます。

    JSFiddle公式サイト(https://jsfiddle.net/)

    ▲ページトップへ戻る

    4.2. PLAYCODE

    PLAYCODEは、HTML、CSS、JavaScriptコードの動作テストだけでなく、通常のWebサイトとして公開できるオンランエディターです。シンタックスハイライトやコードエラーチェック機能などが搭載されています。シンプルですが、使い勝手のよいサービスです。

    PLAYCODE公式サイト(https://playcode.io/)

    ▲ページトップへ戻る

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    年収350万円〜600万円
    勤務地 東京都 港区
    月額単価40万円〜
    勤務地 東京都 港区
    月額単価80万円〜100万円
    勤務地 東京都 千代田区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【PHP】フロントエンドエンジニア|Webサイトのデザイン・コーディング NEW

    年収 :350万円〜600万円

    様々な業種や規模の企業を担当していただき、Webサイトの デザインとコーディングを行っていただきます...

    株式会社ミスターフュージョン

    フリーランス

    【JavaScript】フロントエンドエンジニア★大手テレビ局の動画配信サイトの開発

    月額単価 :40万円〜

    【業務内容】 大手テレビ局の動画配信サイトのフロントエンドの改修、新規開発を担当していただきます...

    フリーランス

    【HTML/CSS/Photoshop/Illustrator】コーダー・デザイナー★大手テレビ局番組サイトのコーディング

    月額単価 :40万円〜

    【業務内容】 大手テレビ局の番組サイトのコーディング業務をはじめ、 その他運用デザインも含めたデ...

    フリーランス

    【JavaScript】フロントエンドエンジニア ★エネルギー会社比較サービスの開発

    月額単価 :80万円〜100万円

    【業務内容】 Javascript(Electron)を用いたクロスプラットフォーム対応のデスクトップアプリを作成し...