JavaScriptの開発環境を準備する!jsに対応したオススメのIDEも紹介。
- 投稿日:2021.07.15 最終更新日:2023.06.29
- JavaScript入門
- IDE, 経験者向け
この記事では、これからJavaScriptを使ってWebサイトやWebアプリケーションの開発をしたいという人に向けて、必要な準備を解説していきたい。
また、JavaScript開発でよく使われるおススメのIDE(統合開発環境)も、Visual Studio Codeを中心に紹介していこうと思う。
JavaScriptの開発環境
まずはJavaScriptの開発環境について説明していきたい。
テキストエディタでも開発可能
JavaScriptのプロジェクトを開発するのに大掛かりな準備は必要無い。
最低限、PCとインターネットブラウザとテキストエディタがあれば開発を始めることができる。
ただし、複数ファイルの切り替えやコードの入力補助といった機能を利用できないうえに、複数人で開発をおこなうとなればGitなどのバージョン管理システムも必要となるので、テキストエディタのみで開発するのは現実的ではない。
インターネットブラウザは必須
JavaSciptといえばWebサイトやWebアプリケーションを開発するためのプログラミング言語。
Webサイトを表示するためのブラウザとは切っても切り離せない関係にあり、インターネットブラウザを用意することは必須だろう。
最近ではブラウザの標準化が進んでおり、どのブラウザを使用してもJavaScriptを使ったプロジェクトを制作することはできるが、このサイトではGoogleChrome・FireFox・MS Edge・Safariといった普及率の高いブラウザを使用することをオススメする。
上記のブラウザではコードのデバッグや関数を呼び出すことなどができる。
JavaScriptのオンラインエディタ
インターネット上にはオンラインエディタと呼ばれるサイトが存在し、それらでは気軽にHTML・CSS・JavaScriptのコードを試すことができる。
サイト名 | URL |
---|---|
CodePen | https://codepen.io |
StackBlitz | https://stackblitz.com |
JS Fiddle | https://jsfiddle.net |
JavaScriptの開発に適したIDE
JavaScriptで開発を行う人のためにオススメのIDEをいくつか紹介しよう。
なお、JavaScriptの開発に使われるIDEはベーシックな機能のみに絞られたものが多く、「IDE」というよりも「多機能なテキストエディタ」といった表現がしっくりくるものが多い。
Visual Studio Code
公式サイト:: https://code.visualstudio.com
まず圧倒的にオススメなのがVisual StudioCode(VSCode・VSCなどと略される)だ。
VSCodeはマイクロソフト社が開発しているIDE。
プログラミング経験の長い人の中には、Visual Studioを使用していた経験のある人も少なくないと思うが、Visual StudioとVSCodeは完全に違うタイプのIDEだと考えたほうがいいだろう。
VSCodeの長所は以下の点だ。
- JSのためのIDEとしては飛び抜けて高いシェアを持つ
- 軽量で動作が軽快
- Extentions(アドオン)の種類が豊富
どれを使えばいいのかわからない初心者の人にはまずVSCodeをオススメする。
WebStorm
公式サイト:: https://www.jetbrains.com/webstorm
WebStormはJetBrains社が開発しているJavaScript開発者向けのIDE。
有料のソフトウェアであり、ライセンスには月単位と年単位が選択できる。なお、30日間は無料の試用期間がある。
他のJetBrains社の製品のように多機能で高品質。料金を払うだけの価値はあるIDEだろう。機能が多いゆえにここで紹介している他のIDEと比較すると動作は重い。
なお、WebStormは基本的にIntellij IDEAの機能をWeb開発向けに限定したものなので、Intellijを使用している人は同等の機能を利用することができる。
ATOM
公式サイト:: https://atom.io
ATOMはGitHub社が開発しているWeb開発向けのIDE。
VSCodeのように軽量のIDEであり、画面や操作の面でも大きな違いはない。
機能の豊富さではVSCodeが上なので、特にVSCodeを使用したくない理由がある場合を除き、ATOMを選択する理由は特に無いだろう。
ちなみにGitHubは数年前にマイクロソフト社に買収されているので、同じ会社が競合に当たるIDEを開発しているという状態になっている。