【JavaScript超入門】JavaScriptを実行できる環境を用意しよう

Java Scriptを学習する上で、実装したプログラムの動作確認をするための環境が必要です。

今回は、JavaScriptの実行環境を用意しましょう。

①ブラウザ

一番、手っ取り早いのは、ブラウザの検証ツールからJavaScriptを実行する方法です。

今回は、Google Chromeブラウザを使用して、JavaScriptを実行する方法を確認しましょう。

Google Chromeを起動できましたら、右クリック。

一番下の「検証」を選択すると、ブラウザの検証ツールが開きます。

検証ツールが開けましたら、Console タブを選択

このConsole上でJava Scriptの動作確認を行うことができます。

ブラウザの検証ツールを開いて、すぐにコンソールで動作確認ができるので

実際の業務でも、ちょっとしたJava Scriptの動作確認を行う時に使用することは多いです。

ただ、少し長いコードだとコンソール上でコードを書くのが大変なので、そのような時は他のツールを使用します。

②Code Pen

Code Penというサイトを使用して、JavaScriptの動作確認をする方も多いでしょう。

CodePenでは、JavaScirpt 、HTML、CSSをブラウザ上で実装することができ、

リアルタイムに変更が適用されながら、プログラムを実装することができます。

TOPページのSignUp　から新規会員登録をします。

twitter, github, facebook　を利用したID連携が可能なので、アカウントを持っている方はすぐにアカウント登録をすることができます。

このような感じで、デフォルトでHTML、CSS、Java Scriptのエディタが開きます。

それぞれのファイルを編集することで、リアルタイムに変更が適用され、

下部の画面に変更内容が表示されます。

HTML、CSSを連携してアニメーションの動作確認などを行う時は、とても便利だと思います。

③Paiza

Paiza もすぐにJavaScirptの実行環境を用意してくれます。個人的には、すぐにブラウザ上で動作確認ができるPaizaを使用して、ちょっとしたJavaScriptの動作確認を行うことが多いです。

左上の言語選択から、Java Scirptを選択。

選択すると、Main.jsというJavaScriptのファイルが表示されるので、

そこに動作確認したいJavaScriptのコードを記載します。

今回は、test とログに出力するプログラムを書きました。

コードが書けましたら、左下の実行ボタンをクリック。（Ctrl ＋ Enterでも実行することができます。）

プログラムを実行することができました。簡単ですね＾＾

④CodeSandbox

最後に、CodeSandbox もご紹介しましょう。

CodeSandboxでは、Reactや、Vue.js のようなJavaScriptのFWを使用した開発環境を提供してくれます。

プログラムを実装する上で、開発環境を用意するのは少し面倒な時もあるのですが、

CodeSandboxでは実装したいテンプレートを選択するだけで、すぐに開発を始めることができます。

選択できるテンプレートも、React、Vue、Angular、Next.jsなど多種多様で申し分ありません。

自分が学習したいフレームワークの公式を見つつ、実際に実装して動作確認をしてみたい時にCodeSandboxはとても重宝するので、ぜひ覚えておいてください。