読者です 読者をやめる 読者になる 読者になる

僕は僕で誰かじゃない

ビジネスとテクノロジーと健康についてあれこれ

MENU

効率化を考えたコーディング制作環境@名古屋 NaCSS Vol.1より。

今更ながら、先日の名古屋遠征の時のメモ。

758markup.doorkeeper.jp

作業の効率化についてあれこれ。

今回の講師は、北海道で活動されている、@h2ham(通称ハムさん)。
北海道では、定期的にSaCSS(サックス)という勉強会を開催しております。

話を聞いてみると、最近のフロントエンドの実装方法(フロー)として、
Node.jsを駆使して、「ターミナル(いわゆる黒い画面)」から
「コマンド」を打つことが主流となってきているようです。

社内では、まだこの手のフローを導入できてないっていう話をしたら、
早く導入したほうがいいですよ!と激しくオススメされました。

  • Sassのコンパイル
  • CSS・JSファイルの圧縮
  • ブラウザの自動リロード
  • テンプレートエンジンと絡めて作業の効率化
  • Lintチェック
  • もっと高度になれば、自動でFTPしてくれるように設定

などなど。

コマンドを打てるようになれば、作業の幅が広がりますし、
手動で行うことにより発生するミスが少なくなる体制をつくることができます。

学習コストは少しかかりますが、できる所から導入していこうと思います。

所感

  • 名古屋のマークアップ界隈、JSが盛り上がっている
  • 効率化には、みんな興味がある
  • コマンドラインを叩いて制作するのが当たり前の風潮
  • Node.js、Gulpは、フロントエンドエンジニアの必須スキル
  • コマンドラインも慣れればとても協力な武器になる
  • 社内全員が同じ環境で作業できるように整備する必要あり
  • 社内教育をする必要がある
  • エディタは、Sublime Textを使っている人が多そうな雰囲気
  • コミュニティは情報共有する場としては、とても重要な役割を果たしている

Nodeのバージョン管理

h2ham.net

  • 導入ハードルが少し高い?と思った
  • 各プロジェクトごとにバージョン管理ができる
  • 案件ごとに、Node.jsのバージョンを変える必要があれば、重宝しそう

Nodeschoolにも参加してきました。

www.kobatatakayuki.com

gulp

  • gulpを導入して、制作の効率化を図る

browsersync

www.browsersync.io

  • gulpのプラグイン
  • HTMLやCSSファイルを更新すると、ブラウザをリロードしてくれる機能(地味に便利)
  • バグ?なのか、をコメントアウトしたら、動かなくなる

metalsmith

www.metalsmith.io

  • 静的HTMLジェネレータ
  • 簡単に言うと、SSIとかのように、ファイルを外部管理したりできる
  • コンポーネント単位で設計が可能
  • resourceフォルダとhtmlフォルダを分ける
  • 元ファイルはresourceフォルダに格納
  • コンパイルしたファイルはhtmlフォルダに格納
  • 作業の効率化には、大きな役割を担ってくれそう

こんな記事も書きました。

www.kobatatakayuki.com

インストール

sudo npm install metalsmith

参考)

h2ham.net

メリット

  • 共通部分を管理するには楽そう
  • HTMLファイルで渡せる(組み合わせる前も渡せる)

Swig

Swig - A Node.js and Browser JavaScript Template Engine

  • Javascriptのテンプレートエンジン
  • Metalsmithと組み合わせて使う
  • 繰り返し処理や変数などを使うことができる
  • 基本は「{{ 中身 }}」で表現する

インストール

sudo npm install swig --save

参考)

qiita.com

editorconfig

editorconfig.org

  • インデント設定などができる
  • 簡単に導入可能
  • 各エディタで導入方法が違うので、要確認

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

github.com

  • 開発は主にGitで管理している
  • 共有も楽
  • 前のバージョンに戻すのも楽
  • ブランチが、SVNより気軽に切れる
  • 社内導入するべきツール

差分ファイルを取る方法

h2ham.net

SourceTree

  • 履歴をダブルクリックすると、そのバージョンに戻る
  • 大人数で対応するときは、ブランチを使ったほうがいい

jenkins

jenkins.io

  • オープンソースの継続的インテグレーション(CI)支援ツールの一つ
  • ビルドやデプロイ、テストといった作業の自動化や効率化を支援する
  • ただし、メモリ食う
  • gitでpushを検知したりできる
  • shellコマンドを覚えないといけない
  • pushしたときにメールを送るとかもできる
  • FTP納品は最近はしてない!
  • FTP納品する場合は別料金対応している

参考サイト

スタイルガイド

こんな記事も書きました。

www.kobatatakayuki.com

aigisの導入に手間取っていたら、、、
なんと @nakajmg さんからコメントいただきました。

こちら、無事に解決です(๑´ڡ`๑)

おわり。

追伸

今回のお話で、下記2冊は必読だと思った。。。
読み返そう。。。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール