「frontplate」を使ってフロント開発の効率をあげよう！

こんにちは世界、どうもちーずです。
新学期が始まりましたが、いかがお過ごしでしょうか。
私は花粉症と戦いながら春を満喫しております。
今回は、私が静的なwebページを作る際に一年間くらいお世話になっちゃってる「frontplate」というテンプレートのお話をしようと思います。

記事のあらまし

• ターゲットはwebコーダー、マークアップエンジニア、フロントエンドエンジニアです。

• ざっくりまとめると、frontainerさんのfrontplateを使ってフロント開発の効率をよくしていきましょうってことを書いてます。

• sassとかES6とかlintとかスタイルガイドとか使いたいんだけど、フロント開発の環境を整えるのに時間をかけたくないって時に読んで欲しいです。

frontplateとは？

frontplateは、元株式会社LIGのフロントエンドエンジニアのfrontainerさんが作った「フロントエンド開発の効率をあげるフルスタックテンプレート」です。
Babelやsass、lintなどを使いたい時、webpackとかgulpとか使って自分で開発環境を整えることにコストかけたくない！って時におすすめです。
frontplateのgithubはこちらです。 github.com

ちなみにwebpackで自分で環境を整えたいって方は下記の記事を参考にしてみてください。笑
qiita.com

frontplateを用いるメリット

十分なフロント環境が整う

frontplateでは、frontplate-cilが提供するコマンドをちょっと打つだけで、下記のような機能をもった環境が整います。

• ejs (HTMLモジュール)
• node-sass (SASSのコンパイラ)
• SASSLint (sassのコード検査ツール)
• frontnote (frontainerさんが作ったのスタイルガイド生成ツール)
• webpack (JSモジュールバンドラー)
• babel (ECMAScriptコンパイラ)
• postcss-csso google-closure-compiler(CSS/JSの圧縮と最適化)
• autoprefixer(CSSのベンダープレフィックス付与自動化)
• karma jasmine (テストランナーとテストフレームワーク)
• browser-sync(ファイル変更を監視し、自動でブラウザリロードを行ってくれるツール)
• eslint (JSのコード検査ツール)
• htmlhint(htmlの構文チェック)

静的なwebページを作るには十分な環境が整いますね。
またfrontnote-cilを使うとfrp.config.jsという独自のconfigファイルにそれらの設定をまとめて書くことができます。

独自のスタイルガイド「frontnote」も使える！

feontnoteは同じくfrontainerさんが作ったStyleGuide Generator Node.jsを使ったスタイルガイドジェネレーターです。
作者が同じってこともあって、frontplateと非常に相性が良いです。
gulpやgrunt プラグインもあり、scssファイルにちょこっとコメントアウトで設定を書くだけでスタイルガイドが生成されるため、非常に使いやすい仕様になっております。
共同開発時(特に、cssがあまり得意ではない人がいるとき)におすすめです！

frontnoteのgithubはこちらです。 github.com

frontplateを使ってみよう！

frontplateの使い方は公式wikiに詳しく書いてあります。 ここではざっと基本的な簡単に使い方を説明いたします！

開発環境

Node.js 5.0以上

node.jsのバージョンはnode -vで確認ができます。
(直接公式サイトからインストールしても良いですが、node.jsは違うバージョンを使いたくなるケースが多いため、nvmでバージョン管理をすることをおすすめします。)

インストール

下記コマンドを実行してインストールします。
npm i frontplate-cli -g

インストールが完了しましたら、下記コマンドを実行するとバージョンが表示されます。
frp --version

プロジェクト生成

frontplateを元にしたプロジェクトを作るには、次のコマンドを実行します。
frp create [プロジェクト名]

そうすると、[プロジェクト名]のディレクトリにこんな感じにプロジェクトが生成されます。

|--.editorconfig
|--.eslintrc
|--.gitignore
|--.travis.yml
|--CHANGELOG.md
|--LICENSE
|--README.md
|--frp.config.js
|--package-lock.json
|--package.json
|--src
|  |--images
|  |  |--frontainer.png
|  |  |--icon.png
|  |--index.ejs
|  |--js
|  |  |--app.js
|  |  |--app.spec.js
|  |--lib
|  |  |--.keep
|  |--sass
|  |  |--_setting.scss
|  |  |--base
|  |  |  |--_base.scss
|  |  |  |--_mixin.scss
|  |  |  |--_sanitize.scss
|  |  |--layout
|  |  |  |--_layout.scss
|  |  |--sprites
|  |  |  |--_icon.scss
|  |  |--style.scss
|  |--sprites
|  |  |--icon
|  |  |  |--web-navigation-line-craft-1-109681.png
|  |  |  |--web-navigation-line-craft-2-109682.png
|  |  |  |--web-navigation-line-craft-3-109688.png
|  |  |  |--web-navigation-line-craft-4-109689.png
|  |  |  |--web-navigation-line-craft-5-109690.png
|  |--view
|  |  |--_header.ejs

以上でフロントの開発環境が簡単に整いました！

よく使うコマンド

これから挙げるコマンドは、先ほど生成したプロジェクトのディレクトリに移動して実行してください。

監視

frp serve

ファイルの変更を監視して、自動的にビルドしてくれるコマンドです。
また、実行時に確認用のwebサーバーが立ち上がり、変更が確認できたら自動的にサーバーも更新されます。

ビルド

frp build

また、圧縮された無駄のないファイルを生成するときは、オプションをつけて実行します。

frp build -p

するとデフォルトではpublicディレクトリが生成されます。

さいごに

いかがでしょうか〜！
少々古いという難点がありますが、静的なwebページを作るための機能は十分そろっていて便利ですね！
ただし、大きなプロジェクト時にはさぼらずしっかり自分で環境を整えることをおすすめします。

それでは！ちーずからでした🧀