効率化を考えたコーディング制作環境＠名古屋 NaCSS Vol.1より。
なごや。 pic.twitter.com/6i1fJF0qx9
— 小畑 タカユキ (@kobatatakayuki) 2016年6月4日
今更ながら、先日の名古屋遠征の時のメモ。
作業の効率化についてあれこれ。
今回の講師は、北海道で活動されている、@h2ham（通称ハムさん）。
北海道では、定期的にSaCSS（サックス）という勉強会を開催しております。
話を聞いてみると、最近のフロントエンドの実装方法（フロー）として、
Node.jsを駆使して、「ターミナル（いわゆる黒い画面）」から
「コマンド」を打つことが主流となってきているようです。
社内では、まだこの手のフローを導入できてないっていう話をしたら、
早く導入したほうがいいですよ！と激しくオススメされました。
- Sassのコンパイル
- CSS・JSファイルの圧縮
- ブラウザの自動リロード
- テンプレートエンジンと絡めて作業の効率化
- Lintチェック
- もっと高度になれば、自動でFTPしてくれるように設定
などなど。
コマンドを打てるようになれば、作業の幅が広がりますし、
手動で行うことにより発生するミスが少なくなる体制をつくることができます。
学習コストは少しかかりますが、できる所から導入していこうと思います。
所感
- 名古屋のマークアップ界隈、JSが盛り上がっている
- 効率化には、みんな興味がある
- コマンドラインを叩いて制作するのが当たり前の風潮
- Node.js、Gulpは、フロントエンドエンジニアの必須スキル
- コマンドラインも慣れればとても協力な武器になる
- 社内全員が同じ環境で作業できるように整備する必要あり
- 社内教育をする必要がある
- エディタは、Sublime Textを使っている人が多そうな雰囲気
- コミュニティは情報共有する場としては、とても重要な役割を果たしている
Nodeのバージョン管理
- 導入ハードルが少し高い？と思った
- 各プロジェクトごとにバージョン管理ができる
- 案件ごとに、Node.jsのバージョンを変える必要があれば、重宝しそう
Nodeschoolにも参加してきました。
gulp
- gulpを導入して、制作の効率化を図る
browsersync
- gulpのプラグイン
- HTMLやCSSファイルを更新すると、ブラウザをリロードしてくれる機能（地味に便利）
- バグ？なのか、をコメントアウトしたら、動かなくなる
metalsmith
- 静的HTMLジェネレータ
- 簡単に言うと、SSIとかのように、ファイルを外部管理したりできる
- コンポーネント単位で設計が可能
- resourceフォルダとhtmlフォルダを分ける
- 元ファイルはresourceフォルダに格納
- コンパイルしたファイルはhtmlフォルダに格納
- 作業の効率化には、大きな役割を担ってくれそう
こんな記事も書きました。
インストール
sudo npm install metalsmith
参考）
メリット
- 共通部分を管理するには楽そう
- HTMLファイルで渡せる（組み合わせる前も渡せる）
Swig
Swig - A Node.js and Browser JavaScript Template Engine
- Javascriptのテンプレートエンジン
- Metalsmithと組み合わせて使う
- 繰り返し処理や変数などを使うことができる
- 基本は「{{ 中身 }}」で表現する
インストール
sudo npm install swig --save
参考）
editorconfig
- インデント設定などができる
- 簡単に導入可能
- 各エディタで導入方法が違うので、要確認
emmet
Emmet — the essential toolkit for web-developers
- 爆速コーディングするには必須ツール
- タイプミスを減らす
- 書く時間を減らす
- ナンバリングできる（このあたりを知らない人が多い）
- テキストをラップできる
- 各エディタで導入方法が違うので、要確認
チートシート
http://docs.emmet.io/cheat-sheet/
- 模写して、身体で覚える！
ダミー画像使うとき
Placehold.it - Quick and simple image placeholders
- http://placehold.it/350x150
- 数値を変えると、その大きさのダミー画像が表示される
- モック作りには良さそう
github
- 開発は主にGitで管理している
- 共有も楽
- 前のバージョンに戻すのも楽
- ブランチが、SVNより気軽に切れる
- 社内導入するべきツール
差分ファイルを取る方法
SourceTree
- 履歴をダブルクリックすると、そのバージョンに戻る
- 大人数で対応するときは、ブランチを使ったほうがいい
jenkins
- オープンソースの継続的インテグレーション（CI）支援ツールの一つ
- ビルドやデプロイ、テストといった作業の自動化や効率化を支援する
- ただし、メモリ食う
- gitでpushを検知したりできる
- shellコマンドを覚えないといけない
- pushしたときにメールを送るとかもできる
- FTP納品は最近はしてない！
- FTP納品する場合は別料金対応している
参考サイト
- Travis CI：https://travis-ci.org/
- GitLab：https://about.gitlab.com/
スタイルガイド
- コンポーネント集
- aigis：https://pxgrid.github.io/aigis/
- 日本人が作っている
- 最近はこちらに移行している
- その他では、hologram：http://trulia.github.io/hologram/ が有名
- 案件で導入してみたい
こんな記事も書きました。
aigisの導入に手間取っていたら、、、
なんと @nakajmg さんからコメントいただきました。
aigisの環境構築、v1.1.0でやりやすくなったと思うので試してみてください😂 / “「CSS設計とスタイルガイド」について発表してきた - https://t.co/B5wQS8ZOmL” https://t.co/IbaRcpRiE9
— じまぐ (@nakajmg) 2016年6月11日
@kobatatakayuki こちらこそありがとうございます！v1.1でもうまくいかないようでしたらissueにOSなどの環境をいただければこちらでも調査しますので💁
— じまぐ (@nakajmg) 2016年6月11日
こちら、無事に解決です(๑´ڡ`๑)
おわり。
追伸
今回のお話で、下記2冊は必読だと思った。。。
読み返そう。。。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (4件) を見る
Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール
- 作者: 塩谷啓,紫竹佑騎,原一成,平木聡
- 出版社/メーカー: インプレス
- 発売日: 2014/10/24
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (3件) を見る
