Flowを使ってアプリケーション開発するためのエディタ環境いろいろ｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
これはフロントエンドエンジニア Advent Calendar 2016の第7日目の記事です。 今年はほぼずっとTypeScriptでコードを書いていたので、気分を変えてFlowでコードを書く時の環境について調べてみました。 私は普段Visual Studio Codeでコードを書いているのですが、特に助かっているこの辺りの機能を踏襲した環境を基準にしてみます。 エディタ内で型エラーを表示 何か間違いを起こしてしまったことを知るのは早ければ早いほど良いと思っているので、型エラーは常時エディタに表示されるようにしたいです。 (若干エディタの画面がうるさくなり過ぎる時もありますが...) 変数の型情報をツールチップとして表示 開発中に「あれ、この変数ってどんな型だっけな」と忘れることがよくあります。できるだけ簡単な操作で任意の変数の型を確認できると、ストレス無く開発できます。 型定義へのジャン
RxJS(5.x)で行うテストファーストな機能開発｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
小飼です。 『The Next Great Burger』にハマっています。 RxJS、使っていますか？ 弊社では現在開発しているアプリケーションから、本格的にRxJSを導入して使い込んでいっています。 イベントを配列のように操作できるという高度な抽象化の恩恵で、非常にリーダブルかつ簡潔に機能実装が出来るところが非常に良いですね。 学び始めた当初はReactive Programming的な考え方で実装を発想するということができず、非常に難解なイメージを持っていましたが、 半年くらい置いて改めて使ってみたところ、非常に使いやすいライブラリであるというイメージにガラッと変わりました。 これはRPっぽい発想の転換ができたことと併せて、TypeScriptでRxJSを用いることで、静的型解析の恩恵を受ける事ができた事も大きいと思っています。 (少なくともAPIの多さは問題にならなくなりました)
Flowtypeに入門してJavaScriptコードで静的型付けの恩恵をうけるところまで｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
ハウス・オブ・カードで寝不足の小飼です。 どうなるんですか、あのアレは... さて、最近個人的にGolangでアプリケーションを作ったり、Haskellを勉強したりしています。 いずれも静的型付けにより、実行前に型エラーを検出可能な言語です。 私は普段、動的型付け言語であるJavaScriptを主に書いていますので、初めこそビルド時のエラーにヤキモキしたりしましたが、慣れてくると非常に快適に感じるようになりました。 実行時に検出されるつまらない間違いや、間違った型が渡ってきた時の防御コード(if typeof variable !== 'string' console.warn('型が違う')のようなコード)が不要になること以外に、アプリケーション固有のデータ構造を型として宣言することで、何をするかよりも何であるかに注目した読みやすいコードを書くことが可能になるからです。 React.js
Web API設計指針を考えた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
小文字のみを使用する。 単語をつなげる必要がある場合はダッシュを利用する。 単数形よりも複数形をつかう。なお、実装がRailsの場合でテーブルの複数形が誤っている場合には、URLは正しい複数形としてRails側を修正する。（APIに実装を反映させるべきではない。） スペルミスをしない。 URLの階層は浅く保ち、複雑さはクエリパラメーターに押しこむ。 クエリパラメータ名は配列で複数渡すものについては複数形、一つだけ渡すものについては単数形とする。 ページングにはper_page、pageというパラメータ名を使用する。 と書いてきたが、ただし、RESTには必ずしもこだわらず、あくまで利用側の利便性を重要視した設計とする。 1つの作業を完結するために複数回のアクセスを必要とするようなAPIの設計はChatty APIと呼ばれる。これはネットワークのトラフィックを増加させ、クライアントの処理の手間
React+Reduxのテスト方針をまとめた｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
概要 React.js Advent Calendar21日目の記事です。 Reduxというフレームワークがじわじわ広まっている。Reduxは、Fluxの概念を拡張したもので、アプリケーションでひとつの状態をもつと、クライアントでの状態管理がいろいろ便利になるよ、というコンセプトを持つ。詳細は以下の記事が詳しい。 人気のFluxフレームワークReduxをさわってみた - マルシテイアは月の上 Motivation | Redux 筆者は現在React+Reduxでアプリケーションをつくっているが、今回は、そのテスト方針を書こうと思う。 テスト環境 karma+jasmine+sinonでつくる。E2Eはいろいろと・・・なので・・・メインはユニットテストで実装している。JavaScript DOMをつかってSimulationすれば、最低限は担保できるかなと考える。 テスト方針 大きな方針と
Rx(JS)に入門する前に知っておきたいN個のこと｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
※この説明では関数型プログラミングの部分について触れていませんが、Rxへの入門の準備という目的をややこしくしてしまうと思ったので省いています。 (私はObservable Streamを外部状態に依存しない書き方で使うことで安定して綺麗なコードを書ける、みたいな理解の仕方をしています) 実装例 長々と個人的な解釈を書き連ねてきたので、この辺で実際のコードに落とし込んでみたいと思います。 ここではマークダウンエディタを実装している想定で、ユーザーのキーボード入力イベントから、`(逆クォート記号)で囲まれた文字列を spanタグで囲んだhtml文字列に変換するような処理を実装します。 ただし、変換したhtml文字列をその度に描画していると描画コストが掛かり過ぎてしまうという想定で、 500ms毎に最新のhtml文字列を検出したいという仕様があるとしました。 準備 まず、ユーザーのキーボード入力
Vue.jsにreduxを載せた話｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
概要 先日とある案件でVue.jsを用いたアプリケーションを開発することとなりました。 一般に同種のフレームワークと比較してVue.jsは、学習コストが低く気軽にはじめやすいということがメリットとして語られています。 ただ、今回の案件のようにMVC系フレームワークを用いて開発する際にネックとなっていたのが、コンポーネント間のデータ共有についての最適解が見つけられていないと感じていたことでした。 もちろん、適切にモデルを設計すればコンポーネント間のやり取りに責任を持つ、親コンポーネントとでもいうべき層を実装することでこの問題は解決できると思います。 しかし実案件では往々にして親コンポーネント層の実装が個々人の裁量に陥りやすく、結果的にコンポーネント間データ共有の方式が統一出来ていないケースも出てきてしまいました。 コンポーネント間で共有したいデータ=アプリケーションの本質となるデータは、もっ
karmaにsinon.jsいれて、fakeServerをつくる｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
概要 SPAのテスト用にAPIサーバーをモックしたいが、nockのような感じでシンプルに実装したい(nockはブラウザ環境であるkarmaでは動かない)。 mochaを使うのも冗長なので、sinonjsを使うことにした。 実装 karmaのconfigにsinonを加える。これで、テスト内でsinonがグローバルで使える。 // karma.conf.js ..., frameworks: ['jasmine', 'sinon'], ..., plugins: [ ..., require('karma-sinon'), ], ..., テストコードは以下のように書いた。①から⑥の順番で処理が実行される。 ③→④→⑤→⑥と処理が走るのがポイントで、server.respond();がasync関数のレスポンスを返し、⑤で実際のテスト、⑥でjasmineの非同期テスト終了関数doneを呼び出
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
