Advent Calendar 2014のフロントエンド周りまとめ

フロントエンド周りの技術は色々ありすぎて、どこから手をつけていいかわかりません。 Advent Calendarで人気の記事を見れば、今何が人気なのかがわかるかなと思い、まとめてみました。

2014年のAdvent Calendar一覧 - Qiitaから、フロントエンド周りに関係ありそうなものをピックアップし、総はてブ数でソートしました。(総はてブ数は 2015/01/03 15:00 時点)。それぞれで、人気トップ5の記事のリンクも貼っています。 ピックアップは、手動で適当にしたので、抜け漏れあるかもしれませが、ご了承ください。下に参考までに2013のAdvent Calendarも記載しています。

2014のAdvent Calendar

1. VirtualDOM Advent Calendar 2014 (1388 users)

   • 仮想 DOM が素晴らしいのはわかってるけどリアルDOMのことも忘れないでね。 
   • なぜ仮想DOMという概念が俺達の魂を震えさせるのか
   • Ractive.js の紹介 
   • Virtual DOMってどんだけ早いの？測ってみる 
   • Reactでサーバーサイドで生成したHTMLに対してDOMを初期化せずにReactComponentとして状態を更新する

2. JavaScript Advent Calendar 2014 (1313 users)

   • 私のJavaScript情報の集め方
   • IE10 以下を切る場合の JavaScript チェックリスト
   • 0行から始めるクライアントサイドJavaScript入門
   • 今更だけどPromise入門
   • なんかおまえは今まで実行したassertの回数を覚えているのか？あるいは新しいアサーションユーティリティのご提案 

3. Frontrend Advent Calendar 2014 (1186 users)

   • 俺のJSライブラリの世界観(2014末版)
   • 進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話 
   • Smashing Magazineのパフォーマンス改善ケースが凄まじい件 
   • 2014年末Webパフォーマンス関連の現状確認と先のはなし 
   • Gitのコミットメッセージを絵文字から始める

4. HTTP2 Advent Calendar 2014 (1146 users)

   • なぜHTTPSはHTTPより速いのか  
   • HTTP/2から見えるTLS事情 
   • HTTP2 のフロー制御
   • WiresharkでHTTP/2をパケットキャプチャする 
   • #HTTP2Study の軌跡 

5. Node.js Advent Calendar 2014 (997 users)

   • io.jsについて知っていること 
   • Stream今昔物語 
   • 細かすぎて伝わらない package.json 小ネタ三選 
   • Node-v0.10.34がはまったクロスルート証明書とOpenSSLの落とし穴 
   • requireの仕組み 

6. TypeScript Advent Calendar 2014 (425 users)

   • 「生JavaScriptで十分」な人にこそTypeScriptをおすすめしたい理由 
   • TypeScriptの行く先
   • TypeScriptの注目の型関連issue 
   • dtsmのご紹介
   • gulp-tscとgulp-typescriptの利用方法の違いについて

7. HTML5 Advent Calendar 2014 (302 users)

   • HTML5 登場からみるフロントエンド開発技術の進歩 
   • 画像を分割もしくは合体させてパフォーマンスは本当に変化するのか? 
   • 最近気になっているHTML5の最新技術に触れてみました 
   • 超音波通信やろうとして音の可視化（可聴域の特定周波数の判別など）をやった話【前編】
   • Brick(Web Components)がすごい 

8. 一人React.js Advent Calendar 2014 (260 users)

   • React.jsとは
   • React.jsとserver-side rendering
   • React.jsについてのリソース、そして締め
   • React.jsとFlux
   • React.jsがVirtualDOMを採用していて嬉しい事

9. WebRTC Advent Calendar 2014 (227 users)

   • WebRTCのデータチャネル解説
   • WebRTCにおけるNAT越えの課題へのアプローチ
   • WebRTCにて(S)RTCPが必要な理由 
   • WebRTCで「ピー」をやってみる
   • Mac版Chromeで、Firewallが越えられない話

10. Elm Advent Calendar 2014 (154 users)

    • Elmとはどんな言語か？その７つの特徴 
    • Haskell 的視点から見た Elm
    • ElmとHaskellの6つの非互換性 
    • すごいElm-0.14いまから使おう！
    • ElmのNative moduleを書く

