Fork me on GitHub

2014-12-02のJS: JavaScript開発者アンケート、フレームワーク or ライブラリ、関数型プログラミング

Edit on GitHub 編集履歴を見る

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)など言語的に難しい部分はありますが、関数型プログラミングのアプローチを知る分にはよくまとまっていると思います。


ヘッドライン


Release 0.11.1 · yyx990803/vue

github.com/yyx990803/vue/releases/tag/0.11.1

JavaScript library ReleaseNote

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/

JavaScript Tools ReleaseNote

ESLint 0.10.0リリース。

CLIがデフォルトでnode_modulesを無視するように、拡張子なしのファイル名のみの指定が可能になり、別途オプションとして拡張子のデフォルト値を設定出来るようになる等


IE Web Development Support Moving to Stack Overflow

social.msdn.microsoft.com/Forums/ie/en-US/8ba70824-dba2-4425-bc75-247c2c29bde1/action?threadDisplayName=ie&forum=iewebdevelopment

MS IE

IEの開発に関する質問サポートはStack Overflowに移行するとの話


DailyJS: JavaScript Developer Survey 2014

dailyjs.com/2014/12/01/javascript-survey/

JavaScript

DailyJSのJavaScript開発者アンケート 2014の受付が開始された


アーティクル


The State of Flux

reactjsnews.com/the-state-of-flux/

Flux library まとめ

Fluxアーキテクチャ関連のライブラリのまとめ、それぞれの実装的な特徴


Getting Started with React and JSX

www.sitepoint.com/getting-started-react-jsx/

React tutorial

Reactのチュートリアル。

props、state、eventと順に紹介してる


フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita

qiita.com/dayoshix/items/0d4043bf7dbaa1dc9184

Chrome debug tools

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

JavaScript AngularJS library thought

AngularJS 2.0の発表でJavaScriptについて再考する話。

新しいテクノロジーを扱う時はちゃんと疑問を持って接する事、企業製だからといって信用するのは別問題、モノリシックなフルスタックフレームワークよりも役割が分けられたライブラリを選ぶ。

役割が分けられたライブラリを使う事でレガシーなプロジェクトに新しいテクノロジーを導入するときも全てを書き換えないでインクリメンタルに変更していける。

著名なライブラリがフルスタックなのか、特定の役割だけを持っているかや、
今後どのようにライブラリを選び開発していくかについて。


What's in a Function Name? - Bocoup

bocoup.com/weblog/whats-in-a-function-name/

JavaScript

JavaScriptの関数名について。

関数定義や関数式、即時実行、newの場合、ES6のletやexportなどのそれぞれの場合に"関数名"がどうなるか。

またJSHintによるチェックやデバッグに役立つdisplayNameプロパティについて


Custom Elements - Web Components を構成する技術: Tender Surrender

blog.agektmr.com/2014/11/custom-elements-web-components.html

JavaScript WebComponents 動画

Custom Elementsについての解説。

Custom Elementsの作り方、仕組み、ライフサイクルコールバック、ユースケースについて


Goodbye, Layout Invalidation: Animating SVGs With CSS Transforms | Charlie Marsh

www.princeton.edu/~crmarsh/svg-performance/

SVG performance

動かすSVG要素を分けてCSS transform等を使ってGPUで処理が出来るようにチューニングすることで、60FPSが出るようにパフォーマンス改善をする話


スライド、動画関係


React Through the Ages // Speaker Deck

speakerdeck.com/zpao/react-through-the-ages

React スライド

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 スライド

Reactの特徴について分かりやすくまとめられているスライド。

Immutable、Virtual DOM、PropとState、DRYにするためのMixin、Isomorphicについて


Functional Programming

scott.sauyet.com/Javascript/Talk/2014/01/FuncProgTalk/

JavaScript 関数型プログラミング スライド

関数型プログラミングについてのスライド。

オブジェクト指向との考え方の違い、DeclarativeとImperative、まだJSでは扱えない部分について(末尾最適化等)、具体的にOOPからFPへどう書き換えるかの例等


サイト、サービス


ペパボのフロントエンドスタンダード

pepabo.github.io/docs/frontend/standard.html

JavaScript CSS tutorial document

ペパボによるエンジニア、デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化したもの。


ソフトウェア、ツール、ライブラリ関係


decadecity/css-specificity-map

github.com/decadecity/css-specificity-map

CSS JavaScript tools

CSSの詳細度グラフのデータを作るライブラリ


knsv/mermaid

github.com/knsv/mermaid

JavaScript

テキストからD3を使ったフローチャートやダイアグラム等の図を作成してくれるライブラリ


krasimir/atomus

github.com/krasimir/atomus

JavaScript DOM node.js testing library

Node.js環境でDOMを含めたクライアントサイドのコードをテストするライブラリ。

jsdomを使っていて、テストを実行する場所となるHTMLを渡して、クリックなどのイベントを起こしてテスト出来る


serratus/quaggaJS

github.com/serratus/quaggaJS

JavaScript library

JavaScriptで書かれたバーコードリーダライブラリ。getUserMediaを使ってリアルタイムに処理したり、画像から検出したりできる


Handsontable - JavaScript data grid editor. Excel-like grid editing with HTML & JavaScript

handsontable.com/

JavaScript library

Excelライクなデータグリッドエディタ。

依存するライブラリなしで利用できる


書籍関係


Introduction | Full Stack JavaScript Engineering

fsje.codefellows.org/

JavaScript book Sass

フロントエンド全般についての知識について書かれたGitBookを使った電子書籍


Amazon: 改訂版 Webデザイナーのための jQuery入門: 髙津戸 壮, 小原 司

www.amazon.co.jp/dp/4774169447?tag=amazon0abac-22

jQuery book

「WebデザイナーのためのjQuery入門」の改訂版


この記事へ修正リクエストをする
記事を紹介する