2020.02.07

Rails初心者が独学でWebアプリを作ってみた【製作期間約3ヶ月】

はじめに

Rails初学者の僕が3ヵ月ほど費やしてWebアプリを作ってみました。昔Javaを少しやっていたので、完全に初学者ってわけではないですが。

始めはプログラミング学習が苦痛以外の何物でもなかったのですが、理解するにつれ、前みたいな苦痛は感じづらくはなりました笑

 

 

作ったもの

シンプルな特化型画像投稿サイトを作成しました。せっかくなのでこのままサイト運営していきたいのですが、URL直打ち対策とかフロント側が適当だったりするので、対応しないといけない部分がまだまだあるのが現状です。まぁ今のところはプロトタイプということで。

そんな感じですが、herokuに公開しているので、試しに触ってみてください!感想や意見をTwitter、ブログ問い合わせ等からいただけたら嬉しいです。

 

デレステSS保管庫(仮) - ベストなスクショを投稿して皆と共有

https://derephoto.herokuapp.com/

このWebアプリはデレステ専用の画像投稿掲示板です。twitterからログインして画像投稿するだけ!フィルター機能が売りです。

ありそうでなかった、そんな特化型掲示板。

 

 

使用している技術

  • Ruby  ...  使用言語
  • Ruby on Rails  ...  webフレームワーク
  • PostgreSQL  ...  DB
  • Bootstrap  ... CSSフレームワーク
  • Git  ...  バージョン管理
  • Heroku  ...  サーバ
  • Javascript  ...  フロント(非同期通信)

 

デレステSS保管庫(仮)とは

その名の通り、デレステのスクリーンショットを投稿してかわいいを共有できるサービスです。レスポンシブ対応しているので、スマホ端末で撮ったスクショをスマホからそのまま投稿可能。ソートでお気に入りキャラのスクショを拝めることができます。その他ソート機能も随時追加していく予定。ユニット別のソートetc...

 

 

何故作ろうと思ったのか

僕自身よくTwitterでデレステのスクショを見たりしているのですが、どんなに素晴らしい切取りでもTwitterの仕様上埋もれてしまって、なんだかもったいないなぁと思ったのが作成に至る経緯です。あと主要の機能が単純なので、初心者の僕でも作れそうだったからです。今の状態だとさすがに使われることはないですが今後もブラッシュアップしていけたらなーなんて思ってます。それまでデレステが下火にならなければいいが。。

Ruby on Railsを選んだ理由

2019年当時のweb業界でトレンドの言語はなにか調べてみましたが、情報が錯綜していて逆に混乱してしまったり。。ここで悩んでいても時間の無駄なので、「日本で開発されたプログラミング言語で、webに情報が多そう」という安直な考えでRubyを選択しました。

Rubyでわからないところがあってもググればなんとかなりましたし、なによりrailsチュートリアルの存在がでかい(情報が網羅的)。ただ、なんてググればいいのかわからない時が時々あり、買っておいた参考書がその時になって初めて役に立ちました。辞書的に持っておくとやはり便利。

 

プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)

新品価格
¥3,278から
(2020/2/13 08:58時点)

 

一通り開発してみての感想

独学で進めてきた身として、Railsチュートリアルはバイブル的な存在となりました。とはいえ、今はMVCではなくAPIモード?で開発が主流らしいとのことです。。vue.jsも勉強しないとなー

1周した後も何度も繰り返し見直したりしたので、MVCやRESTの概念を体系的に理解できたし、web開発における基本は押さえられたかなと思います(セッション管理等はまだよくわからん)

web上の情報だけでは解決できない場面が数回ありましたがteratailという質問サイトで有識者がわかりやすい回答をくれたおかげで解決できたりもしました。相手に伝わるような質問の仕方って案外難しいなと思いました(小並感)

今回の開発でgemに頼りすぎた感は否めませんが、とはいえ、まぁ最初だしまずは完成させることを目標にしていました。見様見真似でググりながら弄ってみるとなんとなくコードの内容がわかってきたりするので、とりあえず手を動かしてみるといい勉強になりました。変になったらブランチから抜ければいい話ですし。

 

 

今後の課題

現在のRailsにおいてトレンドはAPIモードで、MVCモデルは古いらしい。JSフレームワークを用いてViewの部分を代替する感じのもの?っぽい。

とにかくJSの知識は必要と感じたので勉強していこうと思います。まぁ僕の場合、JSの前にHTML,CSSを改めて勉強し直さないとですが。

 

フロント側は適当にbootstrapに頼り切り+コピペでよしなにやっていたのですが、さすがにこれでやっていくのは精神的にキツかったので、フロントエンドをそれなりに勉強しようと思いました。やはり初学者はHTML,CSSを最初にやるべきですね。

またJavascriptはHTML,CSSがわかっていないとまともに使いこなせないという。。ここらへんほぼコピペやったし。

なので、目下やるべきことはHTML,CSSかな!HTML,CSSを軽視することなかれ。今回で得た教訓です。