学習事項
読書による学習
読んだ本リスト
背景
Reactでのフロントエンドコードはある程度書けるようなったが、技術書を読んで「普段エンジニアがどういうことを考えてコードを書いているか」や、プログラミングにおける思想、基礎、アーキテクチャやデザインパターンなど、その辺りを一度しっかり考えてみる必要があると感じ、本を読んでの学習に取り組んでいる
ruby on railsを使ってのWebAPI開発
GutHubリポジトリ: https://github.com/diskszk/todo_app_server
概要
ToDoリストアプリのバックエンドWebAPI
使用技術
ruby on rails / ruby / RSpec
コードの詳細
userとuserに紐づくtaskをCreate/Read/Update/Delete できるWebAPI
開発時の取り組み
テストを学ぶにあたり、ドキュメントが充実しているruby on railsを題材にして学習した
TDD(テスト駆動開発)に挑戦した
友人が参加しているバンドのホームページへの機能追加
GitHubリポジトリ: https://github.com/diskszk/ufo-society1974
Webページ
https://ufo-society-1974.web.app (公開中)
https://diskszk.github.io/ufo-society1974/albums.html#/ (公開前にバンドが活動休止した為別途デプロイ)
概要
友人が参加しているバンド「UFO society」の公式ホームページ
使用技術
React / React Hooks / react-router / Redux / HTML / CSS / JavaScript / TypeScript / SASS(SCSS) / styled-components / firebase / firestore / webpack / ESLint
背景
元々バンドに参加している友人(非エンジニア)がHTML / CSS での静的サイトを制作する際のアドバイス役として参加
2000年代をモチーフにしたWebページを作成したいとのことで、デザインに関してはバンドメンバーの意見に準拠している
CSSで分からないところの解決のアドバイス
firestoreを用いてのindexページでの足跡カウンターの開発
当時バックエンド言語を用いてのデータベースを利用する法方が分からなかった為、バックエンドでサーバーを作らずにデータベースを利用する為にfirestoreを利用
firebase hostingを用いてのデプロイを支援
選択した理由
firestoreを利用したかった為
余程閲覧数が増えない限り無料で利用できる為
歌詞を閲覧する機能と共に、バンドの音源を視聴する機能が欲しいとの要望があがった為
はじめに静的Webページを作成した友人が、就職活動に向けた試験勉強に打ち込むことになり、Webページの運用ができなくなったことを受け、バンドメンバーがソースコードを操作することなくリソースの追加・編集・削除を行えるようにする為に下記管理アプリケーションの作成に伴った改修を行う
バンドのメンバーから、「歌詞の一覧ページは2000年代というモチーフから離れて、見やすくして欲しい」との意見があり、また、自身のReactでの開発の学習の為に局所的にReactを用いた開発を行う
コードの詳細
フロントエンドにReact、Redux、reacr-routerを使い、バックエンドにfirestoreを使って開発し、firebase hostingにデプロイした
下記管理サイトからfirebase storageにアップロードした音声ファイルを閲覧できる為にfirebaseのプロジェクトIDを共有した別アプリケーションでの作成をおこなった
#Firebaseで閲覧用サイト・管理用サイトをホスティングする方法
Webページの基本的なコーディングは友人が担当し、私は主に「楽曲の記録」ページへ機能追加するコードを書いた
共同開発した友人に許可をとり、個人のGitHubリポジトリにてコードを公開している
開発時の取り組み
もともと出来上がっている静的Webページへプロジェクトへの機能追加のため、Reactを使う際にwebpackを手書きで作成し、プロジェクトでReactをかけるようにした
はじめのうちソースコードをJavaScript / jsxで書いていたが途中でTypeScript / tsxにリプレイスした
redux-thunkを使って非同期関数内にfirestoreからデータを取得する処理とstoreに登録する処理をまとめて書いていたが、役割を適切に分割した上で、コンポーネントのuseEffect内で非同期処理を行うようすることで、redux-thunkを使った非同期処理が不要になった為redux-thunkを取り除いた
redux-thunと組み合わせて非同期処理の中で画面遷移を行いたかったため、connected-react-routerを使っていたが、上記の通りコンポーネントに処理を移すことによりコンポーネント外での画面遷移が不要になったので、connected-react-routerを取り除いた。
redux-loggerを使いreduxのstoreをコンソールで確認し、デバッグ作業をった
ESLintを導入することでコード規約に沿ったコードを書くことができた
開発を通しての成長と反省
サイトを訪問して使用してくれるユーザーに利用しやすいWeb画面開発を目標にして開発したため、見やすく使いやすいスタイリングを意識した開発ができた
できている静的サイトに一部追加でreactを使いたかったので、create-react-appを使わずにwebpackを手書きでreact / typescript環境を構築したことで、webpackを用いての開発環境作成ができるようになった
create-react-appなど自動環境作成ツールが内部的に何をしているのかについて目を向けることができた
適宜リファクタリングを行うことで、見通しの良いコードが書けるようになった
変数名や関数名の命名をよく考え、しっかりと意味の通用する名前をつけられるようになりたい
変数名・関数名の誤字が多かった
友人が参加しているバンドのホームページの管理アプリケーション
GitHubリポジトリ: https://github.com/diskszk/ufo-society1974-admin
Webページ: https://ufo-society1974admin.web.app/
E-mail: test@test.example.com / パスワード: test12 でログインできます
概要
友人が参加しているバンド「UFO society」の公式ホームページの管理アプリケーション
使用技術
TypeScript / React / Redux / SASS(SCSS) / Firebase / Firestore / Material-UI / react-router / React-Hooks / ESLint / Prettier
背景
フロントエンドを勉強するに当たり個人開発したプロジェクト
友人が参加しているバンドの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-thunkを取り除いた
redux-thunと組み合わせて非同期処理の中で画面遷移を行いたかったため、connected-react-routerを使っていたが、上記の通りコンポーネントに処理を移すことによりコンポーネント外での画面遷移が不要になったので、connected-react-routerを取り除いた
redux-loggerを使いreduxのstoreをコンソールで確認し、デバッグ作業を行った
ESLintを導入することでコード規約に沿ったコードを書くことができた
開発を通しての成長と反省
Webアプリの開発と同時進行でフロントエンドの勉強を行っていましたが、初めのうちは、ブログなどの記事を参考に、見様見真似で実装することがほとんどだったが、勉強の仕方自体を学ぶうちに、公式ドキュメントの一次情報を参考にするのが良いというアドバイスを見つけ、以降公式ドキュメントを最初に読むクセつけるようにした
公式ドキュメントを読むようにして、理解するのに時間はかかるが、より深い理解の上で実装することができたという手応えがある
初めの頃はコピペを含むコードや、曖昧な理解のまま実装した最適ではないコードが大き含まれていたが、エンジニアである兄からレビューを受けながらコードを書くにつれて理解が深まったため、随時リファクタリングを行うことができ、見通しの良さや責務の分割を意識し始めることができた
その際にGitHubのpull requestを用いて開発を行い、ソースコードの変更時の差分を十分に確認できたため、修正時にバグを生まず進めることができた
開発中はテストへの理解が不足していたため、手作業での動作確認をしていたが、今後はテスト駆動開発やCIの整備を行おうと思う
同一ファイル取得CLIアプリケーション
GitHubリポジトリ: https://github.com/diskszk/compare-directories
使用技術: TypeScript
概要
2つのディレクトリのパスを引数に取り、両ディレクトリないに同一ファイルが存在したらファイルパスを出力するCLIアプリケーション
ここでの同一ファイルは、ファイル名が同じかつファイルサイズが同じファイルと定義する
背景
Reactを用いてのフロントエンドコードの書き方や、node.jsでのバックエンドサーバーの立て方はひとまず理解したが、Webではなく、OSのファイルシステムを操作するコードの全貌が分からなかった為、node.jsを用いて開発した
自身のPCのファイルを整理する為に作成した
基本的なJavaScriptの書き方を学習する目的で開発した
コードの詳細
TypeScript / node.jsを用いて書いたCLIアプロケーション
開発時の取り組み
OS間での差異をなくす為に、パスを区切る記号をハードコートせず、JavaScriptが提供するメソッドを用いて書いた
なるべく処理に時間やマシンのリソースを取られないようなコードを意識して書いた
開発を通しての成長と反省
これまで主にWeb開発でのコーディングに重きをおいて学習してきたが、Web以外でのプログラムの書き方や使い方を学べた
マシンのリソースを意識したコードを書くことができた