あるフロントエンドエンジニアの1日

Frontrend Advent Calenderの14日目の記事です。

風邪引いてちょっと遅れました…。

先週ですが、札幌でSaCSS Special4 Frontrend in Sapporoというイベントで講演させていただく機会がありました。 自分は"黒い画面"ことターミナルやコマンドに慣れていない方に興味を持ってもらおうという感じで、お話をさせていただきました。

ターミナルに興味が出てきたところで、「どうやって作業してんだろ？」っていうのが見ないと分からなかったりもすると思います。

自分は日常的にターミナル内で作業してるのですが、こんな感じでフロントエンドに関わる作業するのかなーという一例として書いてみます。あくまで イメージです。

• 10:00
  • 出社してiTerm2を立ち上げる。
  • tmuxとtmuxinatorを使って、その日の作業に対応した、paneとかwindowとか指定してる。
  • メールチェックはVmailかAirmailを使い分けしてる。何か返信とかはAirmailで、閲覧はVmailっていうのが多い。
• 11:00
  • Vimをエディタとして使ってる。
  • 大体tmuxのpaneを1つvim用に開いておいてそこで作業してる。ファイルとかは大体前日の続きというのが多いので、Unite.vimで開いたことあるファイルを検索して開く。
  • 一度ファイル開いたら大体のファイル開いたりという作業はctrlp.vimを使うことが多い。
  • Vimのタブ毎に開いてるプロジェクトが分かれてる感じにしてる。大体1つのタブに4つくらいは画面分割してファイルを並べる。多いと8個とか。
• 12:00
  • 大体関わってるプロジェクトではSassとかStylus使ってる。
  • 上記のコンパイルとかするのにGrunt使ってるのでこれに専用にtmuxのpane割り当てる。
• 14:00
  • 一段落してGitを使ってcommitしたりpushしたりmergeしたり。
  • リポジトリの履歴なんかはさくっとtigとかVimの中からgitvを使う。その時の状況により。
• 15:00
  • GitHubを使用したりすること多いので、hubとかgit-extras使って省力化してる。
  • 途中で「このfunction名どこで使ってるのかいな…」ということでack使って検索かける。検索がもっと速いって言われるSilver Searcherはあんまり好みじゃない。
• 16:00
  • 「このメソッド何だっけ…」と思ってDashを使って検索。大体GUIの操作というかアプリ開いたりなんだりはAlfredからやってる。
  • ファイル検索もAlfredからやること多い。普通にパスを入れてくと選べるので便利。
  • Alfredの万能感ハンパねえ。
• 17:00
  • JSONのレスポンスが見にくいので、jqコマンドで整形しておいたり。いらないレスポンスは削ったりする。
  • Wikiのドキュメントを追記するのに自分はWiki形式よりMarkdownが良いので、pandocで変換。ドキュメント関係はこれ1本で済んでる。
  • MarkdownはVimで書いて、vim-quickrun使って、Marked2を使ってプレビュー。
• 19:00
  • styledoccoとjsdoc3のドキュメントを更新しておく。
  • この作業もやっぱりGrunt使って作業。インターフェース一緒なので良い。
  • お疲れさまでした。

上記はフィクションですが、大体こんな感じかなと。他にサーバーでの作業が必要ってことで、ssh使ったりとかもありますけど。 慣れると(ほぼ)ターミナルで作業が完結して、キーボードしか使わなくなるので便利に思えます。もちろんブラウザでの作業とかありますけど。

まあ、あんまりフロントエンドっぽくない話だなーって気もしますが、こういう人間もいたりするってことで。

それではみなさま良いCUIライフを送ってください。

Backliftが何だか変化してた

Backlift | Turn your design into a functional website

BackliftっていうWebサービスがありまして，今年の4月くらいに自分は知ったんですがどんなサービスかというとBackbone.jsに最適なAPIが既に用意されており Dropboxに作られるソースをいじっていけば，自分のWebアプリとして公開できるという中々ステキなサービスです．まあ最適なAPIって要はRESTfulなAPIですね． DropboxにソースできるからGitとか使わんでも簡単なバージョン管理できるしねーっていう．

詳しくはこちらなどからドキュメント見れます．

地味に

• *.md --> .html (processed with the python markdown module)
• *.sass/.scss --> .css (processed using the compass compiler)
• *.less --> .css (less compiler)
• *.coffee --> .js (coffeescript compiler)
• *.jst --> .js (underscore template compiler)
• *.handlebars --> .js (handlebars template compiler)

あたりはconfig.ymlに指定しておくとコンパイルしてくれるそうな．

以前見たときはどちらかというと，Backbone.js駆使してこんなことできるよーっていうテンプレートが何種類かあるみたいなのがウリだったんですが，今日久々に見てみたら サイト自体リニューアルしていて，どちらかというとドキュメントとかブログとかを簡単に作れますよー，Backbone.js使ってのアプリもできますけどね．くらいのスタンスに変わってました．

こんな感じ．

なんか，より使いやすい感じになっていました．やりたい人はガリガリ自分でJavaScript書いて，API叩けばサーバー要らずのWebアプリできるし，そこまで必要ないわって人でもgh-pagesの代わりに使えそうになってた． ブログのテンプレートも用意されてたから，Jekyllの代わりにもなるかもしれないしね．

ということで…何か開発者でも，Backbone.js使いたいけどサーバー作れないし…って人とかパパッとプロトタイピングみたいな用途にも向くんじゃないでしょうかね．

DOM挿入系の速度

DOMに色々入れるアレ。先日ちょっと実装の時に気になって調べたんですが。

大体の場合は elem.appendChild() > elem.insertAdjacentHTML() > elem.innerHTML の順番でパフォーマンスが良い感じ。

一例

ただ、他の結果見てると条件によって結構左右されるようですが。 elem.appendChild() + document.createDocumentFragment()の 組み合わせが大量にDOM入れる時には最強か。

これ読むと、 elem.innerHTML よりも elem.insertAdjacentHTML() の方が速いって書いてるんだけど、たまに遅い結果も見るんだよな…何でだろう。

ちなみに知ってる人は知ってると思いますが、jsPerfはサイトに検索機能が無いので、目的のもの探すときは

site:http://jsperf.com/ insertAdjacentHTML

のようにググると幸せ。

HTML5 ROCKSの翻訳がデプロイされた

非同期JavaScriptプログラミング - HTML5アプリケーションの為の$.Deferredのパワー - HTML5 Rocks

ちょっと前からチマチマとやっていた翻訳のPull Requestが採用されました。後半は@agektmrさんにむっちゃレビューを頂いて 大変に感謝の気持ちで一杯です。「自信ないな…」という所は逃さずにコメント頂きました。なぜか、タイトルの日本語は出てないんですけど。

これからも、Githubにリポジトリ移ったことだし、チマチマと翻訳していきたいです。結構日本語になってないの多いっぽいですし。 そして、英語力アップさせたい…。