41
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

RailsとReactでSNSオリジナルアプリケーションを作ってみた。

Last updated at Posted at 2018-03-25

Rails1ヶ月 → Python歴9ヶ月 → ReactとRails3ヶ月というようにまたWebの世界に戻ってきました。

JSだけでネイティブアプリ、Webアプリ、デスクトップアプリが作れるのを知り惚れ込んで勉強してるのですが、アウトプットがなかったのでMiLMiLというオリジナルアプリを作ってみました。

とにかくSPAっぽいもの作ってみたかった・・・

期間は大体1ヶ月くらいです。全然バリデーションとかViewとか作り込めてないので(あんまり作り込む気はない)デプロイとかはしてないです。

Top

トップページはこんな感じ。

oriapp.gif

ホーム

oriapp2.png

こんな感じでマウスオーバーするとユーザー情報が見ることができます。

スクリーンショット 2018-03-25 9.55.43.png スクリーンショット 2018-03-25 9.55.56.png

投稿ページ

oriapp3.gif

Fabric.js を使うとCanvas内で自由に動かせることができるので採用しました。

これをスクリーンショットしようとするとcrossorigin問題が発生して、解決策を模索中・・・。ホーム画面のcanvasが真っ白なのはこれが理由です。

マイページ

oriapp4.gif

こんな感じでいいねやイマイチを付けてくれた人を男女別にグラフで出したり、年代別でグラフを出してくれます。

MiLMiLは何ができるのか?

ざっくり説明すると・・・

アプリ内で自由にコーディネートを作成することができ、それをみんなに知ってもらい評価してもらう感じです。

こだわりとしてシンプルにしてみたのですが、シンプルすぎて寂しい感じになってしまいました。

## 環境

バックエンド ・・・ Ruby on Rails
フロントエンド ・・・ React(Reduxなし)
デザイン ・・・ CSS, MaterialUI
データベース ・・・ MySQL

 バックエンドの言語はなんでも良かったのですが、 ちょっと使ってみたことがあるRailsを採用しました。とにかくReactを使ってシングルページアプリケーションを開発してみたかったので。

実際シングルページアプリケーションっぽいものを作った感想は、Reactに慣れてないのもあると思いますがものすごく大変でした。Rails+jQueryだけで完結するアプリの方がスピーディーに作れるでしょう。

スケジュール

1月~2月 React,Javascriptの勉強
3月 実装!!

とりあえず実装!!っていう感じで進めてて設計とかなんも考えてませんでしたw

JSを何も知らなかったのにReactから入ったのは失敗だったかなと感じてます。

Reactだけで開発するのであればコンポーネントの設計は欠かせないなと感じました。あとで修正するときにものすごく大変です。こんな時にReduxの出番!!

オリジナルアプリを開発中に感じたこと

このアプリ微妙じゃね!?

作ってるとこれはなんのために作ってるの!?というつまらない感覚が出てきます。最初にこのアプリはどんな問題を解決するのかということを明確にした方が持続しやすいと思います。(練習なら大丈夫です!)

デザインセンスが壊滅的

sketchでモックアップを作ってみたのですが、その時点で壊滅的でした。ノンデザイナーなのにBootstrapを使ってないのは致命的です。

デザイナーは偉大です!!

41
46
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
41
46

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?