4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【アプリ開発】プログラミング初学者向けのアプリ『Roooad(ロ---ド)』をリリースしました。

Last updated at Posted at 2021-10-21

はじめに

ポートフォリオ用に、個人開発アプリ『Roooad(ロ---ド)』をリリースしました!

『Roooad(ロ---ド)』は、プログラミング初学者のために、皆が歩んできたロードマップを見ることができるサービスです。

開発期間は、約40日間です。
デザインが苦手だったので、他の方のデザインを参考にさせていただきました🙇‍♂️(cssは、一から書いたので少し時間が掛かりました。)

また、途中AWSでのデプロイで躓いて10日ほど費やしてしまいました…
何はともあれ、無事アプリ開発ができて良かったです。

アプリについて

登場人物

  • プログラミング初学者(閲覧・作成)
  • 個人で、メンターや学習教材を販売している方の宣伝(作成)

ユーザーが抱える課題

  • 初学者には「学習の流れ・学習にかかる期間・言語選び」と分からないことが多い。他人の学習してきた手順や期間を参考にしたい!
  • プログラミング関連の学習教材やサービスの認知をして貰いたい。

解決方法

自身の学習終了までのロードマップを公開&他人のロードマップを見られるアプリケーション

サービスを作った背景

このアプリを作った経緯は、プログラミング学習での失敗が理由です。

私がプログラミング学習を始めた際は、「どういった学習の流れで、どれくらいの期間を必要とするのか」ということが分からない状態で学習を進めていました。
そのため、独学でのプログラミング学習は明確なゴールが見えずに、挫折しそうになったり遠回りな学習をしたりということが多々ありました。

そういった経験から自分と同様に困っている方がいるのではないかと思い、初学者の方が他人の学習の手順を参考にできるアプリを開発することに決めました。

アプリの使い方

アプリの用途はシンプルで、2つです!

  • ロードマップを閲覧する
  • ロードマップを作成する

アプリの概要をページごとに紹介していきます。

トップページ

roooad-map.com_.png

新規登録/ログイン後、ロードマップ一覧ページに遷移します。

アプリの概要を確認してもらうため、ゲストログインを追加しています!ただし、ゲストログインをした場合、制作したロードマップは他の人も編集・削除できるので注意してください。

roooad-map.com_rooads (1).png

ロードマップ一覧ページから、気になる人のロードマップを詳しく見ることができます!

roooad-map.com_rooads_3 (1).png

詳細ページでは、学習期間や詳細、ユーザー情報が詳しく見れます。
参考になる投稿には、いいねを押すことが可能です。また、投稿者のみ編集と削除アイコンが表示されるようになっています。

苦労したところ

レスポンスデザイン

pc画面だとうまくいくけど、スマホサイズの画面だとデザインが崩れることが何度かありました。
特に円グラフを導入してから、サイズの変更が上手くいかず大変でした…

あとBootstrapを一部利用しましたが、9割デザインを1から行ったので、少し時間掛かりましたね。

インフラ

個人的には、ここが一番大変で時間掛かりました。
記事が古くてSSL化が上手くいかなかったり、本番環境のデータベースが作られなかったりと気づけば10日過ぎていました。

一つのコマンドでおかしくなることも何度も体験したので、作業中はいつもドキドキしてました。
もし時間に余裕ができたら、AWSのやり方をまとめてみたいと思います。

使用技術

  • Ruby 2.6.5
  • Rails 6.0.0
  • bootstrap5
  • AWS
    • EC2
      • Amazon Linux 2
    • S3
    • ELB
    • Route53
    • ACM

主要なGem

  • devise (認証)
  • cancancan (認可)
  • rails_admin (管理画面)
  • cocoon (ネストフォーム部分)
  • kaminari (ページネーション)
  • chartkick (円グラフ)
  • rspec-rails (テスト)
  • rubocop (自動修正)
  • mini_magick (画像)
  • gretel (パンくず)

おわりに

 ほとんど独学で進めていたので、解決まで時間は大幅にかかりましたが、エンジニアとして必要な検索力や質問力が身についた気がしています。
数ヶ月の間、相談に乗ってくれた方々、本当に感謝しています。また、無料で質問できるサービスteratailでの対応してくださる方々にも大変お世話になりました…

 自分のアイディアを0から作り出すプログラミングは、大変なことも多いですがとても面白くて楽しいです。また、アプリを開発している中で、アイディアを形にできるエンジニアという職業がより魅力的に感じるようになりました。
これからはエンジニアとして働けるように、就活を頑張ります!!

 最後にプログラミング学習は無償で助けて貰ってばかりだったので、自分もいつか誰かの役に立てるよう頑張っていきます。
ここまでご覧いただき、ありがとうございました!

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?