Daisuke Suzuki

Daisuke Suzuki

茨城県

Daisuke Suzuki

Why not create your own Wantedly profile?

Showcase yourself and your experiences to bring your professional story to life.

Join

鈴木大輔と申します。茨城県出身26歳です。 SaaS開発しています。

バンドのWebサイト管理画面

フロントエンドを勉強するに当たり個人開発したプロジェクト。 友人が参加している音楽バンドのWebサイトへの機能追加として「自分たちの楽曲をWebサイト上で聴いてもらいたい」、「楽曲の歌詞をWebサイト上で閲覧できるようにしたい」との要望を受け、また、Webサイトの開発者が都合によりWebサイトの保守開発ができなくなったことを受け、Webサイトを運用する音楽バンドのメンバーがソースコードを直接操作する事なく、曲のアップロードと歌詞の作成・編集が行えるように必要なデータをサーバ上にあげ、そのデータをWebサイトで参照できるようにするためにアプリの作成を行いました。 ○コードの詳細 ・フロントエンドにReact、Redux、reacr-routerを使い、バックエンドにfirestoreを使って開発し、firebase hostingにデプロイしました。 ・管理者の権限レベルを設定し、firestoreを使用して適切にアカウントの作成・削除を行えるようにしました。 ・firebase authenticationを使い、ユーザーのログインをできるようにしました。 ・firebase storageに楽曲のアルバムイメージをアップロード・削除する機能を作成しました。 ・楽曲のオーディオファイルをfirebase storageにアップロードし、参照するURIをfirestoreに保存することでWebサイトから音声ファイルの再生ができるようにしました。 ○開発時の取り組み ・初期はreact-routerのwithRouterを使いコンポーネントをラップしていましたが、途中でreact-routerのhooksに置き換えました。 ・redux-thunkを使って非同期関数内にfirestoreからデータを取得する処理とstoreに登録する処理をまとめて書いていましたが、役割を適切に分割した上で、コンポーネントのuseEffect内で非同期処理を行うようすることで、redux-thunkを使った非同期処理が不要になったためを取り除きました。 ・redux-thunと組み合わせて非同期処理の中で画面遷移を行いたかったため、connected-react-routerを使っていましたが、上記の通りコンポーネントに処理を移すことによりコンポーネント外での画面遷移が不要になったので、connected-react-routerを取り除きました。 ・redux-loggerを使いreduxのstoreをコンソールで確認し、デバッグ作業を行いました。 ・ESLintを導入することでコード規約に沿ったコードを書くことができました。 ○開発を通しての成長 Webアプリの開発と同時進行でフロントエンドの勉強を行っていましたが、初めのうちは、ブログなどの記事を参考に、見様見真似で実装することがほとんどでした。 しかし勉強の仕方自体を学ぶうちに、公式ドキュメントの一次情報を参考にするのが良いというアドバイスを見つけました。 公式ドキュメントを読むようにして、理解するのに時間はかかるようにはなりましたが、より深い理解の上で実装することができたという手応えがありました。 そのため初めの頃はコピペを含むコードや、曖昧な理解のまま実装した最適ではないコードが大き含まれていました。 しかしレビューを受けながらコードを書くにつれて理解が深まったため、随時リファクタリングを行うことができ、見通しの良さや責務の分割を意識し始めることができました。 その際にGitHubのpull requestを用いて開発を行い、ソースコードの変更時の差分を十分に確認できたため、あまりバグを生まず進めることができました。 開発中はテストへの理解が不足していたため、手作業での動作確認をしていましたが、今後はテスト駆動開発やCIの整備を行おうと思います。

Sept 2020 - Jan 2021

バンドのWebサイト管理ページ

友人が参加している音楽バンドのWebサイトへの機能追加として「自分たちの楽曲をWebサイト上で聴いてもらいたい」、「楽曲の歌詞をWebサイト上で閲覧できるようにしたい」との要望を受け、また、Webサイトの開発者が都合によりWebサイトの保守開発ができなくなったことを受け、Webサイトを運用する音楽バンドのメンバーがソースコードを直接操作する事なく、曲のアップロードと歌詞の作成・編集が行えるように必要なデータをサーバ上にあげ、そのデータをWebサイトで参照できるようにするためにアプリの作成を行いました。

In the future

Ambition

In the future

まず1年以内にバックエンドやクラウドの実践的な知識も十分に積み、一人前のエンジニアになれるように励みたいです。ゆくゆくは自力で多くのユーザーに使ってもらえるようなアプリケーションを作ってみたいと思っています。

Feb 2020
-
Sept 2020

Feb 2020 - Sept 2020

・家庭向けロボットの品質管理 [担当] :品質管理エンジニア 、テストエンジニア [詳細] :人工知能が搭載された家庭向けロボットを、市場に出す前に異常がないか試験を実施

Feb 2020 - Sept 2020

・家庭向けロボットの品質管理 [担当] :品質管理エンジニア 、テストエンジニア [詳細] :人工知能が搭載された家庭向けロボットを、市場に出す前に異常がないか試験を実施

Apr 2018
-
Nov 2019

Apr 2018 - Nov 2019

・ガス会社のエンドユーザー向けWebサイトにおけるサーバーサイドの試験 [担当]:単体試験、結合試験 [詳細] :サーバーサイド処理の正常系・異常系の試験実施及びログ取得を見ての確認作業

Apr 2018 - Nov 2019

・ガス会社のエンドユーザー向けWebサイトにおけるサーバーサイドの試験 [担当]:単体試験、結合試験 [詳細] :サーバーサイド処理の正常系・異常系の試験実施及びログ取得を見ての確認作業

Mar 2018

武蔵大学

経済学部・経営学科

Mar 2018

■サークル 軽音楽サークルに所属していました。主にギターを演奏し、今でも年に一回行われる同窓会ライブに出演しております。

武蔵大学

経済学部・経営学科

Mar 2018

■サークル 軽音楽サークルに所属していました。主にギターを演奏し、今でも年に一回行われる同窓会ライブに出演しております。


Skills and qualities

CSS(Scss)

0

JavaScript

0

Firebase

0

React

0

TypeScript

0

Accomplishments/Portfolio

バンドのWebサイト管理画面

Sept 2020 - Jan 2021

バンドのWebサイト管理ページ