見出し画像

ProgateとRails Tutorialを用いてRails歴3か月の初心者がwebサービスを作った話

初めまして!minaと申します。

実はちょうど1週間前「Nomalog」というノマドカフェ専用投稿サイトを公開したところ、ありがたいことに多くのいいね、リツイートをいただきました。そのツイートを通して「Nomalogを作るまでの過程について聞きたいです!」という声をいただくことがあったので、ざっくりとまとめてみたいと思います。(分かりにくかったらごめんなさい)

1.Ruby on Railsの勉強を始める(1/27〜)
Ruby on Railsを勉強し始めたきっかけは、自分の作ったサービスを誰かに使って欲しいと思ったからです。HTML / CSSは去年から勉強していたのですが、それだと静的なサイトは作れても投稿機能などは実装できず「見て終わり」になるなと感じていました。そこで、RubyやPHPのようなサーバーサイドの言語を勉強したら動的なサイトが一から全て自分で作れるということに気づき、勉強をし始めました。
ちなみにRubyを選んだ理由は、独学だったためネット上に情報が多いものでないと挫折してしまうと考えたからです。あと、ProgateのRuby / Railsコースが充実していたからです。

2.ProgateのRailsコースを2, 3周する(3週間)
タイトルのまんま、ProgateのRailsコースを2, 3周しました。ここでポイントだったのは、「ProgateのRailsコースを2, 3周すること」ではなく、「自分が理解できるまで何周もする」ことだと思ってます。私も全コース2, 3周したわけではなく、すぐ理解できたところは1周で終わったり、逆に理解できなかったところは4周したこともありました。
あくまで目的はRailsコースを理解することなので、「3周すること」などがゴールにならないように気をつけました。

3.Rails Tutorialを2周する(5週間)
実は、プログラミングを始めて割とすぐの時にいきなりRails Tutorialをやって挫折した経験があります。その経験もあってかRails Tutorialには非常に抵抗があったのですが、今回はProgateをやったしいけるはず!と思って意気揚々と望みました。そして、3日で挫折しました。
原因としては、Rails Tutorialを1から10まで1回で理解しようとしたからです。やはり、Progateをやった今でもRails Tutorialは難しいですしボリュームもあるので、1回で理解しようとせず2回でも3回でも繰り返したほうが身につくなと思います。分からないところは「ふーん。こんな感じなのね。」ぐらいの感じで流しつつ、1周目はテストと演習は飛ばしました。まずは1周して全体の流れを掴んでから、詳しく見ていく戦法にチェンジしました。
この後本当はRails Tutorial3周目をしようとしていたのですが、Nomalogの内容がほぼRails Tutorialと被っていたのもあり、ただ3周目をするよりも自分の作りたいサービスに寄せて実装していったほうが愛着がわくし身につくかな、と思ってNomalog作成に取り掛かりました。

4.モックアップ作成(1.5週間)
いよいよNomalog作成に動き出しました!この時点でRailsやり始めて2ヶ月ぐらいですかね。
まずは実装できるかどうかは置いといて、入れたい機能とかデザインとかをひたすらevernoteに書き出しました。そのあと、それを見ながら必要なページとか機能を洗い出して、ラフ画を書きました。(汚いです)

画像1

そのあと、ラフ画に沿ってPhotoshopで全ページモックアップを作りました。ここで気をつけたのは、本当にそのデザインや機能は必要なのか考えながら作ることでした。

5.Railsで機能の実装(4週間)
ついに人生初のオリジナルサービスの実装!といっても、Rails Tutorialに沿って作りつつ、Nomalogに必要な機能は別途Googleで調べながら実装しただけです。
多分実際の現場ではCSSで見た目を作ってからRailsで実装していくと思います。しかし、今回は初めてのRailsだったこともありモックアップ通りに機能を実装できる自信がなかったので、CSSが先だと無駄な時間を使うことになるかなと思い先にRailsでの実装に取り掛かりました。(実際、予定していた半分ぐらいしか実装できなかったのでこの判断は正しかったです。)
そんなこんなで一つのエラーに3週間悩んだり(やばい)などざらにありましたが、なんとか実装し終わりました。

6.CSSで見た目を整える(0.5週間)
CSSはモックアップを作っていたのでそれ通りに作ればよかったのと、去年からHTML, CSS, jQueryを触っていたこともあり結構すぐに終わりました。本当はbootstrapなど使って効率的に書けばよかったのだと思いますが、個人的にフロントエンド周りのコーディングするのが好きなので全部1からかいてます。
特にpc, spの両方の良さを活かせるようにレスポンシブ対応はもちろんのこと、情報量を変えたりsp時はボトムナビゲーションをつけるなど工夫してみました!

pc

画像2

sp

画像3

7.ついに完成、リリース(5/20)
そんなこんなで完成です!Nomalog作っていた1ヶ月半は、プログラミングを始めてから一番体調が悪くなりました(笑)
エラーは解決しないし、自分のデザインやコーディングのセンスのなさに毎日絶望し、作ったからって誰に褒められるわけでもありません。毎日モチベーションは0どころかマイナスでした。それでも、どうせ作り始めたなら誰かに使ってもらいたいというモチベーションだけでなんとか完成に至りました。蓋を開けてみれば多くのかたに拡散していただき、使っていただき、FBを頂き、本当に公開してよかったです。ありがとうございました!

終わりに
気づいたらとても長くなってしまいましたが、最後まで見ていただきありがとうございました。何かを作り、そしてそれを誰かに使ってもらえるという経験は何物にも変えがたいです。
ぜひこれを読んだ皆さんも何か作ってみてください!もし完成したらコメントなりTwitterのDMなりで教えていただけると嬉しいです〜!!

Nomalog
私のTwitter

追記(2018/6/5)
なんとNomalogがRails Tutorialの完走者の開発事例で掲載されました!!🎉
自分がRailsを勉強する際にとてもお世話になった教材の一つなので、とても嬉しいです。お声がけいただいた安川さん、ありがとうございました!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

トマトプリッツに還元されます

87

コメント1件

タグ検索より流れてきました。Railsを始めてから完成までの3ヶ月間を丁寧に書かれていて、自分も勇気をもらいました!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。