hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま

Web開発者、アプリ開発者に捧ぐReactの提唱する"learn once, write anywhere"はどこまで本当なのか？JavaScriptAndroidiOSReactreactnative 最初に この記事は React Native Advent Calendar 2016 23日目です。 釣りなタイトル失礼します。 以前、FacebookまじでReact Nativeやるってよ！でFacebookにとどまらず、Instagram, airbnbのアプリがReact Native製に置き換わっていることを投稿しました。 個人的に大きいニュースだと思ってます。 なぜなら安定稼働しているiOS/Androidのナレッジとチームを棄ててまでも、乗り換えを選択する理由がReact Nativeにはあると言ってるものだからです。 様々な理由があると思いますが、大きな要因は"learn

ここ最近はずっと、前の記事で書いた Web サービスをコツコツ作り進めています。その中で、よくある Pinterest っぽいレイアウトを使いたかったのですが、既存の React コンポーネントがやりたいこととマッチしなかったので ReactStackGrid というコンポーネントを作りました。 リポジトリは以下です。 wadackel/react-stack-grid https://github.com/wadackel/react-stack-grid DEMO 実際の動作は GitHub Pages から確認できます。 https://wadackel.github.io/react-stack-grid/ 単純な<div>を使った矩形と、画像を入れ込んだサンプルとなっています。幾つかのアニメーション用のプリセットもあるので是非試してみてください。 手持ちの iPhone6s でも

<TogglePattern /> というコンポーネントを書きました。 azu/react-toggle-pattern: React Component that provide toggle pattern 名前の通りトグルするボタンとかを実装するのを想定して作りましたが、 もっと汎用的にパターンマッチ的な感じの制御ができるようになってます(A/Bテスト的なやつにも使えそう) 使い方は、childrenに表示が切り替わる要素を置く形で書くようになっています。 (こういう親になるコンポーネントってなんというのだろう?) 次の例ではisEditingの値が trueならばLeaveEditingButtonが表示 falseならばEnterEditingButtonが表示 という形になっています。 import {TogglePattern} from "react-toggle-patt

はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br

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

Your first component: はじめてのコンポーネントReact is all about modular, composable components. For our comment box example, we’ll have the following component structure: Reactはモジュラー、構成可能（コンポーザブル）なコンポーネントが全てです。コメントボックスの例では、以下のような構造のコンポーネントを使っていきます。 Let’s build the CommentBox component, which is just a simple <div>: CommentBoxコンポーネント（シンプルな<div>）を作りましょう。 // tutorial1.js var CommentBox = React.createClass({ ren

今回はちょっと趣向を変えて公開されているComponentの利用について書きたいと思います。 Componentは基本的にはPropがI/Fとなっているのでドキュメントを見てよくわからなかった場合は、Propを見るとどのようなI/Fがあるかわかると思います。 自分が公開する場合は、PropTypesやgetDefaultPropsを使ってI/Fを明確にしておくといいと思います。 Bootstrap 何はともあれまずは定番のBootstrapですがやはりちゃんとあります。 前回のRouterのサンプルでも使っていました。 使う場合は、react-bootstrapの他に別途bootstrapのCSSを読み込む必要があります。 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/boo

はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき

PCで我々がWebアプリを多く利用するが、モバイルにおいてアプリは全てだ。今ではモバイルを使っている時間の90%はアプリの利用に費やされている。 ここでいうアプリとはネイティブアプリの事だ。 マーク・ザッカーバーグがネイティブではなくHTML5に投資したのは最大の失敗だったと宣言して以来、モバイルWebは着実に勢いを失ってきている。 しかし皮肉なことに、フェイスブックのエンジニアたちのおかげでそれも過去の事になる。 どういうことか説明しよう。 モバイルWebをReactするザッカーバーグがHTML5は終わったと宣言した翌年、フェイスブックのエンジニアの一人であるジョーダン・ウォークがWeb開発の新しいアプローチであるReactJSを生み出した。 ReactJSは開発者がJavaScriptのスキルを活用し、アプリ開発をシンプルにできるようになった。しかし他にも多くあるイノベーションのうち、

React.jsについての基本的なところを書いていきます！ 公式読めばわかるようなことが多いですがReact.jsに興味をもつきっかけにでもなれば...。 v0.12.1で確認しています。 こっちは一人で書くように作ったものなので書きたい人はVirtualDOMに書くといいと思います。 (書く人がいなくて1人で書いているわけではない) この記事は古いので下記の更新情報も参考にしてください http://blog.koba04.com/post/2015/03/05/react-js-v013-changes/ http://blog.koba04.com/post/2015/09/22/react-js-v014-changes/ http://blog.koba04.com/post/2016/03/09/react-js-v15-changes/ http://blog.koba04.

コンポーネント管理できそうなライブラリの選定 ここでいうコンポーネントは HTML 要素をコンポーネントに見立てるような、近代 Web フロントエンドにおける狭義のコンポーネントです。大まかな条件は次の3点。 コンポーネント中心の開発ができること >= IE9 をサポートすること（切っても良さそうなんだけど...） 既製品・スクラッチは問わないが極端なリスクは踏めない（納期がシビア） あとは期待度や API のセンスなど、個人的な審美眼判定に依ります。 angular/angular : 2.0 が正式リリースしたらまた会いましょう jashkenas/backbone : 最近のコンポーネント管理には及ばない Custom Elements ( Polymer ) : polyfill が >= IE10サポート segmentio/deku : 振る舞いは十分だったけど、>= IE10

「最近のReactへの言及についての違和感」というエントリ書いたら燃えますかね— イカid:mizchi0x (@mizchi) 2015, 6月 7 僕がみた資料の中でFluxの設計について正しい理解をしていると思えるのはげたさんのこの資料だけです https://t.co/XaKHhhuP2A— イカid:mizchi0x (@mizchi) 2015, 6月 7 みんなsetStateに騙されてる— イカid:mizchi0x (@mizchi) 2015, 6月 7 一部で「React使うとコード量が増える」という意見、サーバサイドで書いたテンプレートのレタッチをするjQueryと比べたらそりゃそうなんだけど、SPAでそもそもJS側がテンプレート握るような環境では handlebars とかで書いてたところが JSXになるだけでそれ移行コスト— イカid:mizchi0x (@mi

Talk about ReactJS and how to turn your development process to much easier and simple.