ID:52049さん

# 社内wikiアプリケーション開発プロジェクト (2021/5 ~ 現在) ## プロジェクト概要 組織内の暗黙知をなくすことをコンセプトとした社内wikiアプリケーションにおいてフロントエンド開発に携わり、エディター機能の開発や、記載されたワードから別ページの情報と紐づけ情報間の行き来や整理を自動化する機能等の開発に要件が出揃い始めた時期に参画し、各機能の仕様の策定、フロントエンドの 設計から開発、QAに携わりました。 ## チーム情報 会社全体: 6名(業務委託含む) フロントエンド: 2名（業務委託含む） バックエンド: 2名(業務委託含む) ## 開発・実装内容 ### 【概要】 アプリケーションの設計・実装 ### 【どのような機能の開発・実装か】 プロダクトが立ち上がって間もなく、フロントエンドエンジニアが私1人という状態で将来的な機能の変更を念頭に置いて、保守性の高い設計を考え、実装しました。 ### 【課題・問題点】 - プロダクトが今後機能の修正や新機能の追加が行われる可能性を考慮し、オブジェクト指向について学習し、単一責任の原則やオープン・クローズドの原則を取り入れ、コードの保守性を高めることと共に、新しいエンジニアが参画してきた時に読みやすく書き換えやすいコードを心がけ、書くことができました。 - 開発初期はステート管理にreduxを用いてコンポーネントを跨ぐ全てのステートをstoreに持たせてしまっていた為、管理が煩雑になり負債となってしまったので、同一ページ内のstateをuseContextを用いて管理するようリファクタリングを提案、実施しました。 - テスト設計を学び、テストを書く事で安全にコードを修正できる事を学び保守性を上げるのに重要だと思い、テストにどれ程コストを割けるかを相談した結果、コンポーネントのテスト、E2Eテストはせずに、jestでのユニットテストの書き方を学習し、関数を作るときはテストを書く事くようにしました。 ### 【使用した技術】 Next.js, React, TypeScript, rect-hooks, tailwindcss, Slate.js, Redux, jest --- ### 【概要】 WYSIWYGエディター画面の開発 ### 【どのような機能の開発・実装か】 ユーザーがドキュメントを書き込むエディターにWYSIWYGエディターという方式が採用されていました。notion等で使われている、ディスプレイに現れるものと処理内容が一致するように表現する方式で、文字への装飾やコードブロックやリスト形式という様々な表現をできるという要件の中、文字装飾の仕様の策定から開発、QAに携わりました。 ### 【課題・問題点】 - 入力した文字の装飾やコードブロックやリスト形式への変換を、ショートカットコマンドとUI操作から各機能が使える必要があった為、オブジェクト指向単一責任の原則を取り入れる事で、各機能とReactコンポーネントを疎結合にすることで、どこからでも機能を使えるように設計しました。また、ビューとロジックを分離して書く事で、修正しても壊れにくいコードを書くことができました。 - Slate.jsを使っていて機能的に足りないところやサービスの仕様に合わせる必要が生じた際に、Slate.jsの機能だけで解決できないところは、どのようにレンダリングされるかを解析し、JavaScriptの構文を用いて仕様に合わせた処理を行う関数を自作して解決しました。 ### 【使用した技術】 React, TypeScript, rect-hooks, Slate.js WYSIWYGエディターの開発にSlate.jsというライブラリをReact及びTypeScriptとの相性の良さから採用し、0からキャッチアップを行い中心になって開発に携わりました。

# バンドのWebの管理画面作成 (2020/6 ~ 2020/9) ## プロジェクト概要 Webサイトの開発者でありバンドのメンバーが彼らのバンドのWebサイトを作りたいとの相談を受け、HTML、CSSで友人が作成した静的サイトのホスティングの手伝に始まり、その後、Webサイトの開発者である友人が都合によりWebサイトの保守開発ができなったことと、新規機能開発の依頼を受け、友人が参加しているバンドのWebサイトへの機能追加と、ブラウザを使ってWebサイトに対してコンテンツを追加・編集・削除できるWebアプリケーションを開発しました。 ## チーム情報 自身1人 ## コードの詳細 - フロントエンドにReact、Redux、reacr-routerを使い、バックエンドにfirestoreを使って開発し、firebase hostingにデプロイしました。 - 管理者の権限レベルを設定し、firestoreを使用して適切にアカウントの作成・削除を行えるようにしました。 - firebase authenticationを使い、ユーザーのログインをできるようにしました。 - firebase storageに楽曲のアルバムイメージをアップロード・削除する機能を作成しました。 - 楽曲のオーディオファイルをfirebase storageにアップロードし、参照するURIをfirestoreに保存することでWebサイトから音声ファイルの再生ができるようにしました。 ### 開発時の取り組み - 初期はreact-routerのwithRouterを使いHOCでコンポーネントをラップしていましたが、hooksを使えば全てでないにしろ概念の理解が難しいHOCを使わずに済む事を知り、react-routerのhooksに置き換えました。 - redux-thunkを使って非同期関数内にfirestoreからデータを取得する処理とstoreに登録する処理をまとめて書いていましたが、役割を適切に分割した上で、コンポーネントのuseEffect内で非同期処理を行うようすることで、redux-thunkを使った非同期処理が不要になったためを取り除きました。 - redux-thunと組み合わせて非同期処理の中で画面遷移を行いたかったため、connected-react-routerを使っていましたが、上記の通りコンポーネントに処理を移すことによりコンポーネント外での画面遷移が不要になったので、connected-react-routerを取り除きました。 - redux-loggerを使いreduxのstoreをコンソールで確認し、デバッグ作業を行いました。 - ESLintを導入することでコード規約に沿ったコードを書くことができました。 - 自身のプログラミングを知る為、また、コードの質を上げる為に知人のエンジニアに依頼してコードレビューを受けました。 - 元々静的サイトだったWebサイトで動的コンテンツを使用する際に、Reactを使って開発できるように、webpack, babel等を用いて手動でReact (TypeScript)の開発環境を構築しました。 ## 開発を通しての成長 Webアプリの開発と同時進行でフロントエンドの勉強を行っていましたが、初めのうちは、ブログなどの記事を参考に、見様見真似で実装することがほとんどでした。しかし勉強の仕方自体を学ぶうちに、公式ドキュメントの一次情報を参考にするのが良いというアドバイスを見つけました。 公式ドキュメントを読むようにして、理解するのに時間はかかるようにはなりましたが、より深い理解の上で実装することができたという手応えがありました。 そのため、初めの頃はコピペを含むコードや、曖昧な理解のまま実装した最適ではないコードが大き含まれていました。 しかしレビューを受けながらコードを書くにつれて理解が深まったため、随時リファクタリングを行うことができ、見通しの良さや責務の分割を意識し始めることができました。 その際にGitHubのpull requestを用いて開発を行い、ソースコードの変更時の差分を十分に確認できたため、あまりバグを生まず進めることができました。 開発中はテストへの理解が不足していたため、手作業での動作確認をしていましたが、今後はテスト駆動開発やCIの整備を行おうと思います。 ## 使用技術 React, Redux, react-router, TypeScript, Sass, firebase hosting, firestore, firebase authentication, GitHub,