React/Redux約三年間書き続けたので知見を共有します | Enigmo Life
Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの
Goだけで作るフロントエンド
Go のシンタックスだけで HTML とスタイルと JS を構築する「Vecty」というフロントエンド開発キットの紹介 先日 Umeda.go#3 にて登壇して Vecty を紹介しました。資料はこちらです。 Vecty とは？ リポジトリ: https://github.com/gopherjs/vecty GopherJSむけの React-like な frontend development kit です。 GopherJS について 前に書いた紹介記事を参照 Vecty の主な機能は GopherJS の Go 記述を JS へのトランスパイル機能を利用します Go のシンタックスのみで HTML とスタイルとイベントハンドリングを記述 HTML 記述ツリーをコンポーネントとして定義する支援機能 コンポーネントツリーを初期レンダリングする機能 仮想 DOM のようにコンポーネント
React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita
Facebook が開発したUI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*個人的解釈です） もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov
Reactのコンポーネントにpropsを渡さない場合のFlowの書き方 - 30歳からのプログラミング
Flowのバージョンは0.61.0で確認している。 propsを渡さない場合、Flowはどのように指定すればよいのか ReactのコンポーネントのpropsにFlowで型をつける場合、以下のように書く。 type Props = { foo: string, }; class ChildComponent extends React.Component<Props> { render() { return <div>{this.props.foo}</div>; } } class ParentComponent extends React.Component { render() { return <ChildComponent foo="hoge" />; } } https://flow.org/en/docs/react/components/ では、このコンポーネントにはprop
漫談・フロントエンド談義 - megamouthの葬列
（出囃子） あー本日はお日柄もよろしゅう… え？そないな挨拶はええから、はよ、おもろい事言え？ 今日はお客さんはプログラマばっかりやから、せっかちでんな。短気も美徳のうち言うわけやけども、わしも、ただの大阪のおっさんやさかいね、そない、おもろいことはすぐに言えまへんのや… うーん。せや、最近、フロントエンド界隈がおもろいでんな。 ReactとかVueとかAngularとか？Riotとか言うのもあるらしいですやん。 ほんで、アーキテクチャとしてはFluxがどうとか言うとって、ここ数年のフロントエンドはめまぐるしゅう変わっとって、 横目で見とるわいらなんかも、えらい忙しゅうしてはんなあ、思うてね。 あの人どのぐらい儲けてはんのやろ？とかそないな下世話な興味も出てくるっちゅうもんですわ。 アタクシなんかは、システムっちゅうもんは何で書こうが、動きさえすればそれで、ゼニコロ貰ろうて、ホナサイナラ、
同じイベントのaddEventListenerを1つにまとめるライブラリを書いた
1つにまとめる? Reactなどのコンポーネント志向のライブラリを使っていると、各コンポーネントで同じ要素へ同じイベントを貼っていることがあります。 // Component A const handlerA = (event) => {}; window.addEventListener('scroll', handlerA); // Component B const handlerB = (event) => {}; window.addEventListener('scroll', handlerB); // singleton const eventObserver = require("ui-event-observer"); // シングルトンじゃない方法 // require("ui-event-observer").UIEventObserver // Component
ng-sake を開催しました | Angular2 Info
どうも、らこです。3/30に ng-sake #1 を開催しましたので、そのレポート記事です。 第1回だったのでいろいろと実験的な試みもありましたが、概ね好評だったようですし私も満足しています。 今後も毎月くらいのスパンで開催できたらいいなと思っています。 趣旨 「Angular好きで集まって酒飲みながら話をしよう！」という簡単な趣旨でした。 前の週にng-japan 2016が開催されたのもあり、Angularコミュニティが活性化していたのでその勢いに乗じる形でした。 内容 開始と共に乾杯しました。 LTパート 前半は事前に募集したLTの発表時間です @Quramyさん: SSR with Angular 2 Angular 2のサーバーサイドレンダリングに関する発表でした。実際に angular/universal を使ったデモや、 さらにはpreloadまで試したデモを見せてもらえて
日本語訳：Angular 2 Change Detection Explained - Qiita
こんにちは、らこです。 この記事はPascal Precht氏によるAngular 2 Change Detection Explainedを日本語訳したものです。 Angular 2を使う上で必修ともいうべき Change Detection に関する貴重な資料なので、許可をもらって日本語に訳しました。Thank you, Pascal! けっこう長いので、先に要点だけ書いておきます。できれば全部読んで、原文も読んで、スライドも見てください。 レンダリングとはモデルをDOMに可視化することである Change Detectionとはモデルの変更を検知し、UIに反映することである モデルの変更を引き起こすのは常に非同期的な処理の結果である Angularはあらゆる非同期処理の後にChange Detectionを行う(Zoneを使って) 変更を検知する際にはオブジェクトの参照が変わったかど
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
