Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac
※更新履歴 webpack2-rc & TS2.1 & @types対応 webpack2 stable & TS2.3 対応 React16-beta & TS2.4 対応 問題提起 React始めたいですよね! でも今時、型チェックのない言語とか使いたくないですよね! TypeScriptコンパイラもjsxに対応したし、Angular2でもTypeScriptが標準っぽいし、 とりあえずこれから始めるならTypeScriptでしょう。 ということで、主にReact初学者向けに最小構成を用意してみました。 間違っている点があればご指摘いただけると嬉しいです。 環境 NodeJS 8.2 React 16.0-beta TypeScript 2.4 webpack 3.4
背景 Reactにも慣れが出てきたので、次はFluxのデータフローについて学ぼうと思った。 Fluxの詳しいデータフローに関しては、公式サイトや別の記事を参考に。 Fluxのフレームワークとしては、頭1つ抜けているReduxを選定した。 ReactとReduxの連携部分で多少はまったのでメモ。 学習内容 Flux(Reduxベース)の基本的な考え方。 Flux(Reduxベース)のデータフローと登場人物。 Fluxでよくみる図。 概要 入力した内容がそのまま出力されるだけのアプリ。 state管理をReduxのみで行う。 Action ActionはActionCreatorという純粋な関数である。 ActionCreatorはActionオブジェクトを返し、Store(※後述)のdispatch関数に引数として渡される事でStoreにEmit出来る。
概要 前回記事の続き。 実際にReduxでReactのstateを管理する。 Reactのインストールは出来ている前提とする。 ReactとReactDOMはwebpackでグローバル変数かしている事とする。 Components ReactでComponentsを作成していく。 まずは、メインとなるComponent。 (CSSフレームワークはMaterialize.cssを利用している。) import FormApp from './Form/FormApp.jsx'; export default class App extends React.Component { render() { return ( <div className="container"> <FormApp handleClick={this.props.onClick} value={this.props.
余談:react-reduxを使用しているWebサイト(アプリケーション) https://github.com/reactjs/redux/issues/310 わかる範囲でもこれだけあるみたいです。すごいですね。 es6 react, react-dom, react-router redux テストまで書くと長くなって読みづらいので分けます。 es6 公式サイト 基本的には公式サイトのspecを見ていく感じになりますが、英語かつ専門用語辛い。。 Reduxは基本es6で書かれているので、spec読みながらExampleを見るのが良さそうだ! 実装で一番重要と思われるコードの再利用だけピックアップ。
この翻訳について Airbnb React/JSX Style Guideの和訳です。 間違っていたり分かりにくい箇所があれば、ご指摘いただけると幸いです。 Airbnb React/JSX スタイルガイド このスタイルガイドは現在一般的に使用されている標準に基いていますが、場合によってはいくつかの慣例(async/awaitやstatic class fields)が含まれていたり禁止されていたりします。現在、このガイドにはステージ3より前のものは含まれておらず非推奨です。 目次 基本的なルール クラス vs React.createClass vs ステートレス ミックスイン 命名規則 宣言 アラインメント 引用符 空白 引数 参照 括弧 タグ メソッド 順序 isMounted 基本的なルール Reactコンポーネントは1ファイルに1つだけにしてください。 ただし、1ファイルに複数の
まえがき React DnDの和訳ドキュメントがなさげので、自分用に私訳した記録です。 私訳なので英文の直訳を自分なりに解釈し記述した部分が結構あります。 むしろ内容すら間違ってる。と、見兼ねてつっこみたくなる箇所がありましたら、どうぞ宜しくお願いします。 Overview : 概要 本家ページ: Overview - React DnD Items and Types fluxと同じく、React DnDはデータをviewとしてではなく、事実上のソースとして使用します。 画面上で何かしらのデータをDragした際、そのデータをコンポーネントやDOMノードとしては扱わず、代わりにDragされているデータを特定のタイプのアイテム("item")として扱います。 ■ "item"とは? 現在Dragされているものがどのようなものなのかを、プレーンなJavascriptオブジェクトで説明しているも
Wantedlyでは、React + Reduxを中心としたWebフロントエンドの技術スタックを導入しました。モバイル版の会社フィードや、このブログを書いているエディタ、企業が使う候補者管理の画面などがこのスタックで実装されています。 導入したスタックの詳細や導入の理由、既存のRails環境への導入方法は以前発表した以下のスライドを参照ください。 また、先日Wantedlyに導入した技術スタックを使った勉強会を開催しました。React + Reduxを使って実際にアプリケーションを構築していく演習になっていますので、ぜひ手元で動かしてみてください。 React + Reduxを使ったWebアプリケーション開発速習会@Wantedly 今回はこれらの背景にある"なぜReactか?"という判断の背景と"どう技術選択するか?"という話を書きたいと思います。 JavaScript界隈の流れの早さフ
React は Flux のフレームワークで利用すると効果的です。 Redux は Flux を参考に 3つの原則 を強調したフレームワークです。 前回 のアプリケーションに Redux を追加してみましょう。 Learning Redux の Action, Reducer, Store の Data Flow を利用する。 React と Redux で連携 connect を利用する。 Environment node: v4.4.5 npm: v3.9.6 Comment Box Form 完成される Source Code のファイルリストです。 $ tree -a -I node_modules . ├── .babelrc ├── app.js ├── index.html ├── index.js ├── package.json ├── style.css └── web
ReduxなどReact関連のライブラリで時々出てくるHigher-order Componentsについて色々わかんなくなったので調べたことをメモ程度に留めてまとめる 通称 HoCとかHoCsとか略されるが、この記事では Higher-order Components、HoCsで統一しておく。 Higher-order Components(HoCs)とは? 語の元となったのは高階関数(Higher-order function)であると思われる。 高階関数は、「関数を引数にとり、関数を戻り値とする」ような関数の事。 HoCsも同様で、「Componentを引数にとり、Componentを戻り値とする」ような関数(または実装パターン)の事 1 なぜこんな概念が出てきたのか? この記事が良く出される Mixins Are Dead. Long Live Composition ざっくり要約
はじめに AWS Lambda + API Gateway でAPIつくってReactの部分はS3に置けば超低コストでSPA作れるんじゃね!?という思いつき(みんな気づいてる)を実践してみた記録です。 バージョン Serverless v0.5.5 React v15.1.0 aws-cli v1.10.35 Node.js v4.3 Serverlessはバージョン毎にかなり差異が大きいようなので注意してください(数カ月前に書かれた記事を読んでも???となることが多い)。 Nodeの他にPythonでもいけますが今回はNodeでいきます。LambdaはNode v5~系にはまだ対応していません。 プロジェクトをつくる AWSのIDとシークレットを取得する Serverless - Configuring AWS に書いてある通りに進めます。また、AWSは日本語に設定してあるものとします。
React + Reduxを使ったWebアプリケーション開発速習会@Wantedly のための資料です。 WantedlyではSingle Page Applicationなどより複雑な構成にも耐えられるよう、React + Reduxを中心としたWebフロントエンドの技術スタックを導入しました。 ES2015 React Redux Immutable.js CSS Modules webpack 導入の経緯などは以前発表した の資料を参照ください! WantedlyにReact + Reduxを導入した話 今回はこれらのスタックを使って実際にSingle Page Application構成のアプリケーションをハンズオンで作成します。 開発の準備 開発環境 npmライブラリを使用するため、開発マシンにnode.jsがインストール済みであることを前提としています。 サンプルはv5.1.1
最小限の設定のTDD手法を使い、「何をテストすべきか?」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。 導入 まず、 React を触ったことがあり、更にはいくつかのテストも書いた経験があるとしましょう。それでも、コンポーネントをどうテストするのが最善なのか、よく分からないかもしれません。どこから始めるのでしょう。具体的には何をテストすればよいのでしょうか。 いくつかのReactコンポーネントは簡潔過ぎて、そもそもテストが必要なのかすらはっきりしません。 AngularからReactに乗り換えた 人なら、テストには愛憎のような思いがあるかもしれません。 確かに Angular にはテストを支援するツールがたくさんありますが、同時にテストを書くのが難しくなる可能性があります。冗長ながら省略できない定型コードが多々ある上、 $digest の呼び出
Description 白ヤギコーポレーションさま主催の「最先端情報吸収研究所(AIAL)」のプレゼンテーションで使用したドキュメントです。 「URL」を軸にして、サーバーサイドを Go 言語、クライアントサイドを React (+ TypeScript) で実装する場合の要点を紹介しました。 - いい感じな URL と わるい感じな URL - RESTful API のおさらい - Echo と REST API と URL - React と SPA と URL - いい感じの URL設計を目指す旅 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. interface FooterProps { company:string } export class FooterComponent extends React.Compo
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く