2022年になったので去年の振り返りと今年の目標を書いてみたく思います。それではいきましょう！
【目次】
2021年の振り返り
2021年全体
全体的には個人活動の形態を変えるべく試行錯誤の年になった。2020年に行なっていたフロントエンド〜バックエンド系の体験が一段落つき、興味がReact関係に集約されていった。
そして、Web技術の体験だけではなく、実際にユーザーが使うことができるWebアプリを作る（そのためにはどういう仕組みにするかを考える）という活動形態に移行した。
2021年にやったこと
- 2021年の年明けは前年に引き続きFirebaseを触っていた
- React + TypeScript + CSS in JS環境を作ったり、フックを触ったりした
- Reactのコンポーネントとメタ言語のモジュールとの違いを知りたくなって比較した
- アプリを作る人になりたくてReactスターターキットを作った
- 複数ページ構成がReactだけだと辛かったのでNextスターターキットを作った
- スターターキットをベースに配色ジェネレーター、アスペクト比ジェネレーター、ジャンプ率ジェネレーターを作った
- React + tone.jsでスケールプレイヤー、コードプレイヤー、ビートプレイヤーを作った
- React + p5.jsで三角関数しらべMathを作った
Firebaseを触る（2020年続き）
2020年の終わりごろからFirebaseを触り始めて年明けも引き続きRealtime Databaseを体験
※参考：【Firebase】Realtime Databaseにブラウザから直接CRUD操作する - クモのようにコツコツと
※参考：【Firebase】Realtime DatabaseにFetch APIでCRUD操作する - クモのようにコツコツと
Authenticationでログイン認証を体験
※参考：【Firebase】Authenticationでログイン設定を作る（メール/パスワードによるユーザー認証） - クモのようにコツコツと
React + TypeScript + CSS in JS環境を作る
ReactでTypeScriptの型をつけた。そしてコンポーネントの中にJSXだけでなくCSS設定も書きた。
※参考：【React】React + TypeScriptの開発環境を作る（デプロイまで） - クモのようにコツコツと
※参考：【React】React + TypeScript + CSS in JSの開発環境を作る（Gitエラー対処も） - クモのようにコツコツと
※参考：【React】React RouterでSPAのルーティング設定（下層ページの404対策も） - クモのようにコツコツと
Reactとメタ言語の比較する
メタ言語（EJS、Sass(SCSS)、TypeScript）のモジュールとReactのコンポーネントの違いを比較した。
※参考：【React】HTMLコンポーネント化（Reactとメタ言語の比較-1） - クモのようにコツコツと
※参考：【React】react-helmetでheadタグの中身を動的に打ち替える（Reactとメタ言語の比較-2） - クモのようにコツコツと
※参考：【React】JSONデータをJSXに読み込んで表示する（Reactとメタ言語の比較-3） - クモのようにコツコツと
※参考：【React】styled-componentsのcreateGlobalStyleでbodyタグにCSS設定（Reactとメタ言語の比較-4） - クモのようにコツコツと
※参考：【React】styled-componentsのcss helperでスタイルを継承（Reactとメタ言語の比較-5） - クモのようにコツコツと
※参考：【React】ピュアなTypeScriptモジュールを追加してみる（Reactとメタ言語の比較-6） - クモのようにコツコツと
Reactの状態管理、フックを体験
関数コンポーネントで楽に状態管理ができるフックを体験した。
※参考：【React】フック(React Hooks)事始め：useState、useEffect、useContext - クモのようにコツコツと
※参考：【React】フックとjson-serverをFetch APIで連携（Reactライフサイクルの理解） - クモのようにコツコツと
※参考：【React】フックとRealtime DatabaseをFetch APIで連携（React + Firebase環境） - クモのようにコツコツと
Reactスターターキットを作った
Reactアプリを作る人になるため、以前作ったメタ言語スターターキットの内容をReact + TypeScript + CSS in JS環境に移行した
ソースコード
※参考：GitHub - ryo-i/react-app-started
※参考：【React】React + TypeScript + CSS in JSスターターキットを作る（アプリ作る人に俺はなる！） - クモのようにコツコツと
※参考：【React】OtherページをAboutページに変更、ルーティング変更（Reactスターターキット） - クモのようにコツコツと
※参考：【React】favicon画像の作成、推奨サイズ、スマホ向け設定など（Reactスターターキット） - クモのようにコツコツと
※参考：【React】OGPはつらいよ ーSPAでの動的OGP・失敗編ー（Reactアプリスターターキット） - クモのようにコツコツと
Next.jsを体験
React環境では複数ページ構成に辛みがあったため、Next環境を体験した。
※参考：【React】Next.jsを事始める（インストール、ページ設定、表示まで） - クモのようにコツコツと
※参考：【React】Next.jsのデプロイ：Vercelがまったく・カン・タンだ！ - クモのようにコツコツと
※参考：【React】Next.jsのリンク設定（Link）、共通コンポーネント化、headタグ設定(Head） - クモのようにコツコツと
※参考：【React】Create Next App + TypeScript + CSS in JS環境を作る - クモのようにコツコツと
Nextスターターキットを作る
複数ページのアプリを作りやすくするため、ReactスターターキットをNext環境で作り直した。
ソースコード
※参考：GitHub - ryo-i/next-app-started
※参考：【React】Nextスターターキットを作った-1. 全体設定編（Next + TypeScript + CSS in JS） - クモのようにコツコツと
※参考：【React】Nextスターターキットを作った-2. コンポーネント編（Next + TypeScript + CSS in JS） - クモのようにコツコツと
※参考：【React】Nextスターターキットを作った-3. ページファイル編（Next + TypeScript + CSS in JS） - クモのようにコツコツと
文字ジャンプ率ジェネレーターを作った
初めてReactで作ったWebアプリ！文字のジャンプ率の違いを画面で見ながら確認ができる。
jump-rate-generator-2.vercel.app
ソースコード
※参考：GitHub - ryo-i/jump-rate-generator-2
※参考：【React】Aboutページ作成、input（type="range"）タグ配置（ジャンプ率ジェネレーター） - クモのようにコツコツと
※参考：【React】フックでonChangeイベントを設定、ツマミが動いた！（ジャンプ率ジェネレーター） - クモのようにコツコツと
※参考：【React】独自フックで関数を抽出、全てのツマミが動いた！（ジャンプ率ジェネレーター） - クモのようにコツコツと
※参考：【React】styled-componentsにフックの値を設定し、動的にスタイルを変更（ジャンプ率ジェネレーター完成！） - クモのようにコツコツと
複数ページに辛みがあったのでNext環境で作り直す！
※参考：【React】ジャンプ率ジェネレーターをNext.jsで作り直した（Next.js + TypeScript + CSS in JS） - クモのようにコツコツと
アスペクト比ジェネレーターを作った
アスペクト比の違いを画面で見ながら確認ができるWebアプリ
aspect-ratio-generator.vercel.app
ソースコード
※参考：GitHub - ryo-i/aspect-ratio-generator
※参考：【React】アスペクト比ジェネレーターを作った（画像の縦横比率を計算するツール） - クモのようにコツコツと
配色ジェネレーターを作った
HSBベースでメインカラー、アクセントカラー、ベースカラーを割り出せるWebアプリ
color-scheme-generator.vercel.app
ソースコード
※参考：GitHub - ryo-i/color-scheme-generator
※参考：【React】配色ジェネレーターを作った（HSBでメインカラー、アクセントカラー、ベースカラーを割り出す！） - クモのようにコツコツと
ビートプレイヤーを作った
React + tone.jsで作ったアプリ。いろいろなリズムやテンポを変更しながらビートを鳴らせる。
ソースコード
※参考：GitHub - ryo-i/beat-player: Tone.jsを使って作ったビートプレイヤー
※参考：【React & Tone.js】ビートプレイヤーを作った（ビートとBPMを変更可能） - クモのようにコツコツと
コードプレイヤーを作った
React + tone.jsで作ったアプリ。いろいろなコードをキーを変えながら音と構成音で確認できる。
ソースコード
※参考：GitHub - ryo-i/chord-player: Tone.jsを使ったコードプレイヤー
※参考：【React & Tone.js】コードプレイヤーを作った（鍵盤でいろいろなコードを調べるアプリ） - クモのようにコツコツと
スケールプレイヤーを作った
React + tone.jsで作ったアプリ。世界のいろいろなスケールをキーで変えながら鍵盤色と音で確認できる。
ソースコード
※参考：GitHub - ryo-i/scale-player
※参考：【React & Tone.js】スケールプレイヤーを作った（いろいろなスケールを調べて音も聴けるアプリ） - クモのようにコツコツと
三角関数しらべMathを作った
React + p5.jsで作ったアプリ。モーションや3D作りで欠かせない三角関数。角度ごとの計算結果を単位円や計算式で確認できる。
sankaku-kansu-shirabe-math.vercel.app
ソースコード
※参考：GitHub - ryo-i/sankaku-kansu-shirabe-math
※参考：【React & p5.js】「三角関数しらべMath」を作った（三角関数の理解を深めるアプリ） - クモのようにコツコツと
2022年の目標
ブログをもう少し気軽に書けるスタイルにしたい
2021年の前半は作っている過程をブログ記事にしていたが、過程をGitHubのイシューに書くことにして、ブログ記事はアプリができあがってからまとめるスタイルに移行した。そのため、後半のブログ記事数が少なくなった。
ブログにアプリ作りの過程を載せない代わりに、2022年はもう少し気軽に更新できるようなテーマの記事も書いていきたい。
このブログは技術ブログという位置付けだったが、どこまで個人的なことを書くかは考え中。基本的には公的な仕事につながるような内容にはする予定。
英語を勉強したい（中学英語→TOEIC）
Web技術のドキュメント、記事、動画は英語のものが多い。プログラミング言語はもちろん、エラーコードも英語。これまでは英語に出会うたびに翻訳ツール頼りだった。
また、仕事上でも外国語がネイティブな方とメッセやMTGをすることがあるので、リーディングだけでなくライティング、リスニング、スピーキングもできればできるほどいいと感じている。
2022年中にTOEICを受けて自分の実力を知りたいと思っている。なお、現状の自分はTOEICの問題自体を読んだり聞いたりする能力もないため、まずは中学英語のスマホアプリから始めようと思っている。
お勉強系だけでなく遊び心のあるWebアプリを作りたい
2021年はブログで書いてきたような基礎的なテーマをまず形にしたかったので、お勉強的な内容のアプリ作りで終わった。
2022年はもう少し砕けた、遊び心もあるようなWebアプリも作っていきたい。そのためには一つ一つのアプリの制作期間をもっと短くなるようにもしたい。数をこなしてより効率的な作り方を身につけたい。
自分の趣味や興味を深めるのに有用なWebアプリを作りたい
遊び心のあるアプリだけでなく、実用的なアプリも作りたい。
基本的には自分が生活の中で不便に感じること（この作業が面倒、この情報収集を一箇所で済ませたい、など）をヒントにしたい。
モチベーションを保つため、おそらく個人的な興味や趣味にとって有用なテーマになることが多くなると思うw
React + p5.jsのもっと複雑なグラフィックやモーションを作りたい
2021年、三角関数しらべMathでようやくReact + p5.jsのアプリを作れたが、もっと複雑なグラフィックやモーションのコンテンツを作れるようになりたい。
見た目の美しさ、動きの気持ちよさがありつつ、自分の数学的な知識を深めることも兼ねたい。
React + tone.jsのもっと複雑な音楽コンテンツを作りたい
2021年、リズム、コード、スケールの音楽の三要素の理解を深めるアプリを作ったが、もっとシンセのいろいろな音色を駆使したり、音楽的に聴ける音を鳴らしたい。
個人的にはミニマル・ミュージック、アンビエント、Lo-Fi Hip-Hop、ジャズの複雑な和音などを取り入れていきたい。
単なる作曲ではなく、音楽的な特徴をプログラミングしたり、ユーザーの操作に反応したり、毎回ランダムに構成される音を鳴らしたい。
React + p5.js + tonę.jsを融合したコンテンツを作りたい
React + p5.js + tonę.jsを組み合わせて、視覚と音の比重が半々のどちらがメインでもない融合的なコンテンツを作りたい。
そしてユーザーの操作に反応するインタラクティブなコンテンツや、ランダムな偶然性で制御されたコンテンツを作りたい。
ReactとDBを連携したアプリを作りたい
FirebaseのDBなどとReactを連携したアプリを作りたい。FirebaseはRealtime DatabaseだけでなくFireStoreを使ってみたい。
知識だけで知っているgraphQLも気になるが、実際になにかを作る上で必要性を感じたら体験してみようと思う。
React環境でthree.jsを動かしたい
p5.jsをあるていど使いこなせるようになったらReact環境でthree.jsで3Dを動かしてみたい。最終的にはtone.jsの音と融合したコンテンツを作りたい。
（しかし、3Dは自分はまだ敷居の高さを感じているので優先度は低い）
その他やりたいこと
やりたいことが思いついたらGitHubのREADMEの「やりたいこと」に書き足している。順次、ここを見ながら着手していく。
最後に
ということで、2021年の振り返りと2022年の目標を書いてみましたー。また来年の年末年始に2022年の振り返りと2023年の目標を書きたいと思います。
ブログは今年からはもう少し気軽に更新できるスタイルにできないかと模索中です。Twitter、GitHub、ブログをうまく使い分けていきたいです。
今年も引き続き、よろしくお願いいたしますmm
それではまた！
