【共同開発】初心者の学習支援サービスをリリースしました！

# はじめに
初心者にとって学習の際に見やすく参考になるサイトを見つけたり、参考になる書籍を探したり、
というのは難しいことだと思います。(少なくとも私が社会人1年目の時はそうでした。)
そこで、学習する上で参考になったサイトや書籍を登録することで、
初心者の支援ができるサービスを開発しました。

初心者の方も、そうでない方も更新いただけると嬉しいです。
学習の参考にしていただけるとより嬉しいです。

**誰でも登録なし** で参照・更新ができます。

https://hogefuga.herokuapp.com/

以下ホーム画面です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465078/60418213-6147-e7da-85c6-dcfd1dd6a218.png)


# 背景
私が社会人1年目の時のことです。わからないことだらけで色々調べる毎日でした。
公式を見ればわかるとよく聞くものの、当時の私にとって公式サイトは難解なもので、
Qiitaやブログなどでまとめられている方が読みやすく感じていたため、
簡単にわかりやすいサイトが見つけられないかなーと思っていました。

そろそろ何か作ってみたいという気持ちが大きくなってきたこともあり、
当時の私が思っていた、簡単にわかりやすいサイトを見つけることができるサービスを開発しようと考えました。

また、個人での開発はモチベーションの維持が難しいと思ったので、
プログラム初心者(数か月社内ニート)の友人と共同開発しました。

# 環境
ランニングコスト0円をコンセプトに選定しました。

#### ■フロントエンド
初心者と共同開発をする上で私自身に学習コストを割けないと思いました。
そのため業務で扱っており、慣れているものを選択しました。
・Vue.js
・Nuxt.js

#### ■バックエンド
他プロジェクトを作成、リリースする必要がなくなるので選択しました。
※2つのプロジェクトを稼働させ続けるとHerokuの月の無料利用時間を超えてしまうためです。
・Node.js

#### ■DB
シンプルな構成にする想定だったので、NoSQLがいいなと思い決めました。
・MongoDB

#### ■サーバ
[以前](https://qiita.com/tacchan5424/items/2e9506bea4ed97a1f742)利用したことがあるため、今回も利用することとしました。
・Heroku

補足ですが、Herokuは30分以上？アクセスがないとスリープモードになってしまうため、
以下コマンドをHeroku Schedulerでスケジュール実行するようにしています。
```
curl https://hogefuga.herokuapp.com/
```

#### ■タスク管理
聞いたことがあったので特に考えず決めました。管理ができれば何でもよかったです。
・Trello

#### ■連絡用ツール
友人とはオンラインゲームで知り合った所謂ネッ友なので、自然と決まりました。
・Discord

# 使い方
### ■データ登録
開発言語やツール、用語などIT系のすべてを登録対象として想定しています。
「新規作成」からタイトルやリンクを設定していただくと登録することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465078/c9c9ecd5-a171-5bc7-c731-494c713ecebd.png)

### ■データ更新
タイトルをクリックすると詳細画面が開き、参考になるサイトの追加だけでなく他の人が登録したサイトを更新することもできます。
これによってサイト一つ一つがより初心者にとって参考になるサイトにブラッシュアップされていくのではないかと思っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465078/8035fe14-b9d3-21e2-3b41-f4c37e9bf6fb.png)

### ■データ検索
キーワード1単語でlike検索をかけることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465078/c252e528-3261-2d73-f672-20977d282d35.png)

機能としては以上のシンプルなサービスです。

# レスポンシブデザイン
[bulma](https://bulma.io/)のCSSを使い、スマートフォンでも利用できるように対応しました。
(PCではそこまで気になりませんが、スマホでは長いリンクが気になってしまうかもしれません。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1465078/7b38d497-ce53-57c8-239b-3f6efcfaea4e.png)


# Google API
### URLチェック
誰でも更新できるサービスなので、悪意のあるURLが張られることもあるのではないかと思いました。
そのため、googleの[Web Risk API](https://cloud.google.com/web-risk)で登録時と遷移時にチェックを入れました。
googleが保有している安全ではないリソースリストを使って危険なリンクか否かチェックをしてくれるそうです。
このチェックに引っかかるリンクは登録も遷移もできません。

### アクセス数チェック
[Google Analytics](https://marketingplatform.google.com/intl/ja/about/analytics/)を使ってアクセス数をチェックできるようにしています。
アクセス数が可視化されることでモチベーションにつながり、数字に応じてアップデートも計画しようと思っています。

タイミングまでは決めていませんが、現時点では以下機能を追加しようと考えています。
　①各リンクの参照回数表示
　②URL短縮

# 振り返って
### 成長していた
1つのサービスを初心者を引っ張りつつ計画を立てて進めて無事リリースすることができ、成長を感じました。
色々うまくいかなかったことはありましたが、それはそれでよい経験になったと思っています。


### まだまだ力不足
成長を感じた一方で、まだまだ力不足だなと痛感しました。
これまで触ったことのなかったMongoDB周りや、見慣れてはいたものの実装はあまり行ってこなかったNode.js周りでうまく進められなくなることが多かったです。
自身の力だけでは解決しきれず先輩に何度も相談させていただきました、感謝です。


### 共同開発って難しい
相方が初心者、かつ「0」からの実装故に手元に動かせて参考になるコードがなかったこともあり、かなり苦戦しました。
結構私の負荷が高くなってしまい、「一人でやった方が早いしストレスなく進められるなー」と元も子もないことを考えたりもしました。
しかしモチベーションの維持ができてリリースまでたどり着けたのは、一緒に作業を進めていたからかなと思っています。

折角なので今後も一緒に何か開発していきたいなーと思っています。
その際には今回の経験を踏まえて、うまくコントロールできればなと思っています。


# さいごに
開発にあたってQiita含め多くの記事を参考にさせていただきました、ありがとうございました。
このサービス、この記事の内容がどなたかの参考になりましたら幸いです。