記事をより良くしていくために、「Hearthstone(ハースストーン)」に関する間違いの指摘やご意見、感想などを募集しています。
![ハースストーン攻略Wiki|ゲームエイト](https://cdn-ak-scissors.b.st-hatena.com/image/square/a06eeaa95a34fad648384b9573cb3f3dc40977aa/height=288;version=1;width=512/https%3A%2F%2Fassets.game8.jp%2Fassets%2Fgame8_ogp-846ace0d45c153c1174a8beac78a5378ddc11fe3e20f7e4d9b51559cfc4db94d.png)
概要 Fluxフレームワークまとめ。随時更新。 比較 voronianski/flux-comparison Redux 3300 stars。 人気のFluxフレームワークReduxをさわってみた - マルシテイアは月の上 Reflux 3300 stars。 Alt 1700 stars。 Fluxxor 1300 stars。Web DBにのってたやつ。 Fluxなフレームワーク、Fluxxorの紹介 - マルシテイアは月の上 Fluxible 1090 stars。Yahooが開発。 Fluxy 234 stars。 Tuxx 554 stars。 Mcfly 700 stars。 Arda 180 stars。mizchiさんが開発。 Arda - MetaFluxなフレームワークを作った - Qiita Fluxフレームワーク Arda が気になる10の理由 - Qiita M
Fluxについて現時点での理解をまとめました Fluxって? 設計概念、アーキテクチャ こう設計するといいよねっていうFacebookの提唱 なので実体があるわけではない Reactとの関係は? ReactはFluxアーキテクチャView部分の実装、こちらはライブラリとし提供されている ただし、Fluxアーキテクチャに当てはめなくてもReact単体でも使える Fluxは新しいの? いいえ ただのオブザーバーパターン(の応用) ビビらなくていい Fluxの登場人物たち Action Dispatcher Store View Flux - Action データの流れの起点になるひと 定義されるメソッドは下記に紐づくと考える ユーザーの操作 サーバーからのレスポンス(初回レンダリング) APIレスポンス 各Actionをトリガーにしてイベント発生させて、アクション種別とかデータを渡す Flux
Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 結局データをサーバからとってくるところってどうなってるの?ってのが疑問として残ります。つまり、図で表現すると↓の部分の仕組みがどうなっているかってところです。 その部分を、Instagramのようなサービスを例に説明しています。 クライアントはどのようにしてサーバからデータを取得すべきか まず、I
【TwiPlaからお知らせ】 現在、X(旧Twitter)の障害によりログインできない場合があります。 [こちらのページ]の手順でログインできます。
immutable.jsは、facebook社が作っているJavaScriptのライブラリでimmutableなコレクションを提供してくれます。List, Stack, Map, OrderedMap, Set, OrderedSet and Recordがあるとのこと。 関数型言語にインスパイアされて作っているらしいので、関数型に馴染みのある関数が出てきて嬉しいです。 他にも、正格でなく遅延評価してくれるという点も嬉しいですね。 インストール
PageSpeed Insights でのモバイル分析 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 PageSpeed Insights は、ページを分析して、モバイル ネットワークでページを 1 秒未満で表示するための推奨事項にそのページが準拠しているかどうかを確認します。調査によれば、1 秒を超える遅延があるとユーザーの思考の流れが中断し、ユーザーの利便性が低下します。Google では、端末やネットワークの種類に関わらず、ユーザーのページへの関心を持続させ、最適な利便性を提供することを目標としています。 1 秒という時間の制約を満たすのは簡単ではありませんが、この時間内にページ全体を表示する必要はありません。代わりに、スクロールせずに見える範囲(ATF)のコンテンツを 1 秒未満で配信し表示します。こうすることで、ユーザーは可能な限り早くページの
2014/01/31 | lastmod: 2024/06/29 この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります techJavaScriptjQuerypolyfills (2024 年追記)古い記事なので誰も見てないと思いますが、現在 polyfills を使うのは危険なのでやめましょう。もはや機能が足りなくて困るケースはないようなので、使う意味もないかと思います。 https://www.itmedia.co.jp/enterprise/articles/2406/29/news057.html (追記終わり) jQuery というライブラリは非常に便利な JavaScript ライブラリであります。 jQuery 便利!いやー、便利ですよね。便利すぎて、JavaScript を書いて HTML 要素を何かしようと思ったときに、無条件で使用してしま
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
simple, flexible, fun Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on GitHub. # SponsorsUse Mocha at Work? Ask your manager or marketing team if they’d help support our pro
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
クライアントサイド React クライアントサイドにはReactを使用しているものが多い。 reactjs isomorphic - Google 検索 クライアントサイドアーキテクチャ Flux 設計パターンには例によってReact.jsと相性の良いFluxを用いる。フレームワークはReduxが人気。 人気のFluxフレームワークReduxをさわってみた - マルシテイアは月の上 Fluxフレームワークまとめ - Qiita クライアントサイドルーティング React Router これはほぼ一択な気がする。 React.jsでserver-side renderingにも対応したRouting - Qiita サーバーサイド Express, Koa Hapiも見ないわけではないが、主流なのはこの2つ。 Node.js Framework Comparison: Express vs.
reactにfluxを採用してアプリケーションを設計していると、親->子->孫コンポーネントへpropsのバケツリレーになってしまう事がありました。 そもそもイケてない設計が悪いのですが、reactバケツリレーつらいという声を聞くことも多かったし、自分も辛いと思っていたところ助言をいただいて解決法が見えてきたのでまとめてみます。 propsバケツリレー まず、バケツリレーを再現してみます。 DOM構造 おおまかにdiv[class="app"](親), div[class="group"](子), div[class="item"](孫)というツリー構造になってます。 <div class="app"><!--親--> <div class="group"><!--子--> <h2>1番目のグループ</h2> <p class="count">13</p> <div class="item
Electron + React.js でちょっとした Markdown Viewer を作成して少し知見が溜まったので宣伝とハマりどころなどまとめた (gulpfile編)JavaScriptTypeScriptgulpReactElectron ちょっと色々ネタがあるので分けて作成していきます。今回は gulpfile 編です。 作成したもの markcat Electron製の Markdown Viewer 機能的な特徴 Intellij IDEA の Darula 風の表示テーマも用意 表示テーマの変更も可能 Github Flavored Markdown コードハイライト表示 編集時の自動更新 ドラッグ&ドロップからの Markdown 表示 (Windows) SendTo に配置することにより、エクスプローラーの「送る」からの Markdown 表示 (Windows)フ
React makes you sad. Dan氏による React で幸せに開発をするためのフローチャート react-makes-you-sad を翻訳してみました。React をこれから勉強してみようと思っている方、ちょっとだけ試したことはあるけどまだ実戦投入していない方、すでに実際のプロダクトで使っている方、つまりほとんどの方にとって有用なアドバイスを含んでいます。 日本語リポジトリ: kuy/react-makes-you-sad フローチャートを見る [WIP] 抜粋 ひな形(ボイラープレート)は使わない Flux ライブラリを使うかどうかについて webpack や Browserify の設定に振り回されない JavaScriptの新しい言語機能をすべて使おうとしない 依存パッケージの更新頻度について React 以外も検討しよう
今回はComponentのlifecycleについて書きたいと思います。 React.jsではComponentの状態の変化に合わせて色々メソッドを呼んでくれるのでそれに合わせて初期化や後始末な処理を書くことが出来ます。 よく使うのはcomponentDidMountやcomponentWillUnmount辺りです。 イベントの登録をcomponentDidMountでやってcomponentWillUnmountで解除するというのがよく使うパターンだと思います。 componentWillMount() ComponentがDOMツリーに追加される前に一度だけ呼ばれます。 なので初期化処理を行うのに適しています。 この中でsetStateするとrender時にまとめて行われます。 server-side rendering時にも呼ばれるのでどちらでも動くコードである必要があります。 c
ちょっと前にReactを使って簡単なアプリケーションを作ってみたのですが React入門用に簡単なアプリケーション作ってみる - yutaponのブログ 今回はFluxアーキテクチャについて学びたいと思ったので、TodoMVCを題材に写経してみました。 構成・ロジックは参考にしつつ、ES6構文で書くようにしてます。 参考にしたコードはfacebook/fluxのexamplesのコードになります。 flux/examples/flux-todomvc at master · facebook/flux · GitHub https://github.com/facebook/flux/tree/master/examples/flux-chat 作ったコードはここに置いていて、 https://github.com/sskyu/react-flux-todomvc-example/tree
material-fluxというFluxアーキテクチャの実装ライブラリを書きました。 Fluxって何?と思う人は以下などを見ると良さそうな気がします。 React: Flux Architecture - Video Tutorial Series @eggheadio Fluxとはなんだったのか + misc at 2014 - snyk_s log Fluxアーキテクチャの覚え書きを書いた - snyk_s log The Flux Quick Start Guide Getting To Know Flux, the React.js Architecture ♥ Scotch What the Flux? (On Flux, DDD, and CQRS) — Jack Hsu なぜ作ったか IDE readable(machine readable)なライブラリが欲しかったのがひと
今回はReact.jsとも関わりがあるFluxについて紹介したいと思います。 Flux is Architecture ↑の図はfacebookのfluxのリポジトリにあるものですが、Fluxは上記のようなArchitectureの名称です。facebook/fluxのrepositoryに行ってもらうとわかるのですが、実装としてはDispatcherの部分があるだけです。 Unidirectional data flow 先ほどの図を見てもらうとわかる通り、Fluxではアプリケーションの複雑さをなくすため、データの流れを一方向にします。 そのため全体の処理の流れはわかりやすくなりますが、Angular.jsなどで書くときに比べて冗長に感じることもあるかと思います。 しかしながら単純なデータの流れを作ることで、ある程度の規模になってアプリケーションが複雑化してもデータやイベントの流れがスパ
{ "devDependencies": { "babelify": "^6.1.2", "browserify": "^10.2.4", "watchify": "^3.2.3" }, "scripts": { "watch": "watchify -t babelify src/app.jsx -o dest/app.js -v" }, "dependencies": { "flux": "^2.0.3", "react": "^0.13.3" } } import {EventEmitter} from 'events'; import React from 'react'; import AppDispatcher from './app_dispatcher'; const COUNTER_CONST = { UPDATE_COUNTER: 'UPDATE_COUNTER' };
In this post we are going to explore how to use ES7 features to define traits with a brand new module: traits-decorator. ES6 gave us the simplicity to create classes in a more declarative way. With ES6 modules we have also a better and clear definition of what we are exporting. Those aspects were a primary goal of Cocktail. Decorators If you are not familiar with decorators, they are pretty simila
最近、Swaggerという単語を聞く機会が増えていませんか?MicrosoftやGoogle,IBMが、REST APIの記述標準化を目指した「Open API Initiative」という団体を立ち上げ、そのベースをSwaggerを利用するということで一躍注目を集めるようになりました。しかし、Swaggerというものを調べるとツールの話やドキュメントの話が出てきて、何なのこれとなることが必定です。ということで、WebAPIとは切っても切れない関係のSwaggerの話を簡単にしてみます。 Swaggerとは? Swaggerとは、一義的にはREST APIを記述する為の仕様です。当初から、Swaggerが標準の仕様になることを目指しますよと宣言していて、米国等ではデファクト・スタンダードとなっていました。それが、「Open API Initiative」が出来たことにより、実際に標準の仕様
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く