フロントエンド開発で使える開発環境をおさらい。スタンドアロンからクラウドIDEまでの注目機能や特徴を紹介

「新発見！フロントエンド技術の今」の連載。第14回のテーマは効率的なアプリの開発に欠かせない開発環境です。

• keyboard_arrow_down フロントエンド開発における開発環境
• keyboard_arrow_down 定番のスタンドアロン開発環境
• keyboard_arrow_down ブラウザ上の開発環境
• keyboard_arrow_down おわりに

フロントエンド開発はHTML/CSS/JavaScriptが中心の世界であり、テキストエディタやターミナル、ブラウザなどOS標準のツールがあれば開発を進められるのが利点です。しかしながら、技術の高度化と複雑化、プロジェクトにおけるフロントエンドの重要度の高まりに伴い、テキストエディタで書いてターミナルやブラウザで実行すればOK、というわけにもいかなくなってきました。昨今では、フロントエンド開発でも開発環境を利用するのが当たり前になっています。

開発環境は開発プロセスを効率化するプログラム群

開発環境というと漠然としていますが、開発プロセスに必須の機能を備えたプログラム群です（本番環境に対するターゲットとしての開発環境とは違います）。コード編集のためのテキストエディタ、プログラム実行のためのターミナル、コンパイラやランタイム、デバッガなどの機能で構成されます。
中でも、統合開発環境（Integrated Development Environment; IDE）は、文字通り開発環境に求められる機能を統合し、単体で備えるツールです。環境構築の容易さと利便性に優れていることから広く使われています。開発環境の標準としての性格も備えるので、複数のメンバーによる開発にも適しています。
代表的なIDEにはEclipse、Visual Studio、IntelliJ IDEA、RAD Studioなどがあり、特定プラットフォーム向けのXcode、Android Studioのほかに、各種プログラミング言語に特化したものもあります。また、クラウド型IDEも登場しており、環境構築の手間そのものを省けるという選択肢もあります。

開発環境に求められる機能

開発環境には、プログラムのソースファイルを編集するという基本機能のほかに、以下の表に挙げる機能が求められます。特にIDEとしては、GUIにより視覚的に操作できることも求められます。また、プラグインや拡張機能といった手段で、基本機能を拡張していけることも重要です。

機能	概要
ワークスペース	作業スペースを提供しプロジェクト内のファイルを管理する
バージョン管理	GitHubやGitLabなどと連携する
シンタックスハイライト	構文の要素ごとに色付けする
コード補完	キーワードやメソッドの入力候補を表示する
コードスニペット	定型の処理のためのコードパターンを自動入力する
オートフォーマット	インデントや空白などルールに沿ってコードを整形する
リファクタリング	識別子名などをプロジェクト内で変更する
構文解析	リアルタイムでコードを解析して必要な場合にエラー表示する
ビルドツール	プログラムをビルドする
デバッガ	プログラムの実行、デバッグを支援する
テスト	単体テストなどを実行する
デプロイ	アプリケーションを本番環境にデプロイする

なお、本記事の後半で紹介するブラウザ上の開発環境、クラウドIDE型では、その全てを備えていないことがありますが、それぞれの強みや特徴をつかんでご自身に合ったものを活用していきましょう。

ここからフロントエンド開発で利用できる具体的な開発環境を紹介していきますが、まずはスタンドアロンで使用できる定番的な開発環境を紹介します。これらの開発環境は多機能で幅広い用途に対応しますが、特定の目的に対応させようとすると、ライブラリの入手とインストールなど、相応の準備を必要とするのが難点といえば難点です。

VS Code（Visual Studio Code）

開発環境といえば、定番中の定番と言えるのがVS Codeです。2015年にMicrosoftによってリリースされると、たちまち定番の座を獲得しました。Codeという名があるように、MicrosoftはVS Codeを「コードエディタ」として位置付けています。しかしながら、後述する拡張機能により編集機能以外の機能も充実していますから、統合開発環境とも位置付けられるでしょう。

VS Codeは通称であり、正式にはVisual Studio Codeです。Visual Studioと銘打っているように、同社がVS Code以前からリリースしている開発環境であるVisual Studioの流れを汲んでいるように見えますが、実際は全くの別物です。利用できる機能に共通の部分もありますが、主にMicrosoftプロダクトのための開発環境であるVisual Studioとは異なり、汎用的なコードエディタとしての機能と軽快な動作を追求したのがVS Codeです。

VS Codeの特徴のひとつに、拡張機能があります。文字通り、VS Codeの機能を拡張できる仕組みで、Microsoft公式の拡張機能をはじめとして、サードパーティから豊富な拡張機能がリリースされています。フロントエンド開発に必須のHTML、CSS、JavaScriptサポートは拡張機能によらずビルトインで備わっており、ただちにフロントエンド開発にフル活用できるのもうれしい点です。

Eclipse IDE

Javaの開発者を中心に人気と実績があるIDEがEclipse IDEです。1990年代という早い時期にIBMによって開発され、2001年にオープンソース化されました。現在は、Eclipse Foundationという非営利組織によって運営と開発が進められています。
Eclipse IDEは、もともとJavaによる開発プラットフォームとして成長してきましたが、プラグインという仕組みによって他言語のサポートも容易になり、現在ではさまざまな言語やプラットフォームのための開発環境として定着しています。HTML、CSS、JavaScriptサポートも例外ではなく、Web Tools Platform（WTP）というWeb開発のための公式プラグインが早期に提供されており、これを利用することでフロントエンドにとどまらないWeb開発全般に利用できるようになっています。

上記のようなスタンドアロンの開発環境は、実績もあり機能も充実していて、安定して利用できるのが魅力です。しかしながら、近年のWeb環境の機能充実や性能向上で、ブラウザそのものを開発環境として利用する動きが活発になっています。PCなどに開発環境を準備する必要があり、言語やフレームワークに応じたセットアップ作業が必要で、開発プロセスもそれに依存するスタンドアロンの開発環境に比べて、特段の準備が必要ないか最小限で、外出先など場所を選ばずに作業できるのがブラウザによる開発環境のメリットです。

プラットフォームとして利用が広がるVisual Studio Code for the Web

Visual Studio Code for the Webは、その名の通りVisual Studio Code（VS Code）のブラウザ版です。2021年にMicrosoftによりリリースされました。スタンドアロンとほぼ同様の機能を、ブラウザから利用できます。サービスのURLは「https://vscode.dev/」です。
ブラウザ版ですが、ファイルシステムAPIを使ってローカルにあるファイルを利用することもできます（Google Chrome、Microsoft Edgeのみ）。もちろん、ファイルをアップロードしてそれを編集することもできます。
VS Code for the Webの最大の特徴といってもよい豊富な拡張機能も、全てではないですが利用できます。利用できないのは、描画系などOSの機能を利用するものなどです。GitHub、GitLabとの連携にも優れていて、これらのサービスからコードの編集を指示すると、自動的にVS Code for the Webが起動してリポジトリの編集作業を開始できます。
また、Gitpodというサービスを使うと、GitHub、GitLabなどのリポジトリを機能拡張し、コードエディタとしてVS Code for the Webを使うといった利用ができます（無償で50時間まで利用可能）。GitHubの提供するCodespacesもVS Codeを利用しますが、こちらは仮想マシンを利用するためターミナルを含めてVS Codeのほとんど全ての機能を利用できます。

Eclipseの後継ともされるEclipse Theia IDE

