Zenn
🚋

【個人開発】企業のテックブログをまとめて閲覧できる「Mendo」を作りました

2023/12/18に公開
Next.js
Vercel
GitHub Actions
個人開発
idea

作ったサービス

企業のテックブログをまとめて見れるMendoを作りました。

記事一覧

執筆時点での掲載企業一覧（敬称略・順不同）
  • DeNA
  • CyberAgent
  • PFN
  • メルカリ
  • Sansan
  • エムスリー
  • NTTコム
  • LINEヤフー
  • LayerX
  • ZOZO
  • カケハシ
  • smartHR
  • Cybozu
  • NTTドコモ
  • 10X
  • 日経
  • MonotaRO
  • Money Forward

記事絞り込み


投稿期間と企業名で絞り込むことができます。

作ったきっかけ

企業テックブログを休憩中に読むようにしているのですが、ブログのプラットフォームが別々であることを、前々から不満に感じてました。自分の追っている企業のブログが一つにまとまったらいいなと思ったので、今回Mendoを開発しました。(そのため現時点で掲載している１８社は私の好みです)

技術スタック

  • フロントエンド : Next.js
  • UIフレームワーク : Tailwind css
  • バックエンド : FastAPI
  • ホスティング : Vercel
  • CI/CD : Cypress,Github Actions

Next.js + FastAPI によるwebアプリ開発

通常Webアプリ開発においてフロントエンドとバックエンドで分ける場合、それぞれ別々に本番環境を用意する必要があると思います。しかし後述するVercel上にNext.js+FastAPIアプリを載せる場合、簡単に一つの環境・アプリケーションにまとめることができます。今回私も公式ドキュメントを参考にし、Next.js+FastAPIをまとめてVercelにデプロイできるようにしました。ドキュメントにも書かれてますが、Next.jsのapiフォルダ直下にpythonコードを書くだけで実現できます。

Vercelを用いたホスティング

Webアプリをホスティングする上で、CloudflareやAWS,Google Cloudなど様々なサービスがありますが、以下の理由からVercelを採用しました。

  • Next.jsとの相性 : 同じ企業がNext.jsとVercelを開発しているため、「Next.jsならVercel一択」との意見がネット上で散見されるほどです。実際、Next.jsの開発〜デプロイまですごく楽でした。
  • 自動デプロイ機能 : デプロイ対象のブランチにpushがあれば自動的に反映してくれます。
  • セキュリティ対策 : VercelではデフォルトでSSL提供してくれたり、DDos対策もしてくれるそうです。詳細は公式サイトまでお願いします。

柔軟性や高速化を重視したい場合は、他サービスの方が優れているケースもあると思います。しかし個人開発においては、Vercelで十分なパフォーマンスを得られると思います。

Cypress + Github Actionsによる自動テスト

今回Cypressというテストフレームワークを使用しました。以下のように数行でE2Eテストができ、とても便利でした。

describe("記事一覧ページ", () => {
  it("記事一覧ページにアクセスできる", () => {
    cy.visit("http://localhost:3000/posts");
    cy.contains("記事一覧", { timeout: 10000 }).should("exist");
  });
});

今回作成したMendoはmainブランチがVercel上でデプロイされる仕組みになっています。そのため主な開発はdevelopブランチで行っています。ここでGithub Actionsを使用し、「developブランチにpushがあればCypressテストを行い、成功したらmainにmergeする」というworkflowを追加することで、(少なくともテストを書いた部分に関しては)正常なデプロイが行われるようにしました。大半のエンジニアが当たり前に思うでしょうが、テストを書いたことがない自分にとって、テストにより得られる安心感に感動しました。

こだわったところ

できる限りシンプルなUI・機能に絞る

新規ユーザーが、Mendoで何ができるか直感的にわかるようなデザインを意識しました。それに伴い機能数を絞り、閲覧に特化させました。それにより、情報過多による新規ユーザーの混乱を、少しでも低減することができるのではないかと考えました。

触れたことのない概念や技術に触れる

普段研究で機械学習に触れることが多いのですが、気分転換や視野を広げるために、以下の概念・技術に挑戦してみました。

  • Next.js
  • Cypress,Github Actions
  • オブジェクト指向を意識した設計・実装(本記事には載せてない記事収集プログラム)

想定以上に新たなことに挑戦できたので、目的は達成できました。

まとめ

今回は企業テックブログをまとめて見れるMendoを開発してみました。現時点では18社のブログを掲載していますが、今後も増やしていく予定です。Mendoに関する不具合や要望があれば、下記フォームやDMで報告お願いします。些細なものでも大歓迎です！

https://forms.gle/kpzyVQHpJNUNAWYU7
https://twitter.com/nogg297254

Discussion