はじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。 バックエンドはRailsだが、あくまでAPIサーバー的な立場なので メジャーなomniauth なんかは使えそうにない。。。 前回のGoogle編に続き、今回はTwitter編。 あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、 実装のエキス部分だけを記載してみます。 Twitter Developerにア…
Read moreはじめに ReactでSPAを作ることになって、ログイン認証にメール＆パスワードの認証に加えて、 GoogleやTwitter認証も加えたくなった時、どうすればよいかわからなかった。 バックエンドはRailsだが、あくまでAPIサーバー的な立場なので メジャーなomniauth なんかは使えそうにない。。。 あれこれ悩みながらなんとか動くところまでたどり着いたので、やり方を公開。 React+Reduxの環境なんですが、そこまで立ち入ると話がややこしくなるので、 実装のエキス部分だけを記載してみます。 Google Developer Consoleにアプリ登録 Google Develope…
Read moreはじめに React+Redux+RailsでSPAアプリを作ることになったので、あれこれ調べたのでメモです。 SPAというと、当然ですが、１つのページであれこれできちゃうものを作らなきゃいけないわけで・・・ そうなるとコンテンツ制御の仕組みが必要です。そこで登場するのがReact-Router-Dom。 で、これ単体では使い方簡単なんですが、RailsとReduxを絡めて動作させる方法が分からなかったので あれこれ調べて、なんとか動くところまでたどり着いたので、メモを公開します。 React-Routerは古いようで、React-Router-Domにしてみました。。 ドキュメントが超少なく…
Read moreはじめに ここ3週間ほど死ぬほどReactとReduxやって、あれこれ分かるようになったので、これからReact+Reduxで開発を始めたい人向けに記事を書いてみます。 公式サイトの英語記事や、それを翻訳してくれているようなサイトを見てもそれなりに分かるのですが・・・ なんだかんだ言って難しい。 Reactの理解はなんとか出来ても、Reduxが特に難しい。 欲張りなんですが、とにかく両方をサーッと理解して、さっさとアプリ組みたいよという方の助けになれればと・・・ 考えていく手順 画面イメージ 画面を構築するためのコンポーネント階層図 ステート イベント 基本的にこの４つを考えればOKです。 既…
Read moreはじめに 前回、React NativeをAndroid Studioと組み合わせてインストールし、HelloWorldを出せるところまで たどり着きました。 今回は一足飛びで、React NativeとReduxをフロントエンドに使い、バックエンドにRailsを用いた 掲示板アプリを作ってみましょう。 前提として、Railsはそれなりにわかっている。Reactもよく分かっている。Reduxも知っている。 ぐらいのレベルを前提にしています。 出来上がったアプリは、デザイン的にどんくさいですが、これは私がまだReactNativeの スタイルの方法を学んでいないためです。まぁそれはおいおいブラッ…
Read moreはじめに React Nativeを試したくなって、インストールから、あれこれしてみました。 結構苦労したので、Hello Worldを出すぐらいのところまでを、メモとして記載しておきます。 インストールは 本家のページの「Getting Started」を見ながらで大体出来るのだが・・・ Android Studio自体も初めて触ったので、ちょっと迷って、困ったのでそのへんも・・・ インストール 以下のGetting Startedに沿って始めてください。 Getting Started https://facebook.github.io/react-native/docs/getting…
Read moreはじめに Reduxを勉強して、ようやく大筋を理解し、Railsとの連携方法も分かったので、 Rails＋React+Redux＋Ajaxの組み合わせでちょっとした掲示板を作ってみました。 Rails＋React+Redux＋Ajaxの組み合わせで必要なノウハウはだいたい組み込まれていると思います。 ここで紹介するソースはGitHubのここで公開していますので自由に利用してください。 対象とする読者は Railsはそこそこ知っている。Reactも勉強した。Reduxも勉強した、もしくは勉強中である という方が対象です。 Rails + React + Reduxの環境を整える これに関しては書…
Read moreはじめに RailsとReact、Reduxを組み合わせてアプリを構築するための準備手順をRedux本家のTodoサンプルを使って示してみます。 React、Reduxはnpm（node_modules）でインストールしたものを使うこととします。 最終的に動いた形のイメージはこんな感じ。 最終的なソースツリーはこんな感じ Railsアプリの新規作成、React導入
|
1 2 3 4 |
$ rails new rails_redux $ cd rails_redux/ $ nano Gemfile |
足りないGemを3つ追加して、bundle install 末尾に追記
|
1 2 3 |
+ gem 'therubyracer', platforms: :ruby + gem 'react-rails' + gem 'browserify-rails' |
bundle install…
Read moreはじめに Reactの勉強をはじめて、大雑把に理解したら、Reduxの勉強をしたくなりますよね。 しかしまぁ・・・Reduxムズイ！！ となるわけで、とにかくRedux本家にあるTodoのサンプルのソースを眺めるも・・ わかったようなわからないような状態になる。 兎にも角にも、実際に動かしてみなきゃ始まらない。そのための環境を作るのも 最初はちんぷんかんぷんだったりするのですよね・・・ なので、Redux本家にあるTodoサンプルをnpm と Webpackを使って最小環境を作って 動作させるところまでたどり着くのが今回の目標です。 Todoサンプルの内容には踏み込みません、あくまで動くところ…
Read moreはじめに RailsとReactJSを用いてちょっとした掲示板を作ってみましょうというのが今回のコンセプト。 前回のVol.1は掲示板一覧を表示することだけで終わってしまいましたが、今回は本格的な 掲示板機能を実装してみます。多分長くなると思いますので、よろしくお付き合いください。 前回に引き続き、これから何回かにわたり連載する内容はGitHubの下記のURLで公開しています。 https://github.com/h-mito/rails_with_react ステートの管理やら、イベントの引き渡し方がいまいちわからないという方は、 Railsとは関係ない ToDoListの記事 を参照して…
Read more
最近のコメント