Help us understand the problem. What is going on with this article?

Visual Studio Code上でイマドキのJavaScript開発環境を構築する

More than 3 years have passed since last update.

はじめに

Advent Calendarのトリになり若干ビビっていますが、近頃行なっているフロントエンド開発周りのTIPSを書きたいと思います。フロントエンド開発は始めたばかりで、見当違いのことを言っていたらすみません。コメントでご指摘いただければと思います。

ちなみに@tnaotoさんの2日目の記事に書かれている「社外で活動する楽しさって何かねーって会話をしてた」「ちょっと若いの」は僕のことでした。そんな会話はしたもののこれまでほとんど社外活動してなかったので書いてみようと思いました。

検証した環境

  • Windows 10 (一部 MacOS Sierra)
  • Node.js v6.9.1 (LTS)
  • Visual Studio Code 1.8.1

イマドキのフロントエンド(JavaScript)開発

何をもってイマドキなのかというのはありますし、異論も色々とあると思いますが、本記事で想定するのは4日目の記事でも紹介されていたようなSPA(Single Page Application)と呼ばれる単一ページで構成されるWebアプリケーションの開発です。

使用するライブラリ・フレームワークについてはこの記事にまとまっているものを想定しています。

つまり、「React + Redux + material-ui + ES2015 + Babel + webpack + ESLint」(少々省きました)です。あとここで前提すぎて抜けているものとしてはNode.js/npmがあります。

フロントエンド/JavaScript周りの知識が「JQueryを知っている」くらいの数年前で止まっていた自分としても驚きましたが、数年前と以下が違います。

  • クライアントサイドのコードで使用するライブラリもNode.js/npmを使ってインストールする
  • クライアントサイドで動くJavaScriptをそのまま記述するのではなく、書きやすい形でコードを記述し、最後に公開する時のJavaScriptに変換(トランスパイル)する

これらのライブラリを使った時の開発フローは以下のようになります。

  1. package.jsonの作成(npm init)
  2. ライブラリのインストール(npm install)
  3. ソースの記述(ES6+JSX)
  4. 静的解析(ESLint)
  5. テスト(本記事では省略)
  6. 開発用サーバへのデプロイ(webpack-dev-server)・ソース修正
  7. ソースのトランスパイル(Webpack+Babel)
  8. アプリのデプロイ

これらの流れを基本的にVSCode上でできるようにしようというのが本記事の趣旨です。

なぜ Visual Studio Code (VSCode)なのか

僕は元々Eclipseを一番愛用していました。今回もEclipseでできるとは思ったのですが、もう少し軽いもので見た目もイケてる最近出てきたエディターも使ってみたいと思いました。ただ、Eclipseで使えていた以下のような基本的な機能は欲しかったです。

  • コード補完
  • 定義へのジャンプ
  • ファイルエクスプローラー
  • 自動静的解析
  • Gitによるバージョン管理
  • デバッグ機能

VSCodeはこれらほとんどをデフォルトで備えていていたのでこれにしました。

ちょっと昔にVisual Studio 2010なんかを使ってた感覚からすると、名前には入っているものの全然Visual Studioとは別物で、いい意味で驚きました。他のエディターでいうとSublimeTextやAtomに近いです。

Atomも考えたのですが重いのとプラグインをたくさん入れないと実現できなかったり、過去にヘンなところで落ちることが多く、いい思い出がなかったのでやめました。(好きな方も多いとは思いますが。。)

開発環境の前提

とても当たり前のことかもしれないですが、開発環境はGUIのあるマシンでそこでコードの編集もブラウザでの画面確認もすることをオススメします。そうであればOSはWindowsでもMacOSでもLinuxでもどれでもよく、ローカルマシンでもリモートマシンでもよいと思います。

最初、ローカルWindowsマシン上のVSCodeで編集しつつ、そのコードをVirtualBox上のLinux(GUIなし)で動かすみたいなヘンなことをしてましたが、ハマるところがいくつか出てきました。(webpack-dev-serverがソース修正を検知しないなど)

事前準備

ここからは自分が行った設定について説明します。

Gitのインストール

何を開発するにも必要です。Windowsの場合、例えばGit for Windowsをインストールします。

Node.jsのインストール

SPAのようなクライアントサイドの開発においてもNode.jsは必要なのでインストールします。これをインストールするとnpmコマンドもnpm-scriptsも実行できるようになります。

