JavaScript初心者でもすぐ開発できる! 実行環境をさっくと構築しよう

こんにちは、ライターのマサトです!

JavaScriptの開発に欠かせないのは、書いたプログラムを実行する環境ですね。

しかしいざ実行しよう!と思っても、

どのように実行するのかわからない…

という方もいると思います。今回は開発だけでなく、勉強などでも便利に活用できる開発・実行環境について紹介していきます!この記事は、下記の流れで進めていきます。

  • 【基礎】JavaScriptで書かれたプログラムを実行する方法
  • 【基礎】JavaScript開発・実行環境とは?
  • 【基礎】Web上での開発・実行環境のおすすめ
  • 【発展】Chromeブラウザでの開発・実行環境
  • 【発展】ブラウザ以外の開発・実行環境

JavaScriptの開発・実行環境をしっかり学習して自分のスキルアップを目指しましょう!

JavaScriptで書かれたプログラムを実行する方法とは?

JavaScriptのコードは、書いたらそれでおしまい、というわけにはいきませんね。きちんと実行し、動作するまでがプログラミングです。JavaScriptを実行するためには、JavaScriptが動作する環境を用意する必要があります。

ゲームソフトをプレイするために、ゲーム機が必要なのと同じですね。では、そんな環境はどのようなものがあるのでしょうか。次の項目から解説していきましょう。

JavaScriptの開発・実行環境とは?

JavaScript開発・実行環境とは、文字通りJavaScriptを正しく開発・実行することができる場所のことを意味しています。場所は、自分のPC内であったりサーバー側にあるケースや他社サービスのクラウド上に存在することもあります。

JavaScriptに関して言うと、現在ではWeb開発以外にもIoT開発やアプリ開発にも使われているので実行環境は多種多様と言えるでしょう。

node-basic-img1

画像:JavaScriptが使われているもの

このように多彩な場所に存在する実行環境はどのようなものがあるのか、早速見ていきましょう!

Web上で実行しよう

ここからは、ブラウザからすぐに利用可能なJavaScript実行環境を紹介していきます。ログイン登録なども不要で、アクセスするだけですぐにJavaScript開発を行えるものを厳選しています。

Web Maker

js-environment-img1

引用元:ウェブメーカー https://webmakerapp.com/app/

Web Makerは、オフラインでも実行可能なHTML / CSS / JavaScriptの実行環境になります。JavaScriptライブラリは検索するだけで簡単に追加可能で、画面のレイアウトも自由に調整可能です。

また、プリプロセッサもサポートされておりjade、Stylus、less、CoffeeScript、Typescriptなどが利用できます。ちなみに、コンソールも搭載されているのでブラウザの開発ツールを起動させなくても簡単にデバッグができるのも特徴でしょう。主な特徴は以下の通りです!

  • HTML / CSS / JavaScriptの実行が可能
  • オフライン実行のサポート
  • プロプロセッサ、JavaScriptライブラリの実行・追加が可能
  • シンタックスハイライト、コード補完機能
  • プロジェクトの書き出し・読み込み
  • コンソールログの搭載
  • CodePenとの連携
  • Chrome拡張機能としてのインストール
  • エディタの設定カスタマイズ

…など

Thimble

js-environment-img2

引用元:thimble ps://thimble.mozilla.org/ja/

Thimbleは、ブラウザの「Firefox」を提供するMozillaが公開しているJavaScriptの実行環境です。ファイルエクスプローラを搭載しており、複数のHTML / CSS / JavaScriptを作成して1つのプロジェクトを開発することができます。

独自のコードスニペットを追加したり、プレビューをPC・スマホでそれぞれ確認できる機能も搭載されています。また、HTMLファイル上で同時にCSSを編集する機能や画像などのリソースをアップロードできたりなど便利に活用できるツールもあります。主な特徴は以下の通りです!

  • HTML / CSS / JavaScriptの実行が可能
  • プロプロセッサ、JavaScriptライブラリの実行・追加が可能
  • シンタックスハイライト、コード補完機能
  • プロジェクトの書き出し・読み込み
  • コンソールログの搭載
  • エディタの設定カスタマイズ
  • PC、スマホのプレビュー表示
  • 複数ファイルの作成と保存
  • コードスニペットの追加と編集

…など

Glitch

js-environment-img3

引用元:Glitch https://glitch.com/edit/

Glitchは、サーバー環境も含めてWebアプリを開発するためのJavaScript環境を丸ごと提供してくれるサービスです。サーバーサイドはNode.jsでプログラムを記述し、フロントエンドはHTML / CSS / JavaScriptを使ってプログラミングを行います。

もちろん、Node.js向けのパッケージを追加することも可能で、擬似的なターミナルも搭載されているのでコマンドによる実行も可能です!

