ProgateとRails Tutorialを用いてRails歴3か月の初心者がwebサービスを作った話
はじめに
初めまして！mina（@itsminadesu）と申します。
実はちょうど1週間前、「Nomalog」というノマドカフェ専用投稿サービスを公開したところ、ありがたいことに多くのいいね & リツイートをいただきました。
そのツイートを通して「Nomalogを作るまでの過程について聞きたいです！」というお声をいくつか頂いたので、ざっくりとまとめてみたいと思います！(分かりにくかったらごめんなさい🙏)
800いいね、160リツイートありがとうございます🙇♀️
1. Ruby / Railsの勉強を始める
勉強し始めたきっかけは、自分の作ったサービスを誰かに使って欲しいと思ったからです。
HTML / CSSは去年から勉強していたのですが、それだけだと静的なサイトは作れても投稿機能などは実装できず、「見て終わり」になるなと感じていました。そんな中、RubyやPHPなどのサーバーサイド言語を勉強すれば動的なサイトを作れるということに気づき、勉強をし始めました👩💻
ちなみにRubyを選んだ理由は、独学のため周りに聞ける人が1人もおらず、ネット上に情報が多いものでないと挫折してしまうと考えたからです（今思えば良い選択だったなと思っています）
2. ProgateのRuby / Railsコースを2, 3周する(3週間)
タイトルのまんま、ProgateのRuby / Railsコースを2, 3周しました。
ここで気をつけていたのは、「Railsコースを2, 3周すること」ではなく、「自分が理解できるまで何周もする」ことでした。私も全コース2, 3周したわけではなく、すぐ理解できたところは1周で終わったり、逆に理解できなかったところは4周したこともありました。
あくまで目的は理解することなので、「3周すること」などの定量的なものがゴールにならないように気をつけました。
3. Rails Tutorialを2周する(5週間)
実は、プログラミングを始めてすぐの時にいきなりRails Tutorialをやって挫折した経験があります。その経験もあってかRails Tutorialには非常に抵抗があったのですが、今回はProgateをやったしいけるはず！と思って意気揚々と望みました。そして、3日で挫折しました。笑
原因としては、1回でRails Tutorialを1から10まで理解しようとしたからです。やはり、Progateを先にやっていてもRails Tutorialは難しいですしボリュームもあるので、1回で理解しようとせず浅い理解でも2回でも3回でも繰り返したほうが身につくなと感じました。分からないところは「ふーん。こんな感じなのね。」ぐらいの感じで流しつつ、1周目はテストと演習は飛ばしました。まずは1周して全体の流れを掴んでから、2周目以降で詳しく見ていく戦法にチェンジしました。
この後本当はRails Tutorial3周目をしようとしていたのですが、Nomalogの内容がほぼRails Tutorialと被っていたのもあり、ただ3周目をするよりも自分の作りたいサービスに寄せて実装していったほうが愛着がわくし身につくかな、と思ってNomalog作成に取り掛かりました🚀
4. モックアップ作成(1.5週間)
いよいよNomalog作成に動き出しました！この時点で勉強し始めて2ヶ月ぐらいです。
まずは実装できるかどうかは置いといて、入れたい機能とかデザインとかをひたすらNotionに書き出しました。そのあと、それを見ながら必要なページや機能を洗い出して、ページごとにラフ画を書きました
そのあと、ラフ画に沿ってPhotoshopで全ページモックアップを作りました(デザインツールに慣れてない人はAdobeXDとかの方が使いやすいかな思います)
5. 機能の実装(4週間)
いざ実装！といっても、Rails Tutorialに沿って作りつつ、Nomalogに必要な機能は別途調べながら実装しただけです。
1つのエラーに3週間悩んだり(やばい)などざらにありましたが、なんとか気合いで実装し終わりました
独学開発はとにかくエラーとの戦いなので、TeratailやStackOverflowで質問したり、日本語 / 英語問わず検索しまくるのがおすすめです💡
6. CSSで見た目を整える(0.5週間)
CSSはモックアップを作っていたのでそれ通りに作ればよかったのと、去年からHTML, CSS, jQuery周りは触っていたこともあり結構すぐに終わりました。
個人的にフロントエンド周りのコーディングするのが好きなので、CSSフレームワーク等は一切使わずフルスクラッチで1からかいてます(CSSに慣れてない人はBootstrapなどを使うと良さそうです)
特にpc, spの両方の良さを活かせるようにレスポンシブ対応はもちろんのこと、表示内容をデバイスによって変えたりなど工夫してみました！(ex. sp時はボトムナビゲーションにしたり、pc時はサイドバーを表示したりなど)
7. ついに完成、リリース(5/20)
そんなこんなで完成です！Nomalog作っていた1ヶ月半は、プログラミングを始めてから一番体調が悪くなりました笑笑
エラーは解決しないし、自分のデザインやコーディングセンスのなさに毎日絶望し、大学も死ぬほど忙しく、モチベーションは0どころかマイナスでした。
それでも、「どうせ作り始めたし、誰かに使ってもらいたい！」というモチベーションだけでなんとか完成に至りました。蓋を開けてみれば多くのかたに拡散していただき、使っていただき、FBを頂き、本当に本当に公開してよかったです。ありがとうございました！
おわりに
気づいたらとても長くなってしまいましたが、最後まで読んでいただきありがとうございました。
何かを作り、そしてそれを誰かに使ってもらうという経験は何物にも変えがたいです。このNoteを読んだ方で、もし何かサービスを作った方がいらっしゃいましたら、コメントなりTwitterのDMなりで教えていただけばすぐ見に行きます💨
追記(2018/6/5)
なんとNomalogがRails Tutorialの完走者の開発事例で掲載されました！！🎉
自分がRailsを勉強する際にとてもお世話になった教材の一つなので、とても嬉しいです。お声がけいただいた安川さん、ありがとうございました！
追記(2018/12/31)
Nomalogリリースツイートが800いいね / 160リツイートになりました！🎉
いいね、コメント、リツイート、その他FBを下さった皆さんありがとうございます！
トマトプリッツに還元されます