リクルートテクノロジーズのフロントエンド開発 2016 - from scratch
前書き このエントリーは Recruit Engineers Advent Calendar の 1日目の記事です。 www.adventar.org リクルートテクノロジーズのフロントエンド開発 リクルートテクノロジーズではいくつもの並行するタスクが走っていて、プラットフォーム基盤と呼ばれる基盤技術開発とインフラソリューションと呼ばれるインフラ開発、後はアプリケーション開発支援などのタスクが存在します。 アプリケーション開発支援の中でもウェブフロントエンド開発は目下のところ重要タスクとされており、色んなやり方をトライアルしています。 基本的には、 React Redux Node.js という組み合わせでフロントエンド開発をしています。 主には以前 ubb.jp というイベントで発表したこの資料に記載されている内容でやっていますが、諸々補足します。 リッチなウェブアプリケーションを作るた
テストがないJS環境にモダンなテスト環境を導入していく - Qiita
Qiita:Teamに投げた社内ドキュメントだったけど、特に問題ないのでQiitaにも投げる。 前提として browserify-rails とbabelify が導入されている状況を想定してる。 基本方針 新規コードはES2015で書く 本番はbrowserify(-rails)でコンパイルする。 単体テストは node 環境下で走らせる テスト環境下では jsdom で window, document をモックする 単体テストでは ブラウザ特有の挙動はテストしない 裏側の環境(browserifyやspec-helper)は難しくして良いが、利用者からみえる範囲は複雑にしない(npm install; npm testで走る) Universal JavaScript に寄せることでコードのポータビリティを上げる 事前準備 browserify-railsを導入する。 .babelr
“use strict”（厳格モード）を使うべきか？｜もっこりJavaScript｜ANALOGIC（アナロジック）
変数の使用の単純化 withの使用の禁止 strictモードではwith文が使えなくなります。代替の手段としては、オブジェクトに短い名前の変数を割り当てて、その変数を用いて対応するプロパティにアクセスすることができます。 eval内で宣言された変数のスコープ 非strictモードでは、eval("var x ;")の様に、eval関数内で定義された変数のスコープは、evalが含まれるスコープ（関数、またはグローバルスコープ）まで広がりますが、strictモードでは、eval内で定義された変数を周囲のスコープに広げません。 単純名の削除の禁止 strict モードでは delete name を構文エラーにします evalおよびargumentsの単純化 strictモードでは「eval」「arguments」という名前がキーワードとして扱われるため、これらのキーワードに対して言語構文でのバ
gulp なしの Web フロントエンド開発 - アカベコマイリ
Web フロントエンド開発において gulp は非常に便利だ。しかしあまりにも gulp に依存しすぎており、これなしで開発できるだろうか？という不安もある。というわけで gulp を利用せず package.json と npm だけで同等の機能を実現する方法を検討してみた。 2015/11/4 追記 babelify v7.2 を試すで babelyfy 7.2 ( とその中の Babel 6.x ) について調べ、npm-scripts の変更が必要なことを確認したので追記。また Windows 環境の動作検証をおこなったところ、最新の watchify なら -o オプションが通ることを確認できた。よって本記事の最後の課題が解決したことになる。 2015/9/23 追記 cpx と rimraf を試すの内容をファイル処理に反映して簡略化。 2015/9/15 修正 Stylus
Re: Rx.js, Immutable.js について - saneyuki_s log
Rx.js, Immutable.js について - mizchi's blog ファイルサイズへの異論は無い。これを使わずとも解決できる問題があるというのも同意する。それでもイマイチ釈然としない。「使う必要のない」一般公理と「使いたくはない」私情の境界が曖昧に感じてしまう。仕方がないので反論を兼ねた個人の雑感を書いてみる。いわゆる、「ついカッとなってやった」に近い。 RxにせよImmutableJSにせよ、この手の標準データ構造を提供するライブラリは基盤性が強いので、全体的使うことでバイナリサイズに見合っただけの成果をもたらす系のライブラリに区分される。そのため、局所的に使いたい場合はあまり意味がない。この辺りはReactと類似してる面がある。 使うなら上から下まで、 あるいはオニオンアーキテクチャ的な例えで言うならある階層から外側のインターフェースを統一するようにしないと、さして美味し
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
どうやってECMAScript 6を学び始めるか
どうやってECMAScript 6を学び始めるか ^ 自分でちゃんと見て読んで大丈夫というものしか出してないので、かなり最小限の紹介です。 ^ azuです。JSer.infoなどをやっています。 ES6的にはPromise本を書いたり、日本のISO/IEC JTC 1 SC22でES6のレビューに参加してます。 ECMAScript 5を知る ^ ES6の話をする前にES5の話です。 ES6 の前に ES5 大丈夫? Property Descriptor Object.create() Strict Mode Thinking About ECMAScript 5 Parts - Tech.pro ^ ES5はマイナーアップデート的な感じなので増えた機能としてはそこまで多くはありませんが、Object.definePropertyなどかなり重要な機能が増えています。 Speaking J
ES5 + Facebook JSXで書かれたJavaScriptコードベースをTypeScriptに移行させる - CARTA TECH BLOG
皆さんこんにちは。adingoにてFluctという広告配信システムの管理画面を中心にクライアントサイドの開発を行っております、大関です。 今回は、表題の通り、実際にプロダクトとして動いている既存のコードベースを、ES5ベースからTypeScriptに段階的に移行させた話について書こうと思います。 移行前のコードベース及び直面した課題 今年の1月頃から、アプリケーションのクライアント側の一部を、以下の構成で実際に開発しています。 言語 ECMAScript 5 主要な依存ライブラリ UI開発にReactおよびFacebook JSX syntax 統合イベントシステムとしてのRxJS テストコードのアサーションにpower-assert ビルドチェーン モジュール連結にbrowserify 環境変数に基づくビルドフラグ用途でenvify コードの解析とLintにESLint 未使用変数や未定
今日から始めるNode.jsコードリーディング - libuv / V8 JavaScriptエンジン / Node.jsによるスクリプトの実行 | Tokyo Otaku Mode Blog
ソフトウェアを正しく理解する唯一の方法はコードを読むことです。 ドキュメントを読めばそのソフトウェアが何を実装しているか分かりますが、どのように実装されているかまでは分かりません。 開発中に何らかのトラブルに悩まされたときや、効率的なコーディングをしたいと思ったとき、下位レイヤのソフトウェアを理解しておけば素早く対処できるシーンが多くあります。 ただ、コードを読むことは簡単なタスクではありません。 現代的なソフトウェアはそれなりの規模のコードを含んでいることがほとんどです。アーキテクチャ間の差異を吸収するためのコードなど、本質的な機能を理解する上ではあまり重要ではないコードも含まれています。 何らかの問題が発生してからコードを読もうと思っても、準備なしでは関連する箇所を探すだけでかなりの労力が必要な作業となります。 従って、普段からコードを読んでおくことが重要です。 また、コードを読むにあ
Server Sent Events(SSE)の使いどころと使い方 | GREE Engineering
Flameの箱を捨ててしまったためどうやって送り返すか困っています。@kyo_agoです。 今日は2014年6月にβ公開したGREEチャットで通信に使用しているSSEを紹介したいと思います。 SSEとは SSEとはServer-Sent Eventsの略でW3Cで提案されているhtml5関連APIの一種です。 これはサーバとの通信やJavaScript APIを中心としたもので、サーバからPush通信を行うための仕様です。 サーバからPush通信に関してはこれまでもCometやWebSocketが存在しましたが、SSEは互換性や効率などの点でそれ以外の技術に対する特徴があります。 ここからは具体的な仕様や、実際に使用した場合の感想などを紹介したいと思います。 通信方式 SSEはHTTP/1.1を使用し、Content-Type: text/event-streamで通信を行います。 基本的
Farewell Node.js (翻訳) - from scratch
「visionmedia、Node.js辞めるってよ」って事で、今回はこの話の翻訳ですね。 Farewell Node.js — Code adventures — Medium 最近のnode.jsはホントTJ Fontaine のリーダー就任から始まってNode.jsでできたエディタであるAtomがreleaseされたり、gemのモジュール数をnpmのモジュール数が抜いたり、socket.io v1.0が出たりと色々あるんですが、今回の話は飛び抜けて衝撃的だったなぁと思ってます。 一応知らない方のためにvisionmediaについて説明しておくと、以下のモジュールは全てvisionmedia製です。 express (Web Applicaiton Framework) mocha (Testing Framework) jade (hamlライクなtemplate engine) s
はてなブログ編集画面JSのページャ見どころ紹介 #pagernight - hitode909の日記
昨日，ページャNightという勉強会で，はてなブログのJSの見どころを紹介するLTをした．(昨日の日記)． 資料公開しようかと思ったのだけど，発表資料そのまま公開しても意味不明なので，エントリに書き直すことにした． たとえば，このLGTM画像は発表資料の1枚目で，もし発表資料をそのまま公開したら，こういう謎の画像を解説もないまま見ることになっていたはず． JSのページャいっぱいある はてなブログの編集画面には編集サイドバーというのがあって，写真とかAmazon検索とかTwitterとかinstagramとかあれこれ貼れるようになってる． Amazon検索しても画面遷移するわけじゃなくて，ウェブ2.0という感じで，XHRでJSONを取ってきて，HTMLを組み立てて表示，クリックすると選択，貼り付けを押すとエディタに挿入される，という仕組み． 編集サイドバーから貼れるサービスは10種類くらいあ
Do You Need a Powerful Laptop for Programming? (According to JSModules.io) | LaptopRadar
We might earn a commission from partner links on Laptop Radar. Commissions do not affect our editors' opinions or evaluations. If the question often appears in your mind, “do I need a powerful laptop for programming?” you are not alone. That simply means you need the right information about the minimum requirement of a laptop that can let you code, which actually sounds easier to answer than it re
エデンの園でおきたこと - steps to phantasien
有給を駆使し一足早くクリスマス休暇に突入、ヒャッホイ Ingress やるぜーと 意気込んでいた矢先ノロウイルスにやられダウンした。かなしい。鎮まれ俺の胃袋・・・ そんな腹痛日和の気晴らしとして今日は Garbage Collection Advent Calendar に参加してみることにしました。 Advent Calendar 初体験につきよくわかってないけど勝手に参加していいんですよね？ GC というとジェネレーショナルだのパラレルコンカレントだのといった話が目立ちがちだけれど、 現実の問題というかブラウザを相手にするとそれ以外の細々とした面倒が目につく。 GC つき言語 (JavaScript) のコードと C++ で書かれたコードとの連携は最たる面倒の１つ。 たとえば WebKit の DOM は C++ で実装されており、 C++ のオブジェクトは JavaScript 処理
JavaScriptのSource Mapの内部表現について
プログラミング (iOS, JavaScript, Jenkins, Sikuli) とMacやiPhoneなどの話題が中心のブログ CoffeeScriptなどの別言語からコンパイルしたり、ClosureコンパイラなどでMinifyしたりしたソースをデバッグしているときなどに、生成されたJavaScriptソースコードから変換前のオリジナルソースの場所を知りたいときがあります。 それを知るための技術がSource Mapです。これがどのようにオリジナルのソースを参照しているのか気になったので調べてみました。 CoffeeScriptをコンパイルしたときのソースマップ 簡単な例として、フィボナッチのCoffeeScript版をソースとして用います (fibonacci.coffee)。 fib = (n) -> if n == 0 or n == 1 n else (fib n - 1)
Web Components を支えるPolyfillライブラリ
Hello 生成されるJSそのものはピュアな感じなので、たしかにbosonicを捨ててもWeb Componentsとして成り立ちそうではある。 瑣末だが、この記事を書いてる時点で試したらWeb Platform featuresのフラグをEnableにしたCanaryで、bosonic-pollyfillsがエラー吐いてる... 余談、実はえらいかも Polymerコンポーネントって、結局Polymer入れないと使えないなら、BackboneJSで使えないAngularディレクティブみたいなもんな気がしてきた。Bosonicのコンセプト、実は偉いかも。（出来る範囲は制限されるかもしれないけど） — あほむバーガー (@ahomu) June 30, 2014 結論 個人的にはふつうのPolyfillとして動いてくれるものを精査したかったのだけど、結果的に Polymer/platform
Tumblrの省メモリーな無限スクロール - 記録
無限スクロールまたはauto pagingと呼ばれるUIには、読み終えたコンテンツがどんどん画面の上のほうに溜まっていってメモリーを食い潰すという問題がある。 なかでもTumblrは画像などのコンテンツが多いため、ダッシュボードダイバーたちは無限Tumblrユーザースクリプトなどのユーザースクリプトをインストールして、読み終えたコンテンツを定期的にページ上から自動削除するといった対策を講じていた。 ところが最近のTumblrのダッシュボードでは、ポストが画面外に出るとその中の要素が一時的にページから削除され、画面内に表示されると要素が再度復元されるようになっている。どうやらこれによって無限スクロールによるメモリーの圧迫が抑えられているらしい。 関連するコードはhttps://secure.assets.tumblr.com/assets/scripts/dashboard.jsの/*! s
本当のClosure Compilerをお見せしますよ。
天下一altJS武闘会での発表 http://connpass.com/event/6402/ Google Closure Compilerの最新事情について
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのレベル別書籍のまとめ
ESDoc - ES6時代のドキュメンテーションツール