開発したプロジェクトは世界中に公開可能で、GitHubと連携してリポジトリにソースコードをPUSHすることもできます。主な特徴は以下の通りです!

  • HTML / CSS / JavaScriptに加えてNode.jsの実行が可能
  • プロプロセッサ、JavaScriptライブラリの実行・追加が可能
  • Node.js向けのパッケージを自由に追加可能
  • シンタックスハイライト、コード補完機能
  • プロジェクトの書き出し・読み込みに加えてGitHubとの連携も可能
  • コンソールログと擬似ターミナルの搭載
  • エディタの設定カスタマイズ
  • ポートフォリオページの作成
  • プロジェクトの公開・非公開の設定
  • 複数人によるコラボ連携

…など

Runstant

js-environment-img4

引用元:runstant http://lite.runstant.com/

Runstantは、ログイン不要でおまけにサーバー通信も不要な国産のJavaScript実行環境です。HTML / CSS / JavaScriptはもちろんのこと、jade、Stylus、less、CoffeeScript、Typescriptなども利用することができます。

JavaScriptライブラリの追加やプロジェクトをSNSのシェアも簡単にできる優れものです。コンソールも搭載されているのでデバッグを手軽に行ったり、第三者のコードをフォークしてカスタマイズするなどが楽しめます。主な特徴は以下の通りです!

  • HTML / CSS / JavaScriptの実行が可能
  • プロプロセッサ、JavaScriptライブラリの実行・追加が可能
  • シンタックスハイライト、コード補完機能
  • プロジェクトのシェア、フォーク機能
  • コンソールログの搭載
  • エディタの設定カスタマイズ
  • Hashによるサーバー通信不要
  • JSONによるコードの書き出し機能

…など

Chromeのデベロッパーツールで実行しよう

ここからは、ブラウザが搭載しているJavaScript開発・実行環境について見ていきましょう!主に、Chromeのデベロッパーツールに搭載されているコンソール機能について学んでいきます。

デベロッパーツールとは?

まずは、Chromeブラウザに搭載されているデベロッパーツールについて見ていきましょう!デベロッパーツールは、Web開発者がデバッグや最適化を便利に行うために用意されたツールになります。

Chromeブラウザに限らず、FirefoxやEdgeなどさまざまなブラウザにも同様に搭載され一般的な開発・実行環境です。例えば、Chromeブラウザの場合であれば「Ctrl」+「Shift」+「I」でデベロッパーツールを起動することができます!

js-environment-img5

画像:デベロッパーツール

Webのソースコードを閲覧することはもちろんのこと、CSSなどのデザインを調整したりスマホでの表示を確認することも可能です。そして、JavaScriptをそのまま記述して実行できる環境も備わっているので、次章から詳しく見ていきましょう!

コンソールを使ってみよう

デベロッパーツールに搭載されているコンソールタブを以下のように表示します!

js-environment-img6

画像:デベロッパーツール

この画面にはconsole.log()で実行した結果やエラーなどが表示されます。さらに、JavaScriptのコードをそのまま入力して実行させることも可能なのです!例えば、次のJavaScriptを入力してみましょう。

js-environment-img7

画像:実行画面

エンターキーを押すと、画面にアラートのダイアログが表示されましたね?このように1行ずつの入力にはなりますが、しっかりとJavaScriptを実行させることができます。

簡単なコードを試しに実行するにはとても最適な機能で、特別なアプリを使わなくてもブラウザさえあればJavaScriptは実行できるわけです!

ブラウザ以外の実行環境

この章では、Webブラウザを使わないJavaScriptの実行環境について詳しく見ていきましょう!主に、WindowやMacパソコン、サーバーサイドやスマートフォンについての環境を学んでいきます。

Windows・Macで実行しよう

セキュリティの懸念で、Webクラウド上で開発できないといったこともあるかと思います。そうなるとローカルPCで開発を行うことになりますね。そんな時に大活躍な、ローカルPC上で使える開発・実行環境を4つ紹介していきます。

以降の説明はWindowsを基準に行ないます。Macでも同じように使うことができるので、ご安心ください!

Visual Studio code

js_develop_envi01

引用元:VsualStudioCode https://code.visualstudio.com/

Visual Studio codeは2015年にマイクロソフトからリリースされたエディタです。あとでご紹介するEclipseやVisual Studioに比べて軽量なエディタながら、高機能であることが特徴です。

JavaScript以外にもJava、PHP、C/C++、C#、Ruby、Pythonなど多くのプログラミング言語に対応しています。以下の特徴があります。

  • シンタックスハイライト、コード補完機能
  • 拡張機能(デバッグ機能の追加)
  • 背景やテキストの色変更
  • 日本語表示対応

など

Visual Studio Codeの使い方については、下記の記事で詳しく解説しています。ぜひ併せて読んでみてください。

【初心者必見!】Visual Studio Codeの使い方を分かりやすく解説!
更新日 : 2019年5月28日

Eclipse

Pleiades03

引用元:ECLIPSE https://www.eclipse.org/

Eclipseは、Javaの開発・実行環境としておなじみのエディタです。

しかしJavaだけでなく、JavaScriptの開発・実行をサポートするためのプラグインが開発されています。代表的なプラグインのひとつとして、 WTP(Web Tools Platform)のサブプロジェクト、JSDT(JavaScript Development Tools)があります。

JavaScriptプロジェクトやJavaScriptパースペクティブなどを利用可能です。Eclipseのインストールについては、下記の記事で詳しく解説しています。実装の際は参考にしてみてください。

【Java初心者必見!】Javaの開発環境を構築する方法を解説!
更新日 : 2019年5月7日

Visual Studio

js_develop_envi02

マイクロソフト社が開発しているVisual StudioでもJavaScriptの開発をサポートしています。Proffesional版以上は有償になりますが、無償版のCommunityが用意されています。個人利用であれば、無償版のCommunityで機能的に充分です。

Visual Studioについては、下記の記事で詳しく解説しています。ぜひ併せて読んでみてください。

【初心者必見!】Visual Studio Communityについてわかりやすく解説!
更新日 : 2019年5月1日

サーバーで実行しよう

次に、サーバーサイドのJavaScript実行環境を見ていきましょう。そもそもJavaScriptはブラウザに実行環境があるため、サーバー上で使われることはありませんね。

しかし、Node.jsという開発環境を使うことにより、JavaScriptをサーバーサイドでも使えるようになります。


引用元:Nodejs https://nodejs.org/ja/

Node.jsを使うことで、Java,PHP,Ruby,Pythonなどと同じように使えるわけですね。

しかし、Node.jsはまだまだ開発途上のため、頻繁にバージョンアップが行われています。nvmというNode.jsのバージョン管理ツールを使って、バージョン管理や変更などを行ないながら使うようにしましょう。

さらにNode.jsについて知識を深めたい方は、次の記事で基本をマスターできるようにまとめています。Node.jsに興味津々な方、必見です。

【Node.jsとは?】初心者も理解できる言語の特徴を体系的に解説!
更新日 : 2019年6月3日

スマートフォンで実行しよう

最後にスマートフォン上でJavaScriptを開発・実行できる環境について見ていきましょう!スマートフォンはいろんなアプリがありますよね。そんなアプリの中には、JavaScriptのプログラムを実行できる開発環境もあるんです。

今回は数あるアプリの中から、オススメのものを紹介していきます!

JavaScript Anywhere JSAnywhere

js-environment-img8

HTML / CSS / JavaScriptを気軽にプログラミングできる無料の開発・実行環境アプリです。コンソールも搭載されているので、JavaScriptのデバッグやエラーの確認などにも有効活用できます。

Dropboxへの書き出しや読み込みにも対応しており、JavaScriptの学習はもちろんのこと簡単なWebサイトの開発にも最適です!

Coda

js-environment-img9

引用元:引用元:Apple Store 「Coda」(有料)

現時点で最強のWeb開発環境を提供する優秀なアプリです。バックエンド・フロントエンド両方の開発環境を提供しており、JavaScriptだけでなくさまざまな言語を利用することが可能です。

カスタマイズ可能な高機能コードエディタを使い、外部サーバーと接続してファイルを編集したりターミナル上からコマンドも実行できます。そのため、node.jsを使った本格的なWebアプリ開発もスマホから行うことが可能です。

Textastic Code Editor 6

js-environment-img10

引用元:引用元:Apple Store 「Textastic Code Editor 6」(有料)

Codaをもっと手軽で軽量にしたような位置づけの開発環境を提供するアプリです。扱いやすいコードエディタと外部サーバーに保管しているファイルをダウンロードして編集できる機能が優れています。

JavaScriptを実行してコンソールで確認できるのはもちろんのこと、搭載されているブラウザからプレビューを確認することも可能です。

より効率的にjavascriptの開発を進めたい人は..

今回は、JavaScriptを開発・実行できる環境について学習をしてきました。これからさらにJavaScriptの開発を進めたい人は書籍や学習サイトを利用して学習する方法もアリです。

しかし、このような一般的な学習方法では効率的な学習ができないだけでなく、実務レベルのスキルを習得するのはなかなか難しいでしょう。

なぜなら自分に合った学習方法というのは人それぞれ違いますし、書籍や学習サイトでは卓上の知識やスキルしか身につかない可能性が高いからです。

逆に、自分に合った学習方法が見つけることができれば、効率的に開発を進められるだけでなく、プログラミング以外の学習にも応用できるため人生の幅が格段に広がります。

そこで手前味噌ではありますが、プログラミングスクールを運営する弊社侍エンジニア塾式の学習ノウハウを無料体験レッスンで手に入れてみてはいかがでしょうか?

【月500名以上が受講】1時間で人生が変わる無料体験レッスン
更新日 : 2019年6月25日

弊社の無料体験レッスンではプログラミングに関する不安や疑問を解消するだけでなく、あなたの目的・目標をヒアリングした上で理想の学習プランやキャリア設計を提供致します。

さらに無料体験レッスン受講者には豪華3大特典をプレゼントしています!

  • 「最短1ヶ月で開発ができる学習方法」電子書籍(非売品)
  • Amazonギフト券1000円分
  • 未経験の転職を可能にするキャリアサポート

対面形式(渋谷)はもちろん、オンラインでも受講できるため気軽に受講でき、人生レベルで役立つノウハウが満載です。以下のカレンダーから1分で予約可能なので、まずは気軽にご相談ください。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説