コネクティ流フロントエンド向けサイト制作時のツール、プラグインまとめ

こんにちは。Web制作チームの平田です。
今見て頂いているこのWebサイトの制作を担当しました。
普段は弊社サービスを利用した企業サイトのリニューアルをメインに担当していますが、フロントエンド側の知識で何か少しでも役立てるなら、と今回編集局の一員としてこのサイトの制作に携わりました。
有り難い事に仕事は順調に増えていますが、当然その分人手が必要不可欠なため、このサイトを立ち上げる事で一人でも多くの人の目に留まって興味を抱いてくれる人がいれば、と思っています。

この記事では制作時に使用した、またはよく使用するツール・プラグインなどをまとめて紹介したいと思います。
また、これからコネクティの求人に応募しようと思っているフロントエンドの方にも応募する指標になるかと思います。

Editor

Sublime Text 3

一時期流行りに流行ったSTです。未だに3はβのままですが愛用しています。
弊社は特にエディタに縛りなど無いので、エディタにこだわりがあるような方は大歓迎です。
スニペット関連を除けば頻用しているのは以下ぐらいでしょうか。FTPサーバを経由するような制作はSublimeSFTPなども利用します。

• All Autocomplete
  オートコンプリートの機能強化版。マッチする文字列を補完
• AutoFileName
  画像タグのパスを記述する際などにサジェストしてくれて、且つwidthやheightも自動で記述してくれる
  相対パスだけかと思ったらルートからもOK
• BracketHighlighter
  開始/終了タグの強調
• Emmet
  HTML/CSSをショートカット+スニペットで記述出来る
  数年前はZen-Codingと呼ばれていました。
• SublimeLinter
  文法チェックをリアルタイムに行い、エディタ上で警告してくれる。言語ごとに別途プラグインのインストールが必要
• sublime-multi-number-input
  ST3用の連番入力補助プラグイン
• eCSStractor
  HTMLからCSSのクラス名を抽出(Sass/ScssなどのネストやBEM対応)
• Tag
  閉じタグ入力補完

Browser

Google Chrome

普段遣い以外にもDeveloper ToolsのConsoleやElementsでのテストは実行しやすく、Networkで監視、Timelineでパフォーマンスチェック、Resourcesでクッキーやストレージの管理などなど欠かせないツールの一つとなっています。

Tools

Sass+Compass

弊社フロントエンドでは主にSass(+Compass)を利用してコーディングしています。記法はScssです。
普段のサイト構築は勿論、レスポンシブWebデザインなどを構築する際はmixinやextend、functionは工数短縮や運用面で強力な助けとなっています。

Grunt

言わずと知れたフロントエンド御用達タスクランナーです。もはや無いと仕事出来ない身体にさせられてしまいました。
以下はこのサイトで使用したプラグインになります。

• grunt-contrib-uglify
  JavaScriptファイルの結合・難読化
• grunt-contrib-compass
  Compassのbuild
• grunt-este-watch
  ファイル更新監視。grunt-contrib-watchより高速に動作する
• grunt-spritesmith
  CSS Sprite自動化
• grunt-autoprefixer
  CSS prefix付与・削除の自動化
• grunt-browser-sync
  簡易サーバ機能・ブラウザ間同期・ライブリロード
• grunt-notify
  Gruntのログ監視でタスクの完了/失敗を通知。WindowsではSnarlと連携しています

este-watchでファイル更新を監視し、Sassが更新されたらcompass実行、sprites画像が更新されたらspritesmithとcompass、browser-syncでブラウザを自動でリロードしBuild時にuglifyとautoprefixerでJavaScriptのMinifyとcss prefixの削除、エラーなどのログはnotifyで監視…といった構成です。
ちなみにJSLintはエディタ側(SublimeLinter)で補完しているのでGruntには含んでません。
サイトによってはgrunt-imgなどで画像ファイルの圧縮もやっています。
gulpにも興味はありますが、ひとまずチーム内で共有出来ているのはGruntなのでまずはチーム全員でGruntを使いこなしてから徐々に選択肢を増やしていこうと考えています。

Git

以前まではバージョン管理はSubversionを利用していました。ここ半年ぐらいでようやくチームごとGitに移行しまして、サイトの運用などブランチが切りやすいため更新の衝突が無くなりました。
タスク管理にBacklogを利用しているのですが、Backlogのサービスの一つでリポジトリなどさくっと作れてプロジェクトと紐付けられるため管理が楽です。

Charles

本番環境のファイルを弄ったり、Gruntで簡易サーバを立ち上げてない場合などローカルサーバのApacheを経由して各デバイスからアクセスしたりなど幅広く使用しています。帯域制御出来るのも地味に便利ですね。

Chatwork

細かな技術共有やコミュニケーションはChatworkでやりとりしています。導入時はSlackと迷いましたがいざという時にサポートを受けやすく、Webディレクターやエンジニアに限らず、人事などのバックオフィス部署ともやり取りするため使い慣れた日本語で操作できるChatworkを使用しています。Slackはどちらかといえば技術者寄りに評判ですよね。
最近ではChatworkAPIも徐々に拡張されており、BOTとの連携も捗ります。

Adobe Creative Cloud

Webデザイン/サイト運用部は全員CCに加入しています。最新版のPhotoshopからEdge Inspectなどフロントエンド向けなサービスも使えます。

以上が主に使用したツールになります。勿論ここに登場したツールが使えないと駄目、という事はありませんし、他に興味があるツールがあれば進んでチャレンジしていける環境だと思います。

コネクティではそんなガジェット好き、効率化好きなエンジニアを募集しています！興味がある方は是非こちらからご応募下さい！