フロントエンド初心者がJavaScriptの開発環境を整えてみた

はじめに

本記事は、FlashからHTML+CSS+JavaScriptに移行することになったため、
普段はC++使っているフロントエンド初心者が
格闘した記録です。
※注意： ちゃんとわかっていない可能性があります。

フロントエンドで効率のよいコードを書くには、サーバー側の知識も必要ですが、
この記事では、HTML、CSS、JavaScriptファイルを開発するための前提知識と、
開発環境について、調べたことをまとめます。

・・・ちょっと長くなったので、環境構築まで書いて、
どんな環境を作ったかは別の記事にまとめようと思います。

基礎知識

HTML x CSS x Javascriptが果たすべき役割

HPを中学生ぐらいのころに作ったときは、ひたすらTableを使って作って、デザインしてました。
残念ながら、それではフロントエンド開発者と呼べそうにありません（当たり前）。
まず、HTML x CSS x Javascriptが果たすべき役割について調べてみました。

• HTML
  • 構造や順番を記述する。大きさや色などは規定すべきでない。
  • ID/Classや属性をつけ、CSS/JSが探しやすくしておく
    • この記事では踏み込めないが自動化するときにも役に立つ・・・はず。
• CSS (Style Sheet)
  • 大きさ、色などを規定する。
  • 基本的にclass属性を使い、IDによる指定はしない
  • サイト、ページ、ブロックごとにCSSを作ると、フレームワークとして再利用できる。
  • JSに比べ処理が高速なため、JSよりCSSで表現できるならCSSで実現してしまうべき。
  • サーバー側のHTTPヘッダーに与えられると読み込みが高速になる（らしい）
• JS(JavaScript)
  • 動的な要素や振りまいを記述する。
  • 近年ではheadではなくbodyの最後にロードするのが常識（読み込みを早くするため）

上記に加えて、MVCモデルで作ると良いよ、や、タイプスクリプトなど新しいジャンルもありますが、
まずは、ベーシックなところ学ぶためカッツアイです。

ブラウザの依存性

ブラウザにより対応するJavaScriptの規約が異なっています。
昔はかなりバラバラだったが、HTML5では、だいぶ統一されたようです。

しかし、担当プロジェクトでは、IE10, IE11を使うため、
いろいろな機能が使えない、ES5で作る必要がありました（涙）

スタイルガイド

C++やJavaではコーディング規約と呼びますが、フロントエンドではスタイルガイドが相当します。
スタイルガイドには、可読性だけでなくノウハウについても含まれるため積極的に採用すべきでしょう。
（例 == よりも === を使って比較すべきといったこと）
・・・・・ちなみに、googleやAirBnbが人気らしい。

遵守しているかは、後述する静的解析ツールにより解析できます。

静的解析ツール

コーダーによるばらつきをなくし、見た目や品質を一定化するために積極的に採用すべきでしょう。
スタイルガイドの遵守状況のチェック、自動修正ができます。

min化

コーディング時には、HTML、CSS、JSには、可読性の観点から、
コメント、スペース、改行など処理とは直接関係のないものが大事です。

フロントエンドでは、コンパイルということをしないため、
最終的にリリースする際には、これらを取り除く作業が必要です。

本記事ではmin化とよびます。

計画

開発にあたって以下のような進め方をすることにしました。

1. スタイルガイドの制定
2. 設計・コーディング
3. （結合前のファイルで）静的解析ツールによるチェック
4. ファイルの結合
5. （結合したファイルで）静的解析ツールによるチェック
6. min化
7. 評価

3-7までを自動で行うことを目標に、まずは3-6を自動で
できるような環境を作ってみました。

実践編

スタイルガイドの選定

HTMLやCSSも選定したかったのですが、いい感じのを見つけられず影響が大きそうな
JSを定め、他は時間の関係で静的解析ツールの設定でカバーすることにしました（オイッ）。

• JS
  • 担当しているプロジェクトでは、AirBnbの規約が近かったため採用。
  • 見た目だけの問題のものは必要に応じてカスタマイズした。

静的解析ツールの選定

いろいろ調べ、以下のツールを選定しました。
（まとめるのが少し面倒になってきたわけじゃ・・・）

• HTML
  • htmlHint
    • メジャーどころ。プラグインなども充実。
• CSS
  • stylelint
    • オプションが多く有名。
    • csslintとのダブルチェックも考えたが、整合性をとる面倒さからあきらめた。
• JS
  • ESLint
    • JSLintでもよかったが、AirBnbの規約を遵守させるルールがESLintだったため。

開発環境の選定

個人的にはvimが最高ですが、一人で開発しないプロジェクトなので学習が簡単で、
比較的拡張がしやすそうな Visual Studio Code (VSCode)を採用することにしました。
また、上記チェックツールを動かすために node.jsをインストールしました。

VSCodeの設定

VSCodeには拡張機能が多数あるが、今回インストールしたのは以下の拡張機能。

• Prettier
• htmlHint
• ESlint

他にもカラーテーマやvimを入れたけれど、カッツアイ。

gruntによる自動化にむけて

node.jsから、以下のコマンドをたたくと、モジュールをインストールできるのだが、
そのままだと使い勝手がわるい。

npm install eslint

また、package.json に node.jsのタスクを登録すれば使い勝手はあがるが、
JSでルールを記述できる、grunt を使ってみることにした。

インストールした grunt のプラグインは以下のとおり。

• ファイル操作
  • grunt-contrib-clean
  • grunt-contrib-copy
• 静的解析
  • grunt-htmlhint
  • grunt-stylelint
  • grunt-eslint
• ファイル結合
  • grunt-contrib-concat
• min化
  • grunt-contrib-htmlmin
  • grunt-contrib-cssmin
  • grunt-contrib-uglify
• ドキュメント化
  • grunt-contrib-yuidoc

すべて npm install （プラグイン） とするとインストールできます。
インストールするパッケージを記録するには --save-dev オプションをつけて実行します。

npm install (プラグイン) --save-dev

上記方法でインストールすると、自動的にpackage.jsonを作ってくれます。
このファイルを共有すると、他のマシンでも簡単に環境を作れるため、
積極的に共有するのが吉です。

謝罪編

上記プラグインを使ってどう組み合わせたか、
gruntを使う上でのTipsなどは、長くなってしまったので別記事にしようと思います。

…そこが読みたかったのによぉぉぉ、って人、ごめんなさい。

…最近はgruntより簡潔にかけるglupの方がいいみたいです