初心者でも最短3秒でできる!? JavaScriptの開発環境を構築しよう

こんにちは!インストラクターの井上です。

JavaScriptを学習したい!
そう思ってもどのような環境で学習するのが良いのか分からない…

というお悩みのお持ちの方、ようこそこの記事へ!

JavaScriptの環境構築自体はそんなに難しいものではありません。
ただ、効率的な学習環境を一瞬で作れるとしたら是非知っておきたいですよね。

今回の記事では、下記の流れで、最短3秒で作れちゃう開発環境を紹介していきます。

【基礎】JavaScriptの開発環境は大きく分けて2つ
【基礎】初心者にはブラウザ環境がオススメ
【基礎】3秒で作れる環境、PLAYCODEとは?
【基礎】PLAYCODEでHello World!
【発展】Node.jsを使いたい場合

実用的な学習環境を手に入れて、効率よくJavaScriptを学べるようになっちゃいましょう!

開発環境は大きく分けて2つ

JavaScriptの開発環境は、ローカル環境ブラウザ環境の2つに分類することができます。

ローカル環境とは、WEB上ではなくパソコン自体の環境を使って用意するものです。
ソフトのインストールなどが必要になりますが、インターネット環境がない状態でも使うことができます。

対してブラウザ環境は、WEB上でJavaScriptを開発する環境を指します。
環境の準備が容易ですが、インターネット環境がないと使うことができません

それぞれメリットデメリットがありますが、どちらもJavaScriptの開発に便利なものです。

初心者にはブラウザの環境がおすすめ!

初めてJavaScriptを書いてみる人や、ちょっと試しに書いてみたいという初心者の方には、ブラウザの環境がオススメです。

インターネット環境さえあれば、なんと3秒で開発環境を用意することができるからです。

難しい設定は一切ありません。
最初ですから、手軽に始められる環境からチャレンジしてみましょう。

ローカルの環境はどんなものがあるのかは、下記の記事で紹介しています。
こちらもぜひ読んでみてください。

>>ローカルでもブラウザでも!JavaScriptの実行環境紹介

最短3秒で開発環境を構築してみよう

では、早速開発環境を用意してみましょう!

まずは下記のURLにアクセスします。

https://playcode.io/

はい、終わりです

そう、なんとこのPLAYCODEという開発環境は、アクセスするだけで使うことができるのです

しかもこんなに便利なのに無料。
これはすごい。

もう便利なんて言葉では足りませんね、超便利なんです!

おすすめ開発環境、PLAYCODEの使い方

では、この超オススメなPLAYCODEの使い方について解説していきましょう。

画面の見方

まず、この画面の見方から確認していきましょう。

最初の画面では、PLAYCODEの説明の他ににいくつかの画面が表示されていますね。

左側のサイドバーは、jsファイル、htmlファイル、cssファイルを切り替えるためのものです。

PLAYCODEの説明の横には、JavaScriptのコードを書くための画面が表示されています。

右側のHello worldと表示されている画面が、実行結果の表示画面です。
その下にはコンソールが表示されています。

お気付きの方もいますね。
そう、もうこの画面でJavaScriptの開発に必要なものが全て揃っているのです。

コードを書く場所

実行するためのコードは、各ファイルに記述する必要があります。

JavaScriptならjsファイル、HTMLならhtmlファイルですね。

ファイルの切り替えは、左側のサイドバーで行なうことができます。
下記の画像のオレンジの部分ですね。

ここで編集したいファイルをクリックすることで、入力するための画面が切り替わります。

実行結果の表示

実行結果は、outputと書かれた位置に表示されます。
下記の画像の赤枠の部分ですね。

実行するために、特に何かをする必要はありません

なんとコードを変更するだけで、即座に実行してくれるのです。

その他の機能

PLAYCODEは、ファイルを追加したり、書いたコードを保存したりなど、便利な機能が盛りだくさんです。

今回全てを紹介すると長くなっちゃうので、どんな機能があるのかをささっとリストで紹介していきます。

・シンタックスハイライト(コードの色つけ)をしてくれる
・ファイルを追加することができる
・プロジェクトとして保存できる
・GitHubとの連携ができる
・WEBページとして公開できる(無料の登録が必須)

WEBページとして公開できるとか、機能がとにかく凄すぎる…
流石にちゃんとしたWEBページとしての運用は難しいと思いますが、ちょっとしたお試しページであれば十分活用できます!

早速実行してみよう!

ただツールの使い方を覚えただけではもったいないですね。
コードを書いて実行してみましょう!

今回は、最初に出ているサンプルの下にもう1つHello Worldを追加してみます。

HTMLを書こう

まずは画面に表示するためのHTMLが必要になります。

HTMLのファイルを開いて、下記のようにコードを入力していきましょう。

【HTML】

JavaScriptの命令を書こう

次に、追加したHTMLのタグの中にHello Worldを表示するコードを書きます。

すでに文字の準備はできているので、表示するコードだけ追加すればOKです。

【JavaScript】

実行してみよう

先ほど解説した通り、実行は自動的に行なわれます

なので上記のコードを書けば、実行結果の画面は下記のように表示されます。
(ちょっと見栄えの調整のためにCSSをいじっています)

【HTML】

【JavaScript】

【CSS】

想定通り、Hello Worldを追加することができましたね!

Node.jsを使いたい場合

基本的なJavaScriptを使いたい場合はPLAYCODEで十分なのですが、Node.jsというサーバー処理の制御をするJavaScriptでは、残念ながら活用することができません

Node.jsを使ってみたい!
という方には、下記の記事で紹介しているAWS Cloud9などの環境がおすすめです。

>>AWS Cloud9とは?

そもそもNode.jsとは何かを知りたい!
という方は、下記の記事をどうぞ。

>>初心者でもわかる!Node.js徹底解説

まとめ

いかがでしたか?

JavaScriptの環境づくりは、本当に超簡単ということがわかりましたね!

PLAYCODEはまだ発展途上なツールなので、これからもっと便利になっていくことでしょう

気軽にJavaScriptを書けるよう、どんどん活用していってくださいね!

LINEで送る
Pocket

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

cta_under_bnr

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

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

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

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

書いた人

井上 慎也

井上 慎也

侍エンジニア塾のインストラクター。フリーでWEB制作の受託や自身の事業の傍ら、侍ではWEBプログラミング方法の指導やプログラミング学習コミュニティの運用を行っている。
好きなショートカットキーは、command + w 。愛機はMac Book Pro。ブラウザのタブを大量に開きがち。

おすすめコンテンツ

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

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