Windowsの場合、ここの手順を参考にやったところ特に問題は起きていないです。やった方が良さそうです。
- http://qiita.com/okamoai/items/a875b26abab7f18da7d1

Node自体のバージョン管理を考えるならWindowsの場合、nvm-windowsnodistからのインストールを考えます。

VSCodeの設定

統合ターミナルの設定

VSCodeでは統合ターミナルを表示して、VSCode上のウィンドウからnpm installコマンドなどを実行することができます。MacOSやLinuxだと特に設定不要と思いますが、Windowsの場合以下の選択肢があります。

  • cmd (デフォルト)
  • PowerShell
  • Bash on Ubuntu
  • Git Bash

好みなのですが、Git Bashを使っています。gitがすぐ使えて補完あり、カラーリングも良かったので。ただ日本語が化けるのと入力がおかしくなる時があります。

今後はBash On Ubuntuに変えてもよいかなと考えています。変更方法はこの辺りを参考にしてください。

ESlintの設定

ESLintを自動実行するように拡張機能を入れます。

この拡張機能が有効な状態でESLintをインストール・設定する(.eslintrcを作成)と自動解析するようになります。

エラーメッセージは下の画像のような感じで見れます。

スクリーンショット 2016-12-25 02.50.17.png

lintを自分で実行しなくて良いのがとても良いです。

デバッグの設定

webpack-dev-serverを使ってデバッグをできるように設定します。ここだけ独立して見たい方もいると思って別記事にしたのでそちらを参照してください。

これができるようになるまで不毛なconsole.log(いわゆるprintデバッグ)ばかり書いていましたが、とてもラクになりました。

VSCodeを使った開発フロー

これまでの設定を行った後のVSCodeを使った開発フローは以下のような流れになります。

1) package.jsonの作成(npm init)
2) ライブラリのインストール(npm install)

VSCode上の統合ターミナルから実行します。
VSCode上じゃなくてもできますが、ウィンドウの切り替えが不要な方が快適と思います。
ここの2つはstarter系コマンドを使うと簡単にできます。

3) ソースの記述(ES6+JSX)
4) 静的解析(ESLint)

ソースを書きながらESLintが自動で指摘してくれます。

5) テスト(本記事では省略)

今回はパスしましたが、統合ターミナルから実行すると思います。

6) 開発用サーバへのデプロイ(webpack-dev-server)・ソース修正

統合ターミナルからwebpack-dev-serverを実行して開発用サーバを立ち上げます。
デュアルディスプレイにして左にVSCode, 右にChromeにすると作業がしやすいです。

webpack-dev-serverは一度起動したら再起動なしに修正を反映してくれるので画面を確認しながら修正していくことができます。

いよいよデータの値が知らないと修正が厳しい時はブレイクポイントを設定してデバッグをします。

7) ソースのトランスパイル(Webpack+Babel)

統合ターミナルからwebpackを実行して公開用のJavaScriptに変換します。

8) アプリのデプロイ

PaaSのhttpサーバあたりにコマンド一つでデプロイできると良さそうです。

VSCodeのちょっと惜しいところ

VSCodeはJavaScript開発に必要な機能をほとんど最初から備えているのでかなりオススメです。ですが、もうちょっとばかり頑張ってほしいと思うところが2つあります。

タスク実行(tasks.json)を強化してほしい

タスクの実行はデフォルト以外コマンドパレットから入力して実行させる必要があって、少し面倒です。これだったらnpm-scripts+ターミナルでいいかと思ってそうしています。tasks.json自体も新たに自分で書く必要があり、少々面倒です。できれば自動生成させたいです。

Git機能でできることを増やしてほしい

難しいことはCLIでやってくれというスタンスなのでしょうか。ですが、せめてgit commit --amend, git branch, git resetくらいはGUIからできるようにしてほしいです。

どちらもいずれ良くなっていくと思いますが。

最後に

自分はこうやっているというだけで、もっと良いやり方があるような気もします。もっとこうした方が良いというのがありましたらぜひコメントで教えてください。

最後にNode.jsをインストールしている方はこのコマンドを実行しましょう。

スクリーンショット 2016-12-25 03.10.27.png

Happy Xmas, Noders!

tochi_ondy
@tochi_ondy 投稿する記事は全て私個人の見解であり、所属する組織として意見を代表したり保証したりするものではありません。
fujitsu
富士通グループのソフトウェア技術者有志により運営しているコミュニティです。
http://www.fujitsu.com/jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away