JSer.info #204 - 今年もDailyJSによるJavaScript開発者向けアンケートの受付が開始されました。
DailyJS: JavaScript Developer Survey 2014からどんなターゲット向けにJavaScriptを書いてるか、使ってるライブラリやテストについて等のアンケートをやっています。
2010年から継続的に行われているアンケートなので、是非参加しましょう。
The State of JavaScript in 2015 - Jimmy Breck-McKyeという記事では、ライブラリとテクノロジーの変化にどう対応していくべきかについて書かれています。
AngularJSやEmberのようなモノリシックなフレームワークではなく、専門の役割を持ったライブラリを使うことで、
レガシーになったプロジェクトに新しいテクノロジーを導入するときも全てを書き換えないでインクリメンタルに変更していける事や、
新しいライブラリやテクノロジーを採用する際に気をつける3つの教訓などの考えが書かれています。
こういうアーキテクチャの再考が最近多いのは、ReactのようなVirtual DOMを持つViewを専門的に扱うライブラリなどがでてきて、
今まではコスト的にひっかかっていたやり方も上手く行くケースが見えてきたのもあるかもしれません。
なぜVirtual DOMか -「設計と速度が両立する」
via VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
Functional ProgrammingというスライドではJavaScriptにおける関数型プログラミングについて書かれています。
オブジェクト指向的に書いた場合と、関数型的に書いた場合を比較しながら紹介しているため考え方が分かりやすいです。
また、JavaScriptでは末尾呼出し最適化が実装されてない事やパターンマッチ、遅延評価、同図像性（Homoiconicity）など言語的に難しい部分はありますが、関数型プログラミングのアプローチを知る分にはよくまとまっていると思います。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release 0.11.1 · yyx990803/vue
github.com/yyx990803/vue/releases/tag/0.11.1
Vue.js 0.11.1リリース。
v-componentのスコープの変更、wait-for属性で特定のeventがemitされるまで待てるように、v-styleにdataとしてCSSオブジェクトを渡してスタイルを適応出来るようになるなど
ESLint 0.10.0 released - ESLint
eslint.org/blog/2014/11/eslint-0.10.0-released/
ESLint 0.10.0リリース。
CLIがデフォルトでnode_modulesを無視するように、拡張子なしのファイル名のみの指定が可能になり、別途オプションとして拡張子のデフォルト値を設定出来るようになる等
IE Web Development Support Moving to Stack Overflow
IEの開発に関する質問サポートはStack Overflowに移行するとの話
DailyJS: JavaScript Developer Survey 2014
dailyjs.com/2014/12/01/javascript-survey/
DailyJSのJavaScript開発者アンケート 2014の受付が開始された
アーティクル
The State of Flux
reactjsnews.com/the-state-of-flux/
Fluxアーキテクチャ関連のライブラリのまとめ、それぞれの実装的な特徴
Getting Started with React and JSX
www.sitepoint.com/getting-started-react-jsx/
Reactのチュートリアル。
props、state、eventと順に紹介してる
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
qiita.com/dayoshix/items/0d4043bf7dbaa1dc9184
Chrome開発者ツールのTips。
gifと共に機能を紹介してて分かりやすい
The State of JavaScript in 2015 - Jimmy Breck-McKye
www.breck-mckye.com/blog/2014/12/the-state-of-javascript-in-2015
AngularJS 2.0の発表でJavaScriptについて再考する話。
新しいテクノロジーを扱う時はちゃんと疑問を持って接する事、企業製だからといって信用するのは別問題、モノリシックなフルスタックフレームワークよりも役割が分けられたライブラリを選ぶ。
役割が分けられたライブラリを使う事でレガシーなプロジェクトに新しいテクノロジーを導入するときも全てを書き換えないでインクリメンタルに変更していける。
著名なライブラリがフルスタックなのか、特定の役割だけを持っているかや、
今後どのようにライブラリを選び開発していくかについて。
What's in a Function Name? - Bocoup
bocoup.com/weblog/whats-in-a-function-name/
JavaScriptの関数名について。
関数定義や関数式、即時実行、newの場合、ES6のletやexportなどのそれぞれの場合に"関数名"がどうなるか。
またJSHintによるチェックやデバッグに役立つdisplayNameプロパティについて
Custom Elements - Web Components を構成する技術: Tender Surrender
blog.agektmr.com/2014/11/custom-elements-web-components.html
Custom Elementsについての解説。
Custom Elementsの作り方、仕組み、ライフサイクルコールバック、ユースケースについて
Goodbye, Layout Invalidation: Animating SVGs With CSS Transforms | Charlie Marsh
www.princeton.edu/~crmarsh/svg-performance/
動かすSVG要素を分けてCSS transform等を使ってGPUで処理が出来るようにチューニングすることで、60FPSが出るようにパフォーマンス改善をする話
スライド、動画関係
React Through the Ages // Speaker Deck
speakerdeck.com/zpao/react-through-the-ages
Reactの今後についてのスライド。
Reusable ComponentsがFacebookの中には既に10000個ある。
1.0に向けてAPIの安定化/修正、ES6 Classesへの対応、CSS in JS、Web Worker対応、レイアウトやアニメーション等をあげている
ReactJS: Keep Simple. Everything can be a component! // Speaker Deck
speakerdeck.com/pedronauck/reactjs-keep-simple-everything-can-be-a-component
Reactの特徴について分かりやすくまとめられているスライド。
Immutable、Virtual DOM、PropとState、DRYにするためのMixin、Isomorphicについて
Functional Programming
scott.sauyet.com/Javascript/Talk/2014/01/FuncProgTalk/
関数型プログラミングについてのスライド。
オブジェクト指向との考え方の違い、DeclarativeとImperative、まだJSでは扱えない部分について(末尾最適化等)、具体的にOOPからFPへどう書き換えるかの例等
サイト、サービス
ペパボのフロントエンドスタンダード
pepabo.github.io/docs/frontend/standard.html
ペパボによるエンジニア、デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化したもの。
ソフトウェア、ツール、ライブラリ関係
decadecity/css-specificity-map
github.com/decadecity/css-specificity-map
CSSの詳細度グラフのデータを作るライブラリ
- The Specificity Graph – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
- CSS specificity graphs | Blog | Decade City
knsv/mermaid
テキストからD3を使ったフローチャートやダイアグラム等の図を作成してくれるライブラリ
krasimir/atomus
Node.js環境でDOMを含めたクライアントサイドのコードをテストするライブラリ。
jsdomを使っていて、テストを実行する場所となるHTMLを渡して、クリックなどのイベントを起こしてテスト出来る
serratus/quaggaJS
JavaScriptで書かれたバーコードリーダライブラリ。getUserMediaを使ってリアルタイムに処理したり、画像から検出したりできる
Handsontable - JavaScript data grid editor. Excel-like grid editing with HTML & JavaScript
Excelライクなデータグリッドエディタ。
依存するライブラリなしで利用できる
書籍関係
Introduction | Full Stack JavaScript Engineering
フロントエンド全般についての知識について書かれたGitBookを使った電子書籍
Amazon: 改訂版 Webデザイナーのための jQuery入門: 髙津戸 壮, 小原 司
www.amazon.co.jp/dp/4774169447?tag=amazon0abac-22
「WebデザイナーのためのjQuery入門」の改訂版