11. WebGL Advent Calendar 2014 (136 users)

    • 生WebGL入門:初音ミクの美麗3Dモデルを表示する 
    • Flash Stage3D との比較から見えてくる WebGL のあり方について 
    • WebGL と GLSL で気軽にレイトレーシングに挑戦してみよう！
    • 物理演算でいろいろ落下させてみました 
    • PlaneGeometryをSin波で、はためかせる

12. milkcocoa Advent Calendar 2014 (102 users)

    • インタラクティブコンテンツを作ろう！milkcocoaで5分のチャットアプリ制作 
    • 社内ツールとしてmilkcocoaで付箋アプリを作ったらリモート可能な組織になった話(前編)
    • milkcocoa と Azure を使用してプライベート動画配信サイトを作るための初めの一歩
    • milkcocoaとgmaps.jsで、スマホ（と、まろ氏）の位置情報をリアルタイムに取得してみた 
    • milkcocoaでWebRTCのシグナリングをやってみた

13. tmlib.js Advent Calendar 2014 (98 users)

    • tmlib.jsのここがすごい!
    • [tmlib.js] tmlib.js でゲームプログラミング始めませんか？
    • [tmlib.js]tmlibで学ぶ、イベント駆動型のクラス設計
    • tmlib.jsでイクメンが知育アプリをつくる
    • tmlib.jsでゲームをつくってみよう！

14. Selenium/Appium Advent Calendar 2014 (83 users)

    • Docker で Selenium Grid の環境構築をもっと楽に！ 
    • Seleniumのテスト結果レポートをもっとおしゃれに 
    • Selenium + Capybara + Turnip で取り組んでること（まだ途中） 
    • IEで自動テストを動かすときにハマったあれこれ
    • Seleniumを動かすための環境の構成管理について 

15. KnockoutJS Advent Calendar 2014 (67 users)

    • KnockoutJSの紹介 
    • Rails x CoffeeScript x KnockoutJSでWebサービス作った 
    • KO + TypeScript で大規模 SPA 開発
    • KnockoutJS公式チュートリアルで学べる内容まとめ
    • KnowkoutJSでTrelloライクなWebアプリを作る

16. Vue.js Advent Calendar 2014 (46 users)

    • browserify + debowerify + vueifyを使ったvue.js component開発
    • Vue.jsを使ってBloggerの最新記事一覧を表示する 
    • Vue.jsでフィルタリングされた数を参照する 
    • 自作Vue.jsコンポーネントでv-transitionによるアニメーション 
    • Vue.jsでpopup componentを作ってみる 

17. Dart Advent Calendar 2014 (46 users)

    • Dartをはじめよう
    • 2014年のDartを振り返る
    • DartでCustom Elements
    • Dart2JSとCordovaでハイブリッドアプリ開発 
    • html5lib: Dart Serverでhtml5をparseする 

18. Haxe Advent Calendar 2014 (36 users)

    • Haxeが気になるOSXでWEBなエンジニアのために１年かけて人柱になった記録
    • libregexの移植 
    • HaxeとThreejsで3Dコンテンツを作る 初級編
    • Haxeを初めて使ってアプリ作った際のハマった個所やよかったところ
    • ActionScriptのThreadライブラリ（そうめん）をHaxe/OpenFLに移植した際にやったこと

19. これからはじめるGulp.js（全俺） Advent Calendar 2014 (32 users)

    • gulp-plumberとgulp-notifyを使ったデスクトップ通知 
    • bundler, rbenv, nodebrewでGulp環境を作ってみる 
    • Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する 
    • gulp-imageminを使った画像の最適化 
    • gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化 

20. CSS Advent Calendar 2014 (28 users)

    • Foundationよりcool! 軽量フレームワークPureを紹介
    • インタラクション実装におけるCSSとJSの棲み分け
    • ご注文はFont Awesomeですか？ 第1羽「ひと目で尋常でないスライドだと見抜いたよ」
    • Font Awesomeでモテカワスリムで恋愛体質の愛されWebサイト♪ を目指す
    • クリスマスなのでBEMを紹介する

21. d3.js Advent Calendar 2014 (24 users)

    • (翻訳記事)「再利用可能なチャートを目指して」（マイク・ボストック著） 
    • D3.js on AngularJSの実装パターン比較
    • D3でガントチャート作る
    • WordPressでD3.js（PageViewプラグイン） 
    • Ruby+d3.js+garb(Google-analytics-API)でユーザーの経路(パス)を描画

22. Backbone.js Advent Calendar 2014 (16 users)

    • Backbone.Routerに有限状態遷移機械を簡単に実装できるライブラリを作った 
    • なぜBackbone.Modelのchangeイベントが発火しないかについての2つの陥っていがちなパターン 

23. Webix Advent Calendar 2014 (8 users)

    • Listコンポーネント入門 
    • Webixの使い方入門 
    • WebixとD3.jsを使ってレスポンシブな地図を作成する 
    • WebixとD3.jsを使ってレスポンシブなグラフを作成する 
    • HTML要素にWebixコンポーネントを埋め込む 

24. PureScript Advent Calendar 2014 (7 users)

    • github見て、どんなモジュールがあるのか？とかを大まかに紹介とか 
    • pulpでPureScriptプロジェクトをビルドする
    • slamdataについて 
    • 【purescript】purescript-react を動かしてみるまで頑張る
    • PureScriptサイトまとめ 

25. Meteor Advent Calendar 2014 (4 users)

    • JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる
    • MeteorとPhaserの組み合わせで作る1bitコミュニケーションツール 
    • Meteorでjadeのススメ（朝9時に公開されるはず） 
    • MeteorのDDPをiOSから使う
    • meteorでAndroidアプリ動くかどうか試す 

26. Polymer Advent Calendar 2014 (2 users)

    • Polymer.importでWeb Componentsをlazy loadする 
    • vulcanizeでPolymer Web Componentsの初期ロードを速くする 
    • PolymerのLayout属性を使ってフレキシブルレイアウトを実現させる覚書 

2013のAdvent Calendar

参考までに、2013年のAdvent Calendar一覧 - Qiitaからも探してみましたが、数が少なく残念な感じになってしまいました…

1. AngularJS Startup Advent Calendar 2013 (1269 users)

   • AngularJSのMVWパターンを理解する
   • お前のAngular.jsはもうMVCではない。と言われないためのTutorial
   • AngularJSを使ったWebアプリのアーキテクチャ設計
   • AngularJSのパフォーマンス改善入門
   • AngularJSとTwitter Bootstrapを組み合わせて使う

2. JavaScript - Client Side - Advent Calendar 2013 (561 users)

   • 新・三大JavaScript タッチ対応ライブラリ比較(Hammer.js/QuoJS/ TouchSwipe)
   • Dropbox Datastore APIの使い方とか色々
   • WebStormによるJavaScript開発のすすめ 
   • IE9移行で使えるDOM、ES5、HTML5のAPI達！ 
   • 「Githubでプルリクにいいねしたい」願望を叶えるUserScriptを開発しました 

3. JSX Advent Calendar 2013 (368 users)

   • とあるプログラミング言語処理系のセルフホスティング化に携わった 
   • JavaScriptで高速なコードを書く際の注意点。または私は如何にして心配するのを止めてJSXを作ることにしたか 
   • JSX誕生秘話 
   • 「Haxerから見たJSX」という感想文を書いてみた。
   • JavaScriptバインディングの書き方 

4. Grunt Plugins Advent Calendar 2013 (306 users)

   • タスクを並列超速化するgrunt-parallelizeを紹介するよ 
   • 各種ブラウザを同期して手軽に複数環境での確認ができるようになるgrunt-browser-syncについて紹介するよ 
   • イケてるスタイルガイドを簡単に作れるgrunt-kssについて紹介するよ
   • そのページで使われているCSSだけまとめてくれるgrunt-uncssについて紹介するよ
   • JSコードの品質チェックをしてくれるgrunt-platoについて紹介するよ

5. Haxe Advent Calendar 2013 (36 users)

   • Haxe白魔法使い入門、基本編。Enumの実用パターン集。
   • IntelliJ IDEA CEでHaxe Flash(OpenFL)の開発環境を作る
   • Haxe黒魔術使い入門とWebのセキュリティの話
   • Unity4.3新機能とか Haxeで何かつくったはなし。(前編 ： Haxeビルドまで。)
   • Haxeの文字列

[amazonjs asin="4774165786" locale="JP" title="フロントエンドエンジニア養成読本 HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! (Software Design plus)"]