Eclipse Theia IDEは、Eclipse Foundationにより2024年に正式リリースされた新鋭の開発環境です。Eclipse Foundationによる開発ですが、ベースはVisual Studio Codeであり、モジュール化を進めて拡張性を高めた開発環境を提供します。Eclipse IDEはリリースが早い分、設計の古さも出てきており、そのリプレースとして開発されたIDEといえます。商用利用が可能なライセンスとなっています。
ブラウザ版に加えてデスクトップ版があるのもVS Codeと同様です。VS Codeの拡張機能が利用できるほかターミナル機能も有しています。多くの拡張機能がビルトインされていてすぐに各種言語に対応した開発が始められるほか、独自の開発ツールやテーマも提供しています。なお、拡張機能ストアとしては、「Eclipse Open VSX」が利用できます。

さまざまなプログラミング言語に対応するPaiza.IO

Paiza.IOは、Paiza, Inc.により2014年にリリースされた開発環境です。HTML、CSS、JavaScriptに留まらず、C/C++、Java、Ruby、Python、PHP、Perlなどの主要なプログラミング言語に対応しています。ファイルのアップロード機能、外部APIへの接続や、スクレイピングなどにも対応しています。UIは日本語をはじめとする各国語に対応していて、英語が苦手な人や年少者などに使いやすいサービスです。基本的にはプログラミング入門のための環境であり、本格的な学習や運用には有償のPaizaCloudを利用するようにサービスが分けられています。
PaizaCloudは、クラウド型のIDEです。アプリケーションサーバやデータベースなども利用できるので、フロントエンドに留まらないプログラミングが可能です。フレームワークやランタイム、データベースとしてRuby on Rails、Node.js、Django、MySQL、Java（Tomcat）、PHP（LAMP）、Laravelなどが提供されています。無料、ライト、ベーシックの3つのプランがあり、サーバ公開不可で連続利用も4時間に制限されるライト（税抜980円〜/月）が学習用、サーバ公開可で連続利用が無制限のベーシック（税抜1,980円〜/月）が業務用と使い分けられます。

ライブラリの充実したWeb Maker

Web Makerは、Kushagra Gour氏により2017年にリリースされた、高速な動作とオフライン環境での利用も可能なフロントエンド開発環境です。HTML、CSS、JavaScriptに対応しているほか、React、Vue、Angular、jQueryといったJavaScriptライブラリと、Bootstrap、TailwindといったCSSライブラリを追加して利用することもできます。
Web Makerにおけるプロジェクトは、Creationと呼ばれます。Creationは、ローカルストレージに保存できるほか、ログインによってクラウド上にも保存できます。フォーク（複製版）を作成する機能もあり、異なるバージョンのCreationで作業することも可能です。
無償のSTARTERと有償のPROがあります。STARTERは制約が厳しいので基本的にお試し用です。本格的な利用には、種々の制限がなく外部への公開も可能なPROアカウントを購入することで、アセットに関連する機能などを利用できます。

プログラミング学習に最適なPLAYCODE

PLAYCODEは、Ruslan Ianberdin氏により2017年にリリースされた開発環境です。JavaScriptコード（TypeScriptも）の実行に特化しています。Playground機能を備えており、入力したコードをその場で実行して結果を確認できます。Bootstrapが標準でインポートされており、React、Vue、jQueryといったライブラリもインポート可能です。テンプレートも用意されているので、学習用途の性格が強い開発環境です。
基本的に無償で利用でき、作成できるプロジェクト数こそ無制限ですが、保存できるアセットの容量が4MBと心許なく、コードの行数も最大8行と制限されているので、本格的に利用するならPro版の購入が必要となります。月4.99米＄（執筆時点で約800円）でコードの行数が無制限になるほか、アセット容量が1GBに拡張されます。

執筆時点でベータ版なので詳しくは紹介しませんが、Googleによるブラウザ版IDEであるIDXもあります。フルスタックのWebアプリの開発を目的としており、生成AIを備え、各種のJavaScriptライブラリに標準対応、Firebaseへのデプロイにも対応しているので、スタートアップが容易となっています。

今回は、フロントエンドアプリの開発効率をアップする「開発環境」を紹介しました。普段使っているという読者も多いと思いますが、ブラウザ版の開発環境も著しく進化しているので、興味を持ったものがあればぜひ試していただきたいと思います。