You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

フロントエンドエンジニアにとって、JavaScriptは今や開発の中心にあると言ってもいいと思います。 JavaScriptに対していまいち自信のない人向けに、おすすめしたい本をまとめてみました。 これで、日本のJS界隈がもっと賑わって、仲間が増えると嬉しいです(今でもかなり賑やかですが)。 基礎 JavaScript本格入門 JavaScriptの本の中では一番易しいんじゃないかな、と思います。 これ以上に読者ターゲットのレベルを落とした本は、解説が不十分だったり、レシピ集のような側面が強かったりで、勉強には向いていません(網羅的でないということ)。 この本は解説のみで、深い仕様やテクニックには踏み込みません。それだけに読みやすく仕上がっていると思います。 この本でJavaScriptに興味をもつことができたら、よりディープな本に進んでみるといいと思います。 パーフェクトJavaScri

Ruby on Rails Advent Calendar 2014の６日目です。 概要 Turbolinks ONのRails案件を２つこなして得たTurbolinksを使うときの知見を共有します。 おまだれ ハートレイルズという会社で働く受託開発Railsエンジニアです。 Rails歴１年ぐらい。お仕事で半年ぐらい。 その前は選ばれた人だけの転職サイトをjavaで作ってました。 Turbolinksさんと上手く付き合う１０の方法 1. 学ぶ。 Turbolinksについて 「rails newしたら真っ先にGemfileから外すやつでしょ？某podcastの最近の回でゲストの人が言ってたよね」 「$(document).ready」が呼ばれないアレでしょ？」 「$(document).on 'ready page:load'使えばとりあえず問題なくなるアレでしょ？」 という認識で気軽に

はじめに VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita を読んでいる前提で話を進めます。 結局”Flux”なんだったのよ 詳細については過去に自分が覚え書きを書いたのでそっちを読んでいただけると良いと思うけど、あれは 「MVCの変形亜種に、オブザーバーパターンを乗せ、データを単一方向に流すことを規定した」ものに、Facebookが命名したものでしかない。極端に目新しいものでもない。その最大の功績はアーキテクチャそのものではなく、「試行錯誤を踏む中で誰もが一度はやっていたであろう似たようなことを上手く実践法則としてまとめた上で、共通認識としての名前をつけた」こと。概念に名前をつけて共有することで、事前説明が簡略化され、本質的な問題に取り組む時間が増える。これをFacebookのブランド力でねじ伏せるように広めたことこそが重要かつ評価すべきポイン

この投稿は、 JavaScript Advent Calendar 18日目の記事です。 更新履歴 こちら をご覧下さい JavaScript の書き方をアップデートする JavaScript Good Parts で書かれているような JS の書き方は、古くなりつつある部分も多いです。 正直なところ、自分はあの本が「今でも」良書だとは思っていません。 初学者に勧めることもしません。まんべんなさと普遍性と客観性から「パーフェクト JavaScript」 を勧めています。 その頃と比べると、 JavaScript をとりまく環境は変わりました JavaScript の進化に合わせて書き方もアップデートしていくべきなので、今回は分かりやすいしきい値として 「IE10 以下を切れるとしたら」 という前提で、列挙してみます。 たとえば XHR2 や File API に依存したサービスをやる場合な

JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう

はじめに この記事では、関数型プログラミングを強力に後押しするライブラリ、 Underscore.jsとlodashを紹介します。 両ライブラリとも_で使用できます。 ほかのライブラリにも依存せず、 現在フロントでもサーバでもかなり人気なライブラリです。 個人的にもこれなしでは。。 といった必須なライブラリとなっています。 また、Backbone.jsといった人気なフレームワークが、 Underscoreに依存していたりします。 Underscore.js GitHub: https://github.com/jashkenas/underscore Document: http://underscorejs.org/ 和訳: https://github.com/enja-oss/Underscore lodash GitHub: https://github.com/lodash/lo

JavaScriptおれおれAdvent Calendar 2014 – 18日目分 あとから更新。 JSオジサンでお話してきた内容です。というか、先月JSConf.Asiaでもお話してきた内容ですね。 みんなで幸せになろうよ。 スライド こちらご覧ください。 ModelとViewに分ける設計 – #JSオジサン つらいアプリ実装の例 カラーピッカーの実装を考えます。 よくあるカラーピッカーUI。 実装 要素はご覧のとおり、四つ。 プレビュー カラーマップ（クリックで色を選択できる） 数値入力欄 スライダー それぞれ現在選択中の色の値を表現します。またプレビュー以外は色を変更する事ができます。 カラーマップは以下の実装が必要ですね。 カラーマップをクリックしたら、 プレビューを更新 カラーマップ自身を更新 数値入力欄を更新 スライダーを更新 カラーマップクリック時の処理。 他も同様です。

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ

これはElm Advent Calendar 2014の1日目です。 Elmはクライアントサイド向けの関数型言語です。一体どんな言語なのでしょうか？ 1. HTML/CSS/JSにコンパイルされる ElmはHTML/CSS/JSにコンパイルして使用します。 この辺はJavaScriptにコンパイルされるAltJSに似ています。 AltJS同様、Elmも特別なランタイムライブラリは不要です。 ただし、Elmは1つのソースでHTML/CSS/JSをすべてまかなえるのが特徴です。 2. 独自の抽象化レイヤーを提供している 代表的なAltJSであるCoffeeScriptは"It's just JavaScript"をモットーにしています。すなわち、文法を改良するのみで、「中身」はJavaScript以上でも以下でもありません。 一方、Elmでは直接JSやCSSを操作することはできません。 基本的

はじめに もうすっかり年末なので、これから2015年にかけてアプリケーションアーキテクチャがどのようになっていくのかという個人的な考え/妄想や背景について、「リアクティブ」というキーワードをもとににまとめてみたいと思います。 Google Trendsを見ると"reactive programming"という言葉は2010年前後から、ゆっくりとバズをし始め、現在も上昇を続けています。 また、仕事としては、2010年ごろから大規模なWebサービス開発において、フロントエンド、バックエンド、アルゴリズム改善といった様々な箇所で、リアクティブプログラミングの要素を取り入れながら、アーキテクチャの改善を進めてきました。そのため、こういったアーキテクチャがコード品質の維持や安定性の向上、実際的で複雑な問題の解決にも適応可能であるということを実感として持っています。 近年、そういった要素が様々なツール

すいません。締切守れませんでした…。 やっぱ、java-jaの忘年会の翌日は辛い…。 はじめに Webシステムを開発していると切っても切れないのがJavaScriptです。 Railsはかなり早い時期からalt-JSや結合、minify等を組み込めるようにフレームワークにそれを取り入れてきました。 それを支えているのがRails3.1から導入されたsprocketsです。 それに伴なってJSのライブラリをどうやって管理するかという点について、独自の路線を取ることになりました。 JSのライブラリを同梱したgemパッケージにラップしてrubygemsとして管理する方法です。 ある程度は上手くいっていたし、今もその流れは続いているんですが、時々問題になることもあります。 例えばメンテナの対応時期がズレてて古いバージョンのままだったり、似たようなgemが乱立してややこしくなったり。(backbon

The web frontend scene is witness to many new frameworks and ways of working. It can be quite annoying when software becomes legacy quicker than ever. But actually, it's just good old innovation happening as it should, because the opportunities for improvement are there. Frameworks come and go, but what remains are the good ideas that they brought to the world. We're going to talk about the good i

この記事は VirtualDOM Advent Calendar 2014 - Qiita の2日目です。 mizchi くんから誘われて軽い気持ちで参加したら、初日からえらくエモいエントリー(VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita) でブルってます。 Virutal DOMとは、と言う話はしません。初日を見てください。いろいろ良いことあるみたいだけど、Virtual DOMってどんだけ早いの？知りたいですよね。 Elmの中の人が作ったTodoMVCのパフォーマンステストがあります。 いつものTodoMVCのデモで、100要素追加して、全て完了して、削除するというテストです。 「Run All」ボタンをクリックすると動きます。 http://evancz.github.io/todomvc-perf-comparison/ Virtua

この記事は VirtualDOM Advent Calendar 2014 - Qiita のネタが切れた時にどこからか指定されるやつです。中の人なんであんまり行儀悪いことすると怒られるんだけどな！ やりたいこと UXとSEOのためにイニシャルビューはサーバーサイドで生成し、再描画時にクライアントで同じテンプレートから生成するも、一旦画面を捨てて再構築するのを避けたい。 具体的には、サーバーサイドで何かしらの方法(nodeやreact-railsを想定)で実行して生成されたReactのId付きのDOM React.renderToString(Component({})) して生成したreactId付きHTMLに対して、再描画せずにReactを適用できるようにする(イベント注入含む) 手法 reactのid付きDOMはこんなもの。

追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative