茜 渡邉

課題 ー 以下のような課題点があり、個人開発に取り組んだ。 応用情報技術者資格を取得したが、設計、開発の実践経験が不足していると感じた。 業務で使用したReact.js、Material-UI、Dockerの経験を活かして、カフェの口コミ投稿アプリを作成した。 設計、開発、テストを行った。 実装した機能は以下の通り。 ・ログイン、ログアウト機能 ・新規会員登録機能 ・ユーザー情報変更機能 ・退会機能 ・店舗検索機能 ・店舗情報投稿機能 ・お気に入り登録、削除機能 ・コメント投稿、、削除機能 ・お気に入り、コメントを投稿した店舗の確認機能 実装予定機能は以下の通り。 取り組み 個人開発では主に以下の作業に取り組んだ。 ①設計 カフェの口コミ投稿アプリを設計した。 【取り組み】 実装する機能を紙に書きだして選定した。 draw.ioを用いてDBを設計した。 figmaを用いてアプリのデザインを行った。 Stoplight StudioでAPIを設計した。 ②開発 カフェの口コミ投稿アプリの機能を実装した。 【取り組み】 Dockerを用いてフロントエンドサーバー、APIサーバー、MySQLサーバーを構築した。 Docker-composeでサーバー管理を容易にした。 フロントエンド開発ではTypeScript、Next.js、Material-UIを用いて画面開発を行った。 ユーザーのログイン状況によって表示する画面のレイアウトを変更している。 バックエンド開発では、Golang、Gin、gormを用いてAPIサーバーを実装した。Golangでjwt認証を実装した。 ③テスト カフェの口コミ投稿アプリのテストを実施した。 【取り組み】 GolangでAPIのテストを実装した。go-testfixturesライブラリを使用してテストデータの管理を行った。 工夫した点 フロントエンド 使用頻度が高いものは共通関数として定義する、 共通するレイアウトはコンポーネントとして抜き出す、再利用可能にするためにAPIへのリクエストメソッド、レスポンスデータの処理を抜き出す等、コードの共通化を意識しました。 ユーザビリティを意識して、stateを用いてデータを管理、useSWRでデータ取得、表示の高速化を意識しました。 ローディング中、処理時に画面にメッセージやダイアログを表示してユーザーのストレスを少なくすることを意識しました。 マテリアルuiを用いることで、デザインを統一、cssデザインの手間を削減し、レスポンシブデザインに対応しました。 バックエンド jwtトークンの認証機能をミドルウェアで実装することでセキュリティ機能を実装、メソッドを共通化することで保守性を高めました。 GolangのフレームワークにGin、DBへの接続にはORMライブラリであるgormを用いてコード量を削減、可読性の高いコードを意識しました。 testではgo-testfixturesを用いて、テストデータの管理を容易にしました。 Logを書くことで、エラーが発生したさい、原因の特定が容易になるように工夫しました。 全体 APIリクエストのurlとNext.jsでのページパスを統一することで、ブラウザからurlを直接入力した場合でも、エラーが発生しないようにしました。