はてなスターのひみつ - Hatena Developer Blog
ハッピーホリデー！id:cockscombです。この記事ははてなエンジニアAdvent Calendarの8日目のエントリです。 今年1月、はてなスターのリニューアルを行いました。リニューアルの内容は告知をご参照ください。 はてなスターのリニューアルでは、クロスオリジンの問題を解決するために特別な実装をしています。今回は、ホリデーシーズンをお祝いして、そのひみつを詳 (つまび)らかにします。 はてなスターとクロスオリジン はてなスターは、はてなブログなどに埋め込んで利用されます。はてなブログは hatenablog.com や hatenadiary.jp などのサブドメインを利用しており、さらにはてなブログProでは独自のドメインを設定できます。 はてなスターは複数の異なるドメイン名のサイトから利用される、ということです。 要するにはてなスターはクロスオリジンで利用されます。一方ではてな
Vanilla JSで学ぶRedux - Qiita
この記事はReact #1 Advent Calendar 2017の5日目です。 はじめに 私はなんとなくReduxが好きなのですが、 初めて手を出した時はreact-reduxのボイラープレートやディレクトリ構成やstore、Provider、middlewareのセットアップなど初見ではどれも意味不明で、最初はReact専用のフレームワークだと思っていました。 しかしソースコードを読んでみるとRedux自体は実装にflowもTypeScriptも使っていない非常に小さなJSライブラリに過ぎず、Reactとは独立した存在であることが分かりました。 ここではreact-reduxや他のJSフレームワークの事を一旦忘れてVanilla JSでReduxを動かし、純粋にReduxの動作原理について学んでみたいと思います。 FluxアーキテクチャとRedux1 ReduxはFluxアーキテクチ
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS
Vue.jsにreduxを載せた話｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
概要 先日とある案件でVue.jsを用いたアプリケーションを開発することとなりました。 一般に同種のフレームワークと比較してVue.jsは、学習コストが低く気軽にはじめやすいということがメリットとして語られています。 ただ、今回の案件のようにMVC系フレームワークを用いて開発する際にネックとなっていたのが、コンポーネント間のデータ共有についての最適解が見つけられていないと感じていたことでした。 もちろん、適切にモデルを設計すればコンポーネント間のやり取りに責任を持つ、親コンポーネントとでもいうべき層を実装することでこの問題は解決できると思います。 しかし実案件では往々にして親コンポーネント層の実装が個々人の裁量に陥りやすく、結果的にコンポーネント間データ共有の方式が統一出来ていないケースも出てきてしまいました。 コンポーネント間で共有したいデータ=アプリケーションの本質となるデータは、もっ
りだっくすさが(redux-saga)に入門する - wadackel.me
Web アプリを構築したくて久し振りに React を触ってみると、前に少し触っていたのにすっかり忘れてしまっていました。圧倒的に記憶力が低いので、継続的に触っていないと中々覚えられません…。 今だと Angular2 がグイグイ来てたりしてますが、それよりも一度触ったことのある React+Redux を使った方が学習コストを抑えられるな、という訳で再度勉強中です。 改めて色々と調べていると、redux-sagaという Redux の Middleware が非同期処理を書きやすく出来るぞ！との事だったので、まずはシンプルなカウンターサンプルの実装をして感じを掴んでいきたいと思います。 最後の 参考 にもあげていますが、そもそも redux-saga とは一体何者なんだ？というところにおいて、以下の記事が大変参考になりました。 redux-saga で非同期処理と戦う - Qiita ま
Phoenix + React + Reduxでブログシステムを作る(1) - undefined
Elixir、Phoenixの勉強のための題材として、ブログシステムで作ってみることにした。飽きるまでのんびり改修していこうと思う。Elixir/Erlangの学習はすごいE本を並行して進める。 Elixir、Phoenixのインストールは完了しているものとする。 今回のゴール 記事の投稿ができる 記事の閲覧ができる 動作環境 Erlang 17.5 Elixir 1.2.0 Phoenix 1.1.4 node.js 4.2.1 プロジェクトの作成 プロジェクトを作成する。ただし、自分みたいなフロントな人間は真っ先に--no-brunchを付けたくなると思うんだけど--no-brunchを付けずにあとから手動で変更したほうが楽だという話しを聞くので参考にしてみる。 $ mix phoenix.new phoenix_redux_blog 参考にしたのは以下の記事。 qiita.com 以
React.js の 公式Tutorial を Redux を利用して書き直した。また Mocha + power-assert を利用したテストも追加 - Qiita
React.js の 公式Tutorial を Redux を利用して書き直した。また Mocha + power-assert を利用したテストも追加JavaScriptmochapower-assertReactredux 前回 QiitaにReact.js の React.js の公式Tutorial を gulp を利用して簡単に実行できる環境を作って、ES6も試した で公式TutorialをECMA2015(ECMA6)を利用して書き直しを行ったのですが、ReactといえばFlux、Flux といえばRedux ということで、流行りのRedux を利用して記述したらどうなるのかを試してみました。 また 同じく流行りのテスト環境である Mocha + power-assert を利用して、テストを追加してみました。 React および Redux はテストも非常に行いやすいのを体感
redux への 不満を解消する為に, flumptというFlux実装を作った - Qiita
名前はダークソウルのフラムト(frampt)から。FLux Minimum なんたらかんたら。 なんかTwitterで色々言ってたら naoyaさんにまとめられたので、ここに僕の考えを詳しく書いておく。 mizchi の Redux 考 - Togetterまとめ やりたかったこと 基本的なアイデアは、stateをpushする方式(setStateみたいな)だと非同期間で参照したときの値がズレて非同期の終わる順番次第では状態の遷移ステップが壊れてしまう可能性があるんだけど、前のstateをとって次のstateを返す非同期をキューに並べて順に実行することで、トランザクションみたいなものを保証することができるだろう、というもの。 軽量(pubsubインターフェースはEventEmitterそのまま) 複数の状態更新関数の待ち合わせ reduxで感じた不満の解消 TypeScriptフレンドリー
React・Reduxを使ったElectronアプリのboilerplateを作ってみました - DJ lemon-Sour's diary (prod.hisasann)
hisasann/electron-react-redux-boilerplate はじめに Node.js + Babel 6 + React + Redux + Webpack + Gulp + Electron Electronを母体として、React・Reduxを使ったフロントエンドのアーキテクチャについて試したことをメモメモ Webpackはbrowserifyとしか使っていません Electron 最近はやりのElectron（MacやWindowsのアプリ化）を使った場合の開発の仕方や、どうやるのが効率的かを少しずつメモしていきます 現時点では、Electronでビルドしたアプリのリリースやアップデートに関しては未調査になります Livereload まずは Livereload これがないとはじまりません 以下の記事を参考に、gulpのタスクを作ってみました ぼくのかんがえ
cybozu.com 稼働状況 を React/Redux で作り直した話 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Sales Systemチームの金子です。Sales Systemチームでは、cybozu.com Store や、販売管理システム等の開発をしています。 このエントリでは、cybozu.com 稼働状況のフロントエンドをReact/Reduxで作り直した話を書いていきます。「React/ReduxでWebアプリケーションを作ってみようと考えている人」を対象としています。 TOC 「cybozu.com 稼働状況」とは? 作り直した背景 技術概要 React/Fluxについて React/Redux Routing Resources Async Multilingualization/Localization ES6 Utility Lint Testing 取り組んでみた感想 まとめ 「cybozu.com 稼働状況」とは? クラウドサービスはサービスの稼働状況をステータス
Redux初めて触って色々わかったメモ - Qiita
最初思ってたこと vs 現実 思ってたこと：なんか軽量？ 現実：誤解だった。割りと作ってくと大きめになってくる。軽量感は無い が、redux本体のコードは結構薄い。本当に関数群だけ提供しているイメージ 思ってたこと：他のfluxと圧倒的に違う？ 現実：これも誤解。構成としては色々作りこむと最終的には一般的なfluxと同じ感じになる（flummoxとかmartyあたりと体感一緒になる） ActionとかActionCreatorとかその辺が一緒になってくる。 思ってたこと：ES6で圧倒的に書ける？ 現実：正解。圧倒的にES6を前提にしている。 思ってたこと：React用のもの？ 現実：別にそうでもない。react-reduxを使うことでreactで使えるようになる。 詰まった所など 用語編 割りと初めて見たりする用語に出会った ActionCreator martyあたりにもあった。{typ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React/Reduxにおける現場での喜び/ツラみ