持ち物リストをシェアするWEBアプリをリリースしました。

私はフィヨルドブートキャンプというプログラミングスクールで去年の10月から勉強をしています。

最終課題で持ち物リストをシェアするWEBアプリを作成しました。本記事ではその紹介をしたいと思います。

就活ではポートフォリオにするWEBアプリです。

目次

何を作ったのか

SHARECAMPという名前の
持ち物リストの共有サービスを作りました。

キャンプなどでグループで１つか２つあればいい持ち物を、事前に誰が持ってくるか決めるまでの手間を解決することができます。

herokuにアプリを公開しているので、気になる方は見に行ってみてください。

sharecampport.herokuapp.com

バックエンドはRuby on Rails、フロントエンドはVue.js、DBにはpostgresqlを使用しています。

何ができるのか

ユーザーは、持ち物分担リストを作成することができます。

作成した持ち物分担リストから、持っていきたい持ち物があった場合は、数を入力して「持っていく」の登録をすることができます。

誰が何を持っていくのか見ることができます。 自分の持ち物も、見ることができます。

URLを知っている人のみが、持ち物リストにアクセスできます。

もちろんリストの編集や削除などもできるようになっています。

このサービスを作ろうと思った経緯

自分はキャンプが好きで、月に何度か友人を誘いキャンプに行くことがあります。

その際、グループに１つか２つあれば良い持ち物(まな板やクーラーボックスなど)
がありますが、その持ち物を誰が持ってくるか決めるのが手間という問題がありました。

例えば、既存のサービスの問題点として、以下の点がありました。

• LINEだとトークが流れてしまう。その結果忘れ物をしたり、見返すためにトーク履歴を遡ることになる。
• Google Formだと持ち物リストの表を作るのが面倒、誰が持っていくかまで書くと見にくい。

そんな背景があり、簡単に持ち物リストを作成、共有できるサービスを作りたかったという理由でこのサービスを作ることに決めました。

工夫したポイント

このサービスは、ログイン不要で全ての機能が使えます。 対抗サービスとなるLINEやGoogle Formより、「楽であること」がユーザーに使ってもらうために大切なポイントだと考えたため、そのような設計にしました。

持ち物リストを見ることができるのは、持ち物リストを作った人と、持ち物リストのURLを知っている人だけです。

持ち物リストを作ったらすぐに共有できるように、URLのコピー機能を実装しています。

./app/models/event.rb

before_create :generate_token

  def generate_token
    self.id = loop do
      random_token = SecureRandom.uuid # 持ち物リストのidをuuidにしている。
      break random_token unless self.class.exists?(id: random_token)
    end
  end

WEBサービスを作る中で、成長できたこと

• 0⇨１を作るという経験

今まで何かプログラミングをするときは、初めから「何を作るか」が決まっている状態でした。

それが今回は、「何を作るか考える」ところから始まり、日常に潜む不便がないか、アンテナを張り巡らせました。 どのようなWEBサービスの機能を作り、問題を解決していくのか考えることは、自作WEBサービスを作ろうとしなければ経験できないことでした。

• RSpecの書き方が分かった

フィヨルドブートキャンプのカリキュラムには存在していない、RSpecの書き方を新しく覚えることができました。

• やることがたくさんあるので、タスクを切り分けていくことが大切だと思った

このサービスを作るのに３ヶ月くらいかかりました。

DBやURLの設計、機能の設計、デザイン、コーディングなど全部一人でやるので、やることが膨大です。

頭がパンクするので、タスクを切り分けていくことの大切さを再度実感しました。

自作サービスを作り終わって感じたこと

「ほとんど困ることはなくて作れたな」という感じました。 エラーが出ても一人で解決できるし、VueもRailsもやりたいことは実装できるレベルになっていました。

自作サービスに取り組む前、取り組んでいるときは、本当にこんなことできるのか不安だらけでしたが、フィヨルドブートキャンプのプラクティスが自作サービスのところまで来ていれば、
意外と力がついていて作れるようになっています。

自分の成長を感じました。

自作サービスを作る上で、難しかったこと

• デザインを考えること

cssのデザインコーディングはまだ良いのですが、その前の「デザインを考える」という部分で大苦戦しました。 「ユーザーにとって使いやすいデザインは何か」を考えて形にしていくのは、デザイン経験のない自分にとっては非常に難しかったです。 ただ、フィヨルドブートキャンプではデザインレビューをしてもらえるので、非常に助かりました。ありがとうございます。

• どんなサービスを作るか考えること

このSHARECAMPのサービスを思いつく前に、たくさんのボツ案を考えています。

例えば、サウナのスタンプラリーだったり、調理器具を使わない簡単料理のみのクックパッド的なやつ、HITT(時短ダイエットレーニング)を推奨する何か　だったり、、、

どれも既存のサービスで解決できたり、WEBサービスを作ってまで解決する必要がなかったり、ユーザーが全く集められないサービスになりそうなどなどの色々な理由でボツになりました。

実用的なサービスを考えるのは、かなり難しかったです。

今後サービスに追加したいこと

• 機能追加(メモ機能、単位入力機能、管理者ログインなど)
• HEROKUではなくAWSでデプロイ
• dockerの導入
• CircleCIの導入

などを考えています。 もちろん何か良さそうな要望やプルリクなどがあれば改善していきたいです。

サービスを作る上で、一番やって良かったこと

Getting Realという考え方で、とにかく最小限のシンプルな機能でサービスを作るということです。 シンプルな機能でサービスを作るメリットとして

• 不要な機能を追加したためにサービスで解決したいことの軸がブレる
• 誰にも使われない不要な機能を実装する時間をカットできる

などの点がありました。

一人でサービスを作るのはとても時間がかかるので、機能を取捨選択することが、分かりやすく使いやすいサービスへの完成への近道でした。

どれくらいの時間かかったか

• どんなサービスを作るか考える　→　８週間くらい
• ペーパープロトタイプを作る(デザイン、機能設計) → 2週間くらい
• 仕様、使う技術を考える(詳細設計)　→ 3日くらい
• コードを書く　→ 　３週間くらい
• レビューに出す
• レビューを反映する　→４週間くらい

本格的に着手してから完成まで２ヶ月くらい、細かい修正や設計から含めると３ヶ月くらいかかるイメージでした。

まとめ

１年前は技術的に絶対に自作サービスなんて作れるレベルではなかったので、今まで学習してよかったなーと思い圧倒的な成長を感じています。 自分の作りたいものが形になっていくのは、楽しかったです！

このポートフォリオを引っ提げて就活頑張りたいなと思っています。