はじめに
これが初の投稿なので何かお気づきの点等あればご指摘いただけると助かります。
今回初めてプログラミングスクール内でポートフォリオをMVPリリースしたので、
実装の際に意識したこと感じたことについてまとめてみました。
特に私のような初学者の方向けに書いてみました。
少しでも実装の参考になれば幸いです。
ちなみにMVPとは
Minimum Viable Product、顧客に価値を提供できる最小限のプロダクトのことです。
要するに最小限の機能でサービスをリリースするということですね。
MVPリリースのメリットは
最小限の機能を備えた状態でユーザーからのフィードバックをもらうことで
ユーザー目線で実装・改善が進められること、効率よくサービスの開発が行えることです。
MVPの考え方については以下のサイト等を参考にしていただければと思います。
前提
私はプログラミングスクールのRUNTEQで半年ほど勉強をしてから開発に取り組みました。
元々のプログラミングの知識はゼロです。
平日は正社員勤務しながらの実装でした。
作成したサービスの内容はWeb系のデザイン初心者向けの情報検索サービスです。
スクール外への公開はまだ先の予定なので
今回は文章のみでイメージを掴んでいただければと思います。
意識したこと
初めて１から自分でサービスを作ったのでせっかくなら自分の身になるものにしたいと思い、
以下の目標を掲げて実装を進めていくことにしました。
・MVPリリースまでの速さを意識する
・MVP段階でレスポンシブデザインを導入する
・自分の使用したことのない技術も取り入れる
上から理由を上げていきます。
- ・MVPリリースまでの速さを意識する
- 締切意識を身に付けるため。
実務に入ってからは開発にかけられる時間は決められているので駆け出しの段階から
締切までにどう実装していくかを考える力を身につけたかった。 - ・MVP段階でレスポンシブデザインを導入する
- 多くのユーザーにサービスを触ってもらいやすくするため。
MVPリリースの目的はユーザーに意見をもらうことなので、どのデバイスからでも
サービスを触ってもらえる状態にして使ってもらえるユーザーを増やしたかった。 - ・自分の使用したことのない技術も取り入れる
- 実装を通して自走力を身に付けるため。
わからないことを調べながら実装していく力を定着させたかった。実務に入ってからも
知っている技術だけで実装することは少ないと思うので、学びながら実装していく
感覚を身につけたかった。
この辺りを意識して実装に取り組みました。
実装中の細かい点では
こまめに動作確認しGitにコミットすることも意識していました。
これは色々といじった後にエラーが出て
原因が何か判断するのに苦労した経験が学習過程で何度かあり、
実装でそれをしてしまうと大幅なタイムロスになると考えたためです。
これについてはデプロイも同様です。
開発環境で動いても本番環境で動作がおかしくなる、画像が表示されない、
デプロイ自体できないなど色々と問題が発生する可能性があるので
本番環境での動作確認もこまめに行いました。
そのおかげかエラーで大きくつまづくことなく実装を進めることができました。
初めて実装を行う方はこの辺りも意識してみるといいと思います。
使用技術
・Ruby 3.1.3
・Rails 7.0.4
・tailwindcss(コンポーネントdaisyUI)
・PostgreSQL
・Heroku
ざくっとですがこんな感じです。
技術選定理由
バックエンドについてはスクールで利用していたため使い慣れていて
スピード感を持って実装できると判断したRuby、Railsを使用しました。
デプロイ先についてもスピードを重視するため、調べた中で比較的容易に利用できそうだった
Herokuを選定。
Herokuでのデプロイに合わせてデータベースはPostgreSQLを利用することにしました。
自走力向上のために初使用のRails7系とtailwindcssを利用。
Railsに関しては長く運用していくことも考えて最新版を選択しました。
tailwindcssについては融通は利かせやすいけれど
その分CSSの知識はある程度必要になるという認識だったので
CSSを学びながら自由度高く実装できるかなと思い使用することを決めました。
結果
聞いてはいましたがRails7系が6系と違うところが多くなかなか手こずりましたね。。。
以下の記事を大いに参考にさせていただきました。
初めてRails7系を使う方は絶対に読んでおいた方がいいです！
この記事にも書いてあるのですがデフォルトで導入されるTurboが厄介です。
なかなかの初見殺しをかましてくるので少し予習してから実装する方が無難かと思います。笑
特にこの記事に書いてある
・バリデーション失敗時に status: :unprocessable_entity を付ける必要がある
・link_toのmethod:オプションの書き方が変わった
・destroyのレスポンスに status: :see_other を付ける必要がある
この３つは初めてだとほぼ間違いなくハマると思います。
私もこれを知らずに無駄に時間を使ってしまいました。。。
rails newに関してはcssフレームワークにtailwind、データベースにpostgreSQLを利用するため
以下コマンドで実行しました。
bundle exec rails new . -c tailwind -d postgresql --skip-test
tailwindcssとdaisyUIの導入については以下の記事を参考にしました。
こちらについては詰まることなくスムーズに導入できました。
tailwindについては公式も見やすいですしテンプレートが豊富で実装しやすかったです。
初学者が何もない状態から見た目を作っていくのはなかなか大変ですし時間もかかります。
効率よく開発を進めるためにもぜひテンプレートを活用しましょう。
最初からレスポンシブ対応もしてくれてます。
初めて利用したときはちょっと感動しました。笑
以下利用したテンプレートサイトです。
daisyUIも公式が見やすいので簡単に利用することができました。
tailwindとdaisyUIの組み合わせはカスタマイズ性が高く使い心地はかなり良かったです。
テンプレをベースにちょこちょこいじりながら挙動を確認するのはいい勉強にもなりました。
記法は特殊なので最初は使いづらい印象もありましたが
慣れてくるとかなりスピーディーかつ自由度高く扱えた印象です。
ただどこをtailwindで対応してどこをdaisyUIで対応するべきか迷うこともありました。
便利すぎる分何したらいいかわからないみたいな状態ですかね。
これは使いながら慣れていくのしかないのかなと思いました。。。
あと私のMVP段階の場合はRailsとの組み合わせだけを考えればよかったのですが
他の技術と組み合わせると使い心地がどうなるかは何とも言えません。
この辺りは今後他のcssフレームワーク等も利用して差を確かめていきたいと思います。
HerokuへのデプロイについてはRails7系だからと言って特段困ることはなかったですね。
手軽にデプロイが出来ると実装に集中できるので、Herokuを選んだのは正解でした。
ただ有料になってしまったのはやはり痛い。笑
独自ドメインも取得したのでインフラについては本リリースに向けて
変更も視野に入れながら実装していきたいと思います。
実装した機能とかかった時間
実装した主な機能は
・検索機能
・デザインに関する情報の登録機能
・ユーザー登録機能（実装のみでMVP時は不要なため非表示）
・管理者機能
・デザイン初心者向けの簡易ロードマップページの作成
この辺りを実装してかかった時間はおおよそ2週間でした。
感じたこと
今回の開発を通して、
結局自分で何か作ってみないとわからないことが多くあると感じました。
自分がどの程度のスピードで実装ができるのか、見た目を作るのが得意なのか、
機能を作るのが得意なのか、どういう技術を使っているときに楽しみを感じるのかなどなど。
特に自分とユーザーの考え方の乖離については何かを作って誰かに見てもらわないと
気づくことはできないと思います。
私自身実装しながら、これ他の人から見たらどうなんやろ？と思うことが多々ありました。
自分にとっては魅力的でも他人の目から見たらイマイチなんてよくあることだと思います。
逆もまた然りです。
よく聞く話ではありますが、とにかく早く動くものを作り
それを人に使ってもらうことはやはり重要だと感じました。。。
締切意識を持って実装したのはいい経験になりました。
個人開発なのでやろうと思えばいくらでも作り込めるかもしれませんが
間延びさせてしまうとモチベーションも上がらないと思うので
少しタイトめな締切を自分で設定した方が緊張感を持って実装できるのかなと感じました。
まとめ
初学者がサービスを作るときはこの辺りは意識したほうがいいと感じました。
・何かしらの目標を定めてから開発に取り組む
・とにかく早く開発に手を付ける
・早めに誰かに作ったものを見てもらう
私はじっくり勉強してからにしようと半年勉強してから開発に着手しましたが悪手でしたね。
もっと早く開発を経験していればその後の勉強方法なども改善できていたと思います。
今回の経験を活かし、今後はどんどん動くものを作っていきたいと思います。
最後までご覧いただき、ありがとうございました。