2021年お疲れ様でした！僕の2021年を振り返って、2022年の抱負を書きます。
<h1>2021年はこんな年でした</h1>
簡単に2021年をサマるとこんな感じでした。
<ul>
<li>入籍しました</li>
<li>貯金を増やしました</li>
<li>投資始めました</li>
<li>上司に退職の相談をして半年後に退職することをやめました</li>
<li>スキルアップできませんでした</li>
<li>車の免許を取りに教習所に通い始めました</li>
</ul>
<h2>入籍しました</h2>
2021年1月23日に入籍しました💍
家庭持ちになったことで自分の人生に今まで以上に責任感を感じるようになって、"男子"から"男"になった気がします（なんとなく）。要は『ちゃんとしなきゃな』って気持ちになったってことです。
とはいえ、交際期間1年で入籍していて、ちょうどコロナ禍と重なったことも相まって、2人で出かけることもそんなにできていないので、まだまだ2人の時間が欲しいと思っています。なので、ベイビーの予定はまだないです。
<h2>貯金を増やしました</h2>
入籍したとはいえ、実は独身時代に全然貯金をしていなくて、高い買い物もクレカの分割で買ったりしていて、結婚後にやりたかったことをやる経済力がなかったんです。当時にリストアップしただけでも結婚後1,2年以内やりたいことだけでもこれくらいありました。
<ul>
<li>ウェディングフォト</li>
<li>引っ越し</li>
<li>僕が教習所に通う</li>
<li>車を買う</li>
<li>ハネムーン</li>
</ul>
「経済的な理由でやりたいことができない」というのは僕にとってはすごく情けないことで許せないことだったので、2021年の直前くらいから副業をやり始めました。
彼女にも理解を求めながら、副業の契約が終わるまでの10か月くらいは副業でプライベートの時間がほとんどない状態でした。短期で状況を好転させるには痛みを伴うのはわかっていたので、正直それ以外のスキルアップのための勉強とかは諦めてお金を作ることだけを最優先にして心を無にして頑張ってました。副業の収入は全て貯蓄に回してました。
10月で副業の契約が終わって、その甲斐もあってやりたいことをやる自由ができるほどの資金を作ることができました。
<h2>投資始めました</h2>
生活資金以上の本業と副業の収入は投資に回すようにしていました。
<ul>
<li>401k：会社で加入できる企業型確定拠出年金
<ul>
<li>拠出した金額の全額が所得控除になります。</li>
</ul>
</li>
<li>積み立てNISA
<ul>
<li>2020年の後半から始めて毎年上限の40万円を積み立てています。</li>
<li>現在2020年2021年の2年分を積み立てています。</li>
</ul>
</li>
<li>株式（現物）
<ul>
<li>非常時用に<code>（毎月にかかる生活費）x（3か月）</code>だけは銀行口座に置いておいて、それ以上のお金は株にしてます。</li>
</ul>
</li>
<li>自社株
<ul>
<li>毎月給料天引きで自社株を買ってます（従業員持株会の制度）</li>
<li>拠出金の何%かを会社が上乗せして出してくれる仕組みがあり、それがかなりお得なので利用してます。</li>
</ul>
</li>
</ul>
<h2>上司に退職の相談をして半年後に退職することをやめました</h2>
独立して地方（岐阜）に移住してフリーランスでやっていこうと思って、3月くらいに上司に退職の相談をしました。ただ、チームの状況がすぐにやめられる状態ではなかったのもあり、しばらく残ることになって、そして半年が経ち...
その頃にはもう独立への意欲もなくなってしまってました。そして、会社が英語化に向けて社員に支援をする話があって魅力的だったのと、名古屋に新しく開発拠点ができる話も聞き、もし名古屋拠点に異動できたら、独立して岐阜に行く理由が無くなってしまいます。
正直に上司にそのことを話したら、会社に残してもらえることになり、名古屋異動も決定しました。本当に迷惑をかけてしまったなぁと思ってます。。。そして今は会社にとても感謝してます。
<h2>スキルアップできませんでした</h2>
「貯金を増やしました」の項で書いた通り、お金を稼ぐためにプライベートのほとんどの時間で単価の高い得意な技術で副業をやっていたので、本業の時間以外でスキル的に新しいことを学んだりする時間も体力も機会も作れなかったです。また、退職の話があったこともあり、半年くらいは本業へのモチベートもできず、過去類を見ないくらい最悪のパフォーマンスと成長角度だったなぁと思います。
会社に迷惑をかけチームの足も引っ張ってしまい、満足な成長を感じず、仕事面では過去イチ辛い年でした。
<h2>車の免許を取りに教習所に通い始めました</h2>
岐阜に引っ越したら車を運転できないと生活ができないので、今教習所に通ってます。2022年2月に卒業予定。
車欲しくなってきた...
<h2>まとめ</h2>
2021年は、プライベートの資金面を安心できるラインまで増やす目標を達成することができました。この達成のために仕事面で捨てたことは多々ありましたが、今はやってよかったと心から思ってます。
<h1>2022年はこんな年にしたい</h1>
2021年は仕事面がどん底だったので、2022年は仕事面で頑張りたい気持ち。

2021年の振り返りと2022年の抱負

随時更新してます。
<h1>React.js</h1>
<h2><a href="https://ja.reactjs.org/docs/getting-started.html">React公式ドキュメント</a></h2>
公式docに目を通さずには始まらない。
<ul>
<li>「MAIN CONCEPTS」
<ul>
<li>一通り目を通した</li>
</ul>
</li>
<li>「ADVANCED CONCEPTS」
<ul>
<li>一通り目を通した</li>
</ul>
</li>
<li>「API REFERENCES」
<ul>
<li>読んでいない</li>
</ul>
</li>
<li>「HOOKS」
<ul>
<li>一通り目を通した</li>
</ul>
</li>
<li>「TESTING」
<ul>
<li>一通り目を通した</li>
</ul>
</li>
<li>「CONTRIBUTING」
<ul>
<li>読んでいない</li>
</ul>
</li>
<li>「FAQ」
<ul>
<li>気になる見出しだけ読んだ</li>
</ul>
</li>
</ul>
<h2><a href="https://beta.reactjs.org/">React Docs BETA</a></h2>
こちらも公式のドキュメントです。
<a href="https://ja.reactjs.org/docs/getting-started.html">React公式ドキュメント</a>と決定的な違いは、説明で使われるコンポーネントがクラスではなくhooksを使って書き直されているところです。
その他に、インタラクティブに変更が反映されるサンプルコードや視覚的な図が追加されていたりします。
Learnの「Managing State」を読みました。
<h2><a href="https://blog.isquaredsoftware.com/2021/01/context-redux-differences">Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)</a></h2>
「Contextは状態管理ではない」ということをreduxと比較して説明している。
<h2>設計</h2>
<h3><a href="https://blog.ojisan.io/storybook-first-develop/">Storybook First な開発のススメ | blog.ojisan.io</a></h3>
Reactコンポーネントの設計方針として、Container/Presenterパターンを使うかどうかで悩んでいた時に参考にした。
<h3><a href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0">Presentational and Container Components | Dan Abramov</a></h3>
container/presenterパターンについて理解するために、提唱者の記事を読んだ。
<h1>Next.js</h1>
<h2><a href="https://nextjs.org/docs/getting-started">Next.js公式ドキュメント</a></h2>
<h1>tailwindcss</h1>
<h2><a href="https://tailwindcss.com/docs">tailwindcss公式ドキュメント</a></h2>
数えきれないくらい「⌘K」でクラス名の検索した。

Nextjsアプリの開発で参考にしたリンク集

最近Go言語の勉強で僕のプロフィールデータを管理するAPIをMVCのRESTful APIサーバーを実装したので紹介します。サーバーは、<a href="https://vercel.com/">Vercel</a>の<a href="https://vercel.com/docs/serverless-functions/introduction">Serverless functions</a>を使ってます。
<h1>ファイル構造</h1>
MVCに対応するGoスクリプトは、M=<code>models</code>,V=<code>views</code>,C=<code>controllers</code>ディレクトリに配置しています。完全なソースは、<a href="https://github.com/sainu/profile-api">sainu/profile-api</a>にあります。
<pre><code class="hljs language-go">.
├── api/
│   └── index.go
├── controllers/
│   ├── experiences_controller.go
│   ├── profiles_controller.go
│   ├── skills_controller.go
│   └── social_links_controller.go
├── go.mod
├── go.sum
├── models/
│   ├── experience.go
│   ├── profile.go
│   ├── project.go
│   ├── skill.go
│   ├── social_link.go
│   └── technology.go
├── server/
│   ├── auth.go
│   └── router.go
├── vercel.json
└── views/
 ├── experiences_view.go
 ├── profiles_view.go
 ├── projects_view.go
 ├── skills_view.go
 ├── social_links_view.go
 └── technologies_view.go
</code></pre>
<h1>サンプル</h1>
<h2>モデル</h2>
<code>models/profile.go</code>に<code>models</code>パッケージに<code>Profile</code>構造体を定義します。
<pre><code class="hljs language-go">package models

import "fmt"

// Profile is struct of profile
type Profile struct {
	FamilyNameKanji string `json:"family_name_kanji"`
	GivenNameKanji string `json:"given_name_kanji"`
	FamilyNameKana string `json:"family_name_kana"`
	GivenNameKana string `json:"given_name_kana"`
	FamilyNameEn string `json:"family_name_en"`
	GivenNameEn string `json:"given_name_en"`
	Nickname string `json:"nickname"`
	Job string `json:"job"`
	Email string `json:"email"`
	Bio string `json:"bio"`
	Location string `json:"location"`
}

// GetProfile returns a profile
func GetProfile() *Profile {
	return &#x26;Profile{
		FamilyNameKanji: "道祖",
		GivenNameKanji: "克理",
		...(略)...
		Location: "Tokyo",
	}
}

// FullNameKanji is full name in Japanese
func (p *Profile) FullNameKanji() string {
	return fmt.Sprintf("%s %s", p.FamilyNameKanji, p.GivenNameKanji)
}

// FullNameKana is kana in Japanese
func (p *Profile) FullNameKana() string {
	return fmt.Sprintf("%s %s", p.FamilyNameKana, p.GivenNameKana)
}

// FullNameEn is full name in English
func (p *Profile) FullNameEn() string {
	return fmt.Sprintf("%s %s", p.GivenNameEn, p.FamilyNameEn)
}
</code></pre>
<h2>ビュー</h2>
<code>views/profiles_view.go</code>に<code>views</code>パッケージに<code>ProfileView</code>構造体を定義します。<code>NewProfileView</code>関数は、コントローラーで呼び出され、モデルの<code>models.Profile</code>を受けてJSONを生成するために<code>views.ProfileView</code>構造体のインスタンスを初期化して返します。
<pre><code class="hljs language-go">package views

import "github.com/sainu/profile-api/models"

// ProfileView is struct of profile view
type ProfileView struct {
	FamilyNameKanji string `json:"family_name_kanji"`
	GivenNameKanji string `json:"given_name_kanji"`
	FamilyNameKana string `json:"family_name_kana"`
	GivenNameKana string `json:"given_name_kana"`
	FamilyNameEn string `json:"family_name_en"`
	GivenNameEn string `json:"given_name_en"`
	FullNameKanji string `json:"full_name_kanji"`
	FullNameKana string `json:"full_name_kana"`
	FullNameEn string `json:"full_name_en"`
	Nickname string `json:"nickname"`
	Job string `json:"job"`
	Email string `json:"email"`
	Bio string `json:"bio"`
	Location string `json:"location"`
}

// NewProfileView is constructor for view of profile
func NewProfileView(profile *models.Profile) *ProfileView {
	view := &#x26;ProfileView{
		FamilyNameKanji: profile.FamilyNameKana,
		GivenNameKanji: profile.GivenNameKanji,
		FamilyNameKana: profile.FamilyNameKana,
		GivenNameKana: profile.GivenNameKana,
		FamilyNameEn: profile.FamilyNameEn,
		GivenNameEn: profile.GivenNameEn,
		FullNameKanji: profile.FullNameKanji(),
		FullNameKana: profile.FullNameKana(),
		FullNameEn: profile.FullNameEn(),
		Nickname: profile.Nickname,
		Job: profile.Job,
		Email: profile.Email,
		Bio: profile.Bio,
		Location: profile.Location,
	}
	return view
}
</code></pre>
<h2>コントローラー</h2>
<code>controllers/profiles_controller.go</code>に<code>controllers.ProfilesController</code>構造体を定義します。また、ルーティングから呼び出されるアクション関数<code>Show</code>を<code>controllers.ProfilesController</code>構造体をレシーバーとして定義します。
<pre><code class="hljs language-go">package controllers

import (
	"net/http"

	"github.com/labstack/echo/v4"
	"github.com/sainu/profile-api/models"
	"github.com/sainu/profile-api/views"
)

// ProfilesController controller for profile
type ProfilesController struct{}

// NewProfilesController is constructor for ProfileController
func NewProfilesController() *ProfilesController {
	return new(ProfilesController)
}

// Show binds to /profile
func (c *ProfilesController) Show(ctx echo.Context) error {
	profile := models.GetProfile()
	view := views.NewProfileView(profile)
	return ctx.JSON(http.StatusOK, view)
}
</code></pre>
<h2>ルーティング</h2>
ルーティングは、Go言語のWebサーバーフレームワークで有名な<a href="https://github.com/labstack/echo"><code>echo</code></a>を使いました。<a href="https://vercel.com/">Vercel</a>の<a href="https://vercel.com/docs/serverless-functions/introduction">Serverless functions</a>は、<code>api</code>ディレクトリに任意のgoファイルを作成し、専用のハンドラ関数を定義すると、Vercelの方でよしなにルーティングしてくれます。ただ、別ファイルであっても同一パッケージ内に同名のハンドラ関数を定義することはできなかったので、<code>api/*</code>へのリクエストを全て<code>/api</code>にリダイレクトする設定を<code>vercel.json</code>にし、<code>api/index.go</code>のハンドラで自前でルーティングすることにしました。
<code>server/router.go</code>にルーティングを呼び出す<code>NewRouter</code>関数を定義します。これは、Vercelのリクエストを受ける<code>api/index.go</code>のハンドラ関数内から呼び出されます。
<pre><code class="hljs language-go">package server

import (
	"github.com/labstack/echo/v4"
	"github.com/labstack/echo/v4/middleware"
	"github.com/sainu/profile-api/controllers"
)

// NewRouter is constructor for router
func NewRouter() (*echo.Echo, error) {
	router := echo.New()
	router.Use(middleware.Logger())
	router.Use(middleware.Recover())
	router.Use(middleware.BasicAuth(BasicAuthHandler))

	experiencesController := controllers.NewExperiencesController()
	router.GET("/api/experiences", experiencesController.Index)

	profilesController := controllers.NewProfilesController()
	router.GET("/api/profile", profilesController.Show)

	skillsController := controllers.NewSkillsController()
	router.GET("/api/skills", skillsController.Index)

	socialLinksController := controllers.NewSocialLinksController()
	router.GET("/api/social_links", socialLinksController.Index)

	return router, nil
}
</code></pre>
<h2>vercel.json</h2>
<a href="#%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0">ルーティング</a>に書いた通り、<code>vercel.json</code>で<code>/api/*</code>へのリクエストを全て<code>/api</code>にリライトします。
<pre><code class="hljs language-json">{
	"cleanUrls": true,
	"trailingSlash": false,
	"headers": [
		{
			"source": "/(.*)",
			"headers": [
				{
					"key": "Content-Type",
					"value": "application/json"
				}
			]
		}
	],
	"rewrites": [
		{ "source": "/api/(.*)", "destination": "/api" }
	]
}
</code></pre>
<h2>Vercel Serverless functionsのエントリーポイント</h2>
<code>api</code>ディレクトリ配下のgoファイルに<code>Handler</code>関数を定義すると、Vercelのサーバーから呼び出されます。この関数内で、自前で作成したルーティングを<code>server.NewRouter()</code>で取得し、<code>Handler</code>関数に渡される<code>http.ResponseWriter</code>と<code>http.Request</code>をechoインスタンスの<code>ServerHTTP</code>関数に渡します。
これでVercelへのリクエストを自前でルーティングできるようになります。
<pre><code class="hljs language-go">package handler

import (
	"net/http"

	"github.com/sainu/profile-api/server"
)

// Handler is handler function for vercel
func Handler(w http.ResponseWriter, r *http.Request) {
	router, err := server.NewRouter()
	if err != nil {
		panic(err)
	}

	w.Header().Set("Content-Type", "application/json")

	router.ServeHTTP(w, r)
}

</code></pre>
<h1>やり残したこと</h1>
<ol>
<li>echoで自前でルーティングしているのをVercelのServerless functionsでルーティングする方法が知りたい。</li>
<li>モデルのデータをどこかのデータストアに置きたい。</li>
</ol>