【連載】 ミニブログを作ってみよう
💡 この記事は GMOペパボ インターンシップ2020 の連載記事です。
こんにちは！引き続き dojineko がお送りします。予定しているカリキュラムの5番目と6番目の内容となります。お届けする内容は今回が最後になります。
■ カリキュラム
・マネクラの構成紹介
・初めてのWebAPIを作ってみよう
・データベースを使ってみよう
・ログイン機能を作ってみよう
・ミニブログを作ってみよう ← ｲﾏｺｺ
・ミニブログに機能を追加してみよう ← ｺｺﾓ!
🌋 今回の内容
これまでに、Node.js を使って WebAPI を作り、WebAPI を介してデータベースを操作したり、ログイン機能を実装したりするなど基礎的なアプリケーションを構築していく手法を学びました。
そこで今回は、これまでの総集編としてフロントエンドとバックエンドをAPI連携して、小さなブログアプリ=ミニブログを作ってみようと思います。また総集編ということで現場では4人1チームのワークショップという形で進行します。
🏞 目指す基本の完成形について
まず、事前準備を省略する目的でベースとなる実装を下記に用意しました。fork して Github にリポジトリを用意しましょう。以降は fork したリポジトリを拠点に作業していただきます。現場の皆様はチームの代表に fork してもらい、リポジトリへの Write 権限以上を付与してもらいましょう。
ベースになる実装には Next.js を使った React アプリケーションの基盤に、最低限のWebAPIのサンプルと、APIを利用するためのクライアントサイドの実装が含まれています。今回はそれらを元に以下の要件を満たすアプリケーションを作成していただきます。
■ アプリケーションの要件
・サインアップ、ログイン、ログアウト、退会 ができる
・ログインにはメールアドレスとパスワードを使用する
・メールアドレスは暗号化、パスワードは適切にハッシュ化しデータベースに記録する
・タイトル、本文、投稿日時、の情報を持つ記事を投稿できる
・投稿は投稿者に紐付ける
・ログインせずに投稿された記事を閲覧できる
・記事は投稿者本人しか編集できない
・退会時に退会ユーザーが投稿した投稿はすべて削除する
・すべての動的な処理は API を介して実施できる
・ブラウザからAPIを実行して非同期に表示内容を更新できる
・最終的にマネクラ上で動作できる
最低限の要件は以上です。
⛵ ブラウザからAPIを実行する方法
これまで登場しなかった要素として、ブラウザからAPIを実行する方法を念の為ご紹介します。今回のサンプルでは「ky」および「ky-universal」を利用してAPIに対するリクエストを実現しています。
今回のアプリケーションは、同一ドメイン配下にクライアントアプリケーションもWebAPIも存在しているため CORS に対応する設定は特にしなくて構いません。クライアントアプリケーションの必要なタイミングで以下のようにリクエストすることができます。APIへのリクエストは非同期処理なので await を付与することを忘れないようにしましょう。
import ky from 'ky-universal'
(async(() => {
const result1 = await ky.get('/api/something').json()
const result2 = await ky.post('/api/something').json()
const result3 = await ky.put('/api/something').json()
const result4 = await ky.delete('/api/something')
})🍩 更に機能追加してみよう
無事に基礎的なミニブログが作成できたら、ここから、さらに機能を追加して高機能なブログシステムにしてみましょう。各自の得意分野を生かしながら、ブログサービスをどのように拡張していくかチームで検討して機能実装していきましょう。
実際の開発においては、エンジニアによる機能開発はもちろんですが、デザイナーの機能デザインやマーケターによる市場調査などにより、実装する機能や要件に優先順位をつけて、開発業務すすめることがほとんどです。
■ サービス運営が考えているサービス像
・プロダクトオーナー
たくさんの記事が集まるプラットフォームにしたい
・マーケター
特定の人に記事を公開したいという需要がありそうだ
・デザイナー
記事の本文にフォントを指定できたり色をつけたりできたらよさそう
・エンジニア
技術的負債がスタックされないように開発したい
こうした機能要求に加えて下記のような、実際にユーザーが求めている機能について、今プロダクトで実現している機能とのギャップをどのように埋めるのか、そもそもそのギャップは埋めるべきなのかと言うような判断をする必要があります。
これは最終的にプロダクトオーナーが行うものではありますが、そこにエンジニアとして根拠を示し意見できるということが期待されています。
■ ユーザーの求める機能の例
・画像をアップロードしたい
・SNSでログインしたい
・canonical タグを設定したい
・記事を一括でインポート/エクスポートしたい
上記を踏まえた上で、もし何を追加したらいいかわからないときの参考のために、追加すると良さそうな機能の候補をいくつか挙げてみます。今回作成するミニブログを使ってもらうユーザーを想像しながらどういった機能を追加するのかを考え、どの機能を優先的に実装するのか考えてみましょう。
・記事をキーワード検索できる
・タグクラウドページから記事を検索できる
・更新をフィードで配信できるようにする
・記事閲覧にパスワードが必要な設定を追加できるようにする
・ファイルをアップロードして添付できるようにする
・編集画面にWYSIWYGエディタを追加する
・本文の形式を Markdown に対応して装飾できるようにする
・WebAuthn に対応してパスワードレスで認証できるようにする
・ログインを2FA(Google Authenticator方式) に対応する
・記事の編集履歴を記録し過去の状態に復元可能にする
・安全に開発をするためにテストを追加する
・疎結合に保てるようクリーンアーキテクチャにしてみる
⛳ まとめ
今回は、4人1チームのワークショップ形式でミニブログの基礎機能の作成と、機能追加をしてもらうことを体験してもらいました。小規模ではあるものの、チームでのアプリケーション開発を体験してもらうことができたのではないかと思います。
なお、今回の課題のミニブログの基礎的な機能までの実装を、下記ようなリポジトリで公開しているので、よろしければ作ったものと比較して参考にしてみてください。(時間がなくて少し雑ではありますが...;)
さて、今回の記事で GMOペパボ インターンシップ 2020 Webアプリコース のカリキュラムは終了となります。この記事を書いている頃には、無事に参加者の皆さんがここまでたどり着けるかドキドキしているところです。かなり短期間の間にたくさんのことをしなければならないので時間が足りない部分もあったと思いますがきっとなんとかなっていることでしょう。(たぶん)
ここまでお付き合いいただいた皆様、大変ありがとうございました。また何かのタイミングでこのような連載を行うことがありましたら、そのときはぜひよろしくお願いいたします。ではでは👋