【個人開発】テクノロジーをピラミッド構造で整理するアプリ「Technology Pyramid」を作りました

どうもaono1234と申します。記事がいいなと思ったら是非twitterフォローもよろしくお願い致します❗❗
https://twitter.com/takeshi_program

初めてのオリジナルアプリ【Technology Pyramid】(以下、TechP)ver 0.1をリリースすることができました。👏👏👏
感無量です😭
url: https://technology-pyramid.herokuapp.com/
github: https://github.com/TakeshiAono/technology_pyramid

今回の記事はTechPの概要説明です。良ければプロトタイプですが使用してみて下さい。

次の記事で

• 企画過程
• 設計思想
• 要件定義
• バックエンドの実装について
• フロントエンドについて
  について詳しく書きたいと思っています。おたのしみに😄

1. TechP概要説明

1-1. Why?

皆さんは何か新しい技術を学ぶ際、このような事を感じたことはないでしょうか？

• 何が書いてあるのか分からない…😅
• 専門用語だらけで分かる人じゃないと分からな記事だ😔
• 自分の勉強方法はこれでよいのだろうか？（もしかして効率悪い？）😨

このような困りごとや不安を解決するために私はTechnology Pyramidを開発しました。

1-2. How?

技術というものは、様々な基礎技術の上に成り立っていると考えます。そのため、その基礎技術を習得すれば上位の技術の習得もスムーズになると考えます。

そのため、TechPには以下の機能を持たせることとしました。

• 上位技術と下位技術の繋がりをピラミッド構造で見える化した状態で保持させる。
• その分野の熟練者のテクノロジーピラミッドを見れる。
• ピラミッド構造によって上位の技術を習得するには、どのような下位技術を勉強すればよいかが、一目で把握できる。

1-3. What?

TechPは効率よく技術を習得するのに役立ち、あなたの成長スピードを加速させることができます。

2. メインページ構成

以下が本アプリの主要ページとなります。

2-1. ログインページ

2-2. マイページ

2-3. ワーク一覧ページ

2-4. ワーク検索ページ

2-5. 登録テクノロジー一覧ページ

2-6. テクノロジーピラミッドページ

2-7. 外部リンクページ

3. 使用環境

• ruby 3.0.1
• Ruby on Rails 6.0.3
• PostgreSQL 12.18
• AWS EC2

4. TechPの具体的な活用方法

4-1. 自分の持っている技術をピラミッド構造で見える化する

たとえば、プログラミング言語rubyを習得した後、pythonも習得したい場合、rubyのピラミッド構造を参考にすることができます。
これは他の言語でも基礎となる技術は共通している可能性が高いためです。
1例をあげるならば、
rubyのインスタンス変数の上位技術が、クラスであるならば、pythonでも同様にインスタンス変数と近い概念のものを習得すればpythonのクラスを効率的に習得できる可能性があります。

4-2. 習得したスキルとWEB記事を紐づけて記録する

TechPはテクノロジー1つ1つに多数のWEB記事（外部リンク）を登録することができます。
そのため、クラスというテクノロジーの中にqiitaやstackoverflow、zennで参考にした記事を保存し、忘れた頃に簡単に確認することができます。

4-3. 他ユーザーの学習の進め方を参考にする

同じタイミングで勉強を始めたのになぜか理解度の違いが発生することがあります。
理解の早い人はどのようなピラミッドの作り方をしているのか参考にすることで、
その人との差を埋めることができます。

5. 開発時こだわったポイント

5-1. 上位技術と下位技術の繋がりを分かりやすく

紐づけがビジュアル的に分かりやすくなるようにTechPではleader-lineというjsライブラリを使用しています。
これにより、矢印の描画ができ、上位技術から下位技術への水の流れのようなものを表現できました。

5-2. loginページのデザインを先進的に

ログインページは初回ユーザーのファーストインプレッションを与える重要なページです。
そのため、デザインに力を入れました。
Technology Pyramidというアプリ名に名前負けしないよう、背景に動画を採用し、コンテンツにも影などを入れ立体感を足しました。

5-3. オリジナルのvalidation機能

テクノロジー同士にリレーションを持たせる際、循環参照になってしまうと機能に悪影響を及ぼしてしまいます。
そのため、オリジナルのカスタムバリデーションを設定し、循環参照にならないようにインターロックをかけました。

6. 今後の拡張計画

山ほど追加したい機能はありますが、以下の3つを優先して実装しようと考えています。

6-1. アップデートのお知らせ機能

今後山ほどアップデートをしていかなければならないため、まずはユーザーにどの部分が変更になり、
どのように使って欲しいか等をアナウンスする必要があります。
マイページにnoticeコンテナーを用意し表示できるように考えています。

6-2. ピラミッドページのUI,UXの向上

既存のピラミッド構造に新しいテクノロジーを追加する際、ユーザーがピラミッド構造を覚えておく必要があります。
ピラミッド構造が大きくなると覚えるのが難しいため、既存のピラミッド構造を見ながら拡張ができるように
非同期通信などを使いUI/UXを向上させます。

6-3. ツイッターアカウントログイン機能

ユーザーを増やすためにSNSとの連携させる必要があります。
まずはtwitterのアカウントで簡単ログインできるようにします。
そして、将来的にはピラミッド構造を更新と同時に自動ツイートできるような機能を設けたいと思っています。

7. さいごに

ここまで私の拙い記事を見て下さり、ありがとうございます。😣
初めてアプリでしたので、リファクタリングが足りない😔、テストが少ない😨、セキュリティが脆弱🤬など
自分のスキル不足を痛感しております
しかし、成長するための課題が見えてきました。

また、マイナスな面だけでなく、
もっと多くの人に使ってもらうためにはどのような機能を追加すればよいか🤔など、考えるだけでわくわくすることができて、毎日が楽しいです❗❗😆
プログラミングできるようになって本当に良かったと思えました。
本気でこのアプリで勝負していきたいので、今後も気合入れて頑張ります！

次回の記事をお楽しみに！😊👋