昨年の”2014年 Web 制作に使い始めてよかったツールとかいろいろまとめ” に引き続き Web 制作業4年目のぼくが2015年に取り入れてよかったあれこれリストアップしてみます。昔からあるものも含まれていますが、その辺り2015年と共に水に流して頂きますようお願いします。
React
https://facebook.github.io/react/
JavaScript フレームワーク戦争を語ると話が長いですが、ぼくは React 採用しました。Material UI など既にコンポーネントが豊富なことや ES6 で書ける、一方通行のバインディングなど魅力的です。
react-starter-kit
https://github.com/kriasoft/react-starter-kit
- React
- Express
- Flux
- ES6+
- JSX
- Babel
- PostCSS
- Webpack
- BrowserSync
の React でアプリケーションやサイトを作るに必要なものが一通り揃っています。試しに Web アプリケーションやサイトを作ってみる時によいです。
Webpack でゴリゴリな部分も多く、既存のプロジェクトに組み込むことは難しいですが、設定などのつまみ食いをするのにも適しています。
Babel + ES6
JavaScript 苦手でしたが、ES6 でかなりすっきり自然に書けるなーと個人的に大変喜ばしいです。Class と Arrow function 辺りめっちゃ気に入ってます。
GitHub の lukehoban/es6features を見ると機能や書き方など一通り分かります。
Browserify
CommonJS の require などをクライアントサイドの JS でも使えるようにするために必要となり、重宝しました。Baberify を組み合わせて ES6 や JSX などにも対応できます。キャッシュを併用し差分のみをビルドすることでビルドにかかる時間を短縮する Watchify とも併用したりします。
後述する Webpack よりもシンプルな機能で導入しやすく、Gulp と組み合わせるのも容易なのが魅力です。JS のモジュール管理により設計が一変したと思います。残念ながら React など Component 指向で設計していくには機能が足りず、ぼくは Webpack に移りました。
Webpack
React 導入の際に、Browserify の置き換えとして採用しました。設定など結構深いので Browserify より導入のハードルは高いかもしれません。gulp や BrowserSync と組み合わせるのも若干手間ですね。gaearon/react-hot-loader などは Webpack のみなのでこの辺り使いたければ必須です。Component 単位の設計が不要であったり、Watchify でまかなえるコンパイルスピード (モジュール、ソースコード量) であれば Browserify を使います。
Slack
チャットツール的なもので今年から LENS にて採用し、ぼくが務める会社でも利用しています。当初ドメインという単位が謎でしたが、そこへメンバーを追加でき、チャンネルというチャットグループ的なものをプロジェクト単位で作成可能、一部のマークダウンも使用可能で Gmail や Backlog、GitHub など、外部のツールと手軽に連携可能な拡張性の高さが魅力です。
FontPrep
https://github.com/briangonzalez/fontprep
フォントのサブセット化や Web フォントへの変換などをまとめて行えるツールです。GitHub では2年以上コミットがなく開発は止まっているみたいですが、特に不自由なく使えます。Homebrew Cask からインストール可能です。
Atom
今年になって本体側でマルチバイト文字のバグが修正され、日本語でもストレス無く使えるようになりました。導入方法などは Atom 導入で躓かない Git と Package sync の初期設定 に書きましたので興味があれば是非
Hackmd
ブラウザ上で動作する Markdown エディタで、複数人同時編集も可能です。勿論ライブプレビューもあります。打ち合わせの議事録などはこれで複数人同時に編集しながら書き留め、後でちょっとまとめて Wiki にするような使い方をしています。
ポモドーロ・テクニック
Web は全然関係なくかなり古くからあるものですが、
- 25分 = 1ポモドーロ → 1つのタスクに取り組む
- 1ポモドーロ終わったら必ず5分休憩
- 4ポモドーロ終わったら15分休む
というサイクルを繰り返す手法です。
25分は一番集中してノッてくるタイミングなので導入時の拒否反応はすごいですが、長い打ち合わせの時など、必ずだらけてくるので取り入れています。
話題がそれたり “たられば” の非生産的な会話が減るのでおすすめです。
まとめ
以前からあったものを個人的に2015に取り入れたものが多くなってしまいました。
本文には書きませんでしたが HTTP2, HSTS で SSL の導入もしやすくなってきてハッピーですね。
主観ですが年々 JavaScript が必要になる割合が増えているように思います。コンポーネントが今後どのような形でブラウザに取り込まれるのかはまだ不明ですが、まだ暫くの間は JavaScript フレームワークを利用したコンポーネント実装が続くんじゃないかと思っています。そうなると今後 CSS フレームワークがコンポーネントになるのか、そのまま残っていくのか、面白そうだなと思いました。