JavaScritpはHTML、CSSの次くらいに簡易的に扱いやすいプログラミング言語で、基本的に環境構築、実行が簡単です。とはいえ選択肢自体は複数あり、その中でも一瞬で終わるほど簡単なものから、多少の手間が掛かるものまであります。
そこでこのページでは、どんな方法があるか紹介しつつ、一番簡単な方法をすぐに実行できるように解説します。
開発環境の選択肢
JavaScriptの開発環境には以下のような選択肢があります。
どの方法も非効率なものではなく、目的に応じて役立つものです。しかしなるべく簡単に、早くJavaScriptをやってみたいならとりあえずWEBブラウザで実行してみるのがおすすめです。
WEBブラウザで実行する方法
どのWEBブラウザを使用するかによって操作が異なりますが、いずれにしてもすぐにJavaScriptを実行できます。たとえばGoogle Chromeを利用する場合、以下のような手順です。
- 右上の「設定のアイコン」をクリックする
- 「その他のツール」にカーソルを当てる
- 「デベロッパーツール」をクリックする
- 上のタブの「Console」をクリックする
あとはJavaScriptのコードを入力し、Enterキーをクリックするだけです。またデベロッパーツールを開く手順は、Windowsなら「Ctrl+Shift+I」のショートカットキーを使用することも可能です。
Macの場合も一度上の手順でデベロッパーツールを見てみると、ショートカットキーが記載されているはずです。
あとはJavaScriptのコードを入力し、「Enter」を押せば実行できます。
例として、アラートを出してみます。
このコードを書いてEnterを押すと、アラートが出てきます。
一瞬でJavaScriptを実行できます。また直接コードエディタに入力するのではなく、メモ帳やサクラエディタなどにコードを書いておいて、それをコピペして実行することも可能です。
オンラインテキストエディタを使用する方法
WEBブラウザに直接入力すればすぐにJavaScriptを実行できますが、簡単でなおかつテキストエディタとしての機能がもっと高い方が良い、という方もいるかもしれません。
その場合オンラインテキストエディタを使用すると良いです。オンライテキストエディタとは、インターネット上でテキストエディタにコードを記述し、そのまま実行するためのツールです。
登録なしですぐに使えるので、使いやすければオンラインテキストエディタも良いと思います。具体的には以下のようなものがあります。
他にもいろいろなオンラインテキストエディタがあります。具体的にどのツールがおすすめというのは特になくて、どれもHTML,CSS,JavaScriptを簡易的に動かせるツールです。
ただ個人的には、Runstantが一番レイアウトなどを含めて考えても直感的に使いやすいと思います。とはいえ他のオンラインテキストエディタも機能はそこまで変わらないので、上で挙げたものや、それ以外でも興味のある方はぜひ調べてお気に入りを見つけてください。
テキストエディタ+WEBブラウザで実行する方法
テキストエディタとWEBブラウザを組み合わせて実行することも可能です。テキストエディタに記載したコードをデベロッパーツールに貼りつけて実行しても良いですし、HTMLから読み込んで実行することも可能です。
JavaScript単体で速攻で動かすなら、テキストエディタに書いたコードをデベロッパーツールに貼りつけるか、上で説明した通りデベロッパーツールに直接書き込んだ方が速いです。
HTML,CSSと合わせて本格的にコードを書く場合は、テキストエディタ+WEBブラウザの組み合わせは王道の手法です。
統合開発環境（IDE）を使用する方法
統合開発環境とは、テキストエディタを含め開発に必要なコンパイラ、デバッガなどをひとまとめにしたツールのことです。有名なものとしては、「Eclipse」「Visual Studio Code
」などが挙げられます。
統合開発環境は幅広くプログラミング言語をサポートしており、JavaScriptもその中に含まれます。Javaなどを含め、本格的に開発するなら便利な環境と言えるでしょう。
ただし、JavaScript,HTML,CSSだけやりたい、JavaScriptを試してみたい、といった目的だけでインストールするのはやや手間が大きいです。統合開発環境はオンラインで使用するのではなくパソコンにインストールするものなので、多少は容量も使います。
とりあえずはWEBブラウザやオンラインテキストエディタで試してみて、本格的に開発を始めるタイミングになってから統合開発環境をインストールしても遅くはないでしょう。
ちなみに仕事として本格的にプログラミングを行う場合、統合開発環境を使うケースが多いです。
とりあえず書いて動かしてみることが大切
経験がないこと、知らないことは自分にとって未知な分、余計に腰が重くなりがちです。また始めたとしてもちょっとしたことでつまづいたり混乱したりして、結果的に挫折してしまうかもしれません。
プログラミングにもこのことが当てはまり、何も知らずに環境構築から始めて途中で挫折する方は案外多いようです。丁寧にやれば難しい作業でもそこまで時間が掛かる作業でもないのですが、たとえば途中で手順を間違えてうまくいかない可能性もあります。
そのとき慣れている人なら原因を特定したり修正できますが、初めての方だとどうしても原因がわからず、やり直そうにも何を削除してやり直せばいいのかわからない、やってみたけどうまくいかない、なんてことになるかもしれません。
先にプログラミングを経験しておけば環境構築はプログラミングのための作業作りに過ぎないとわかりますが、何も経験がないとなんとなく難しく感じて投げ出してしまうかもしれないということです。
挫折を防ぐためには、とにかく簡単な環境、簡単なコードで良いので実際にやってみることが大切です。
やってみれば「こんなものか」とわかるので、もう自分にとって未知のものではありません。もちろんプログラミングの世界は奥が深いのでこの一歩だけで理解できるものではありませんが、0と1ではまったく見える世界が異なります。
速攻で一歩踏み出し、そこからいろいろ試行錯誤すれば挫折も減るのではないでしょうか。
またJavaScriptを学習するのにおすすめの書籍については以下の記事をご参照ください。
