Help us understand the problem. What is going on with this article?

「え!?いつのまに新刊出てたの!?」を解消するアプリを作りました【ポートフォリオ解説】

はじめに

実務未経験者がどうやって・どんなポートフォリオを制作したのか
ポートフォリオの解説→意識したこと・苦労したことの順で解説します。

よければ読んでみてください

コンセプト

「え!?いつのまに新刊出てたの!?」を解消する

好きなマンガや小説など・好きな作家を登録しておくと新刊の発売3日前にメールでお知らせします
ちなみにアプリ名はブクシルです。「ブック」+「(新刊の発売を)知る」ですね。
我ながら気に入ってます。寒くないです。だれですか寒いって言ったの。

使用イメージ

書籍の検索ができます(楽天API使用)

search

お気に入り登録ができます(作品のシリーズと作者名)

favorite

発売3日前にメールでお知らせします

output_0000.png

開発背景

せっかくポートフォリオをつくるんだったら、だれかの役に立つものが作りたいと思い、以下の流れで作り始めました

  1. 周囲の知人・友人に「どんなサービスがあったら便利か」「日常生活で不便に感じていることはないか」とヒアリング
  2. 「気づいたら新刊が発売されていることがあるから事前に知りたい」との意見を聞く
  3. 自分自身、読書が趣味で同じ悩みを持っていたこともあり、それを解決できるアプリを作りたいとの想いで製作開始

使用技術

フロントエンド
HTML/CSS(Sass)
Bootstrap 4.5.2
jQuery 3.5.1

バックエンド
Ruby 2.6.6
Ruby on Rails 6.0.3.3

API
楽天書籍ブックスAPI、楽天ジャンル検索API

RDBMS
PostgreSQL 13.1

インフラ
AWS(VPC・EC2・RDS・IAM・Route53・ACM)
独自ドメイン
HTTPS化

DB設計

一番苦労したのがDB設計です。
開発前に軽くER図を作ってからスタートしましたが、当初の構想ではうまくリレーションできず、何回も作り直すことになりました。
最終的に下図の通りになりました。
booksiru_ER_diagram

開発で意識したこと

1. エラー解決方法

実務に入ったときに先輩社員や上司の時間を無駄に奪うことにならないように
まずは自分の力で解決することを強く意識しました。
具体的には、前後することもありますがおおよそ次の順番です。

  1. エラーメッセージやログをよく読む
  2. 処理のどの段階でエラーが出ているか推測する
  3. bindnig.pryでデバッグする
  4. エラー内容を検索する。(なるべく一次情報から読み解くことを意識。)
  5. どうしても解決できなければメンターの方に質問する

2. 質問の仕方

Slackを使ってだいたい以下の構成で質問していました。
なるべく少ないやり取りで済み、相手の人の時間を無駄に奪わない内容にすることを意識しました。

  1. やりたいこと・困っていることを端的に表現
  2. 自分なりに試したこと (書いたコード・コマンド)
  3. 試した結果 (エラーメッセージ)
  4. わからないなりに怪しいと思っている部分を述べる
    ・・・違っている場合にメンターの方から意見を頂ける
    →理解が深まり、以降の質問を減らせる
  5. GitHubのソースコードを記載・・・思わぬところにエラーの原因があることも多いため

実務において1人でずっと悩み続けることはかえって損失になってしまうと思うので
上記の方法である程度(15~30分?)独力でやって解決できなかった場合には、端的かつ過不足ない内容で質問することで時間的な損失を最小限にすることを心がけていきたいと思います。

3. 模擬チーム開発

実務を想定して模擬チーム開発を意識しました。
・ Git, GitHubを用いたソース管理
・ 必要要件をIssuesに列挙し、タスク消化
・ featureやfixのブランチを切ってプルリクベースで開発

ただ、Issuesはプルリクと結びつけられると後で知ったので、使い方が甘かったなと反省しています。

開発で特に苦労したところ

DB設計
上でも述べましたが一番苦労しました。
リレーションについてわかったつもりでも、いざ自分のアプリに落とし込むとなるとうまくいかず、何度も紙に書いては関係性を整理しました。

楽天書籍ブックスAPIの適用
公式ドキュメントだけではどう扱うのかのイメージがつかず、調べた限りでは使用例も少なかったです。
少ない情報の中からどう自分のアプリに落とし込むのか、使用例からどこが一般化できるのか、実際にコードを書きながら試行錯誤を繰り返しました。

感想

エラー解決がめちゃくちゃ楽しい。
エラーを乗り越えたときに両手を突き上げるほど興奮したことが何回かあります。
ゲームで強いボスを倒したときみたいな感じですね。
負けては次の手を考え実行する、を繰り返して最終的に勝つみたいな。

プログラミング学習をはじめたころはエラーが怖かったと思うのですが、成長したのかなあと。
あとは仮設と検証を繰り返す作業が現職の研究業務と似ているなあと思ったりしていました。

課題/今後実装したいこと

やりたいことはまだ残っているので、ひとつずつ良くしていきたいと思います。

・レスポンシブWebデザイン(スマホ対応)
・お気に入り登録/解除時にフラッシュ表示➡実装済み
・お気に入り登録/解除時の非同期処理
・LINEログイン
・LINEのMessaging APIを使用してLINEで通知

さいごに

長い文章をここまで読んでくださってありがとうございました
良かったと思った方はLGTMして頂けると嬉しいです!
どなたかの参考になれば幸いです!

Taitaaaan
Web系エンジニアを目指してプログラミング学習中 Twitter: https://twitter.com/taitan_progra
https://twitter.com/taitan_progra
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away