はじめに 前回、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導入 [bash] $ rails new rails_redux $ cd rails_redux/ $ nano Gemfile [/bash] 足りないGemを3つ追加して、bundle install 末尾に追記 [bash] +…
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はじめに RailsとReactJSを用いてちょっとした掲示板を作ってみましょうというのが今回のコンセプト 前回に引き続き、これから何回かにわたり連載する内容はGitHubの下記のURLで公開しています。 https://github.com/h-mito/rails_with_react モデルの作成、データベースにテーブル作成 掲示板(board)、投稿ユーザー(user)、投稿(comment)の３つのテーブルを作ります。 カラムは以下のような感じです。 rails g model でモデルとマイグレーションファイルを作成します。 [bash] $ rails g model board…
Read moreRailsでReactJSを使ってみようという企画をスタートしてみます。 まずはRailsのプロジェクトを作って、ReactJSをインストールして、HelloWorldを出力するところまでの準備編です。 これから何回かにわたり連載する内容はGitHubの下記のURLで公開しています。 https://github.com/h-mito/rails_with_react Railsプロジェクト作成、ReactJSインストール [bash] $ cd $ cd workspace $ rails new rails_with_react $ cd rails_with_react $ nano G…
Read moreでは ReactJS 第２回目いってみましょう。 今回は下図のような感じが完成図です。 単純にToDoが一覧されており、ToDoの横には削除ボタンがあり。 ToDoを追加したい場合は上部のテキストボックスに文字を入力し 追加ボタンを押す。 たったこれだけです。 まぁこのたったこれだけが結構難しいんですけどね。 ではいってみましょう。 まずは初期値となる変数をこんな感じで用意します。 [bash] var DATAS = [ {id:1, content:”Softbank解約”}, {id:2, content:”R-SIM10購入”}, {id…
Read moreずっと前からはやっているなぁ、と思いつつ、やり過ごしていたReactJS。 ついに重い腰を上げて学習してみることにしました。 ただ、ネットで情報を漁っても、日本語で丁寧に解説しているサイトって少ないのですよね。 仕方なく本家の「Get Started」を読んで、「Tutorial」を読んで、大雑把に理解できたので、 これからReactJSを学び始める人の役に立てればいいなと思いつつ、これから何回かにわたり ReactJSの初歩（というかこれが全てか・・・）を連載していこうと思います。 まずはそもそもReactとは何をするものか・・・ というと、今の僕なりの解釈ですが、動的なコンテンツを表示する…
Read more
