<img width="2094" alt="Eufzem4VgAU6fLh.jpg (511.2 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/03/17/25374/2262de34-1801-4d63-80f8-5e94a0004af9.jpg">

土地を買って家を建てた。最近、家やマンションを購入した記事をみかけるので経緯を書きたくなった。結果的に土地を決めるまで2ヶ月ぐらいで、探し始めてから1年後に引っ越しして住み始めている。爆速で土地を買った理由は後述。

## 家を買った理由

ライフステージの変化。**子供が生まれて手狭になった**のが大きな要因。私は岐阜からリモートワークしており、書斎用に一部屋専有する。2LDKだと狭いので、子供が大きくなったら遅かれ早かれどこかに引っ越さなきゃいけないと思っていた。

コロナ前から今後はリモート前提の仕事でいいやと思っていたのと、妻も岐阜近郊で楽しく働いており、ある程度は転職先の選択肢があるので、これは岐阜から動かないなーと思って買ってしまった。

当時私は育休中で、時間に余裕があり、子育てのために家を建てるという理由もあって、いい機会なので家探しをはじめた。結果的に平日に行動できるので、空いているモデルルームや展示場を子連れで見て回れて、散歩代わりにもなったしとても良かった。

## 家の大きさ

私のような田舎民は部屋が狭いことに慣れてない。広さが欲しかった。LDK 、寝室、仕事用の書斎 、子供部屋2つを前提として、収納にある程度余裕をもたせると、4LDK・4SLDKあたりがちょうど良さそうという結論に至った。

ちなみに子供は1歳半になるが、もう自分の部屋で一人で寝るのに慣れたみたい。

## マンションか中古リノベか分譲か新築か

どういう経緯で新築という選択肢をしたか書いておく。

まずマンションだが、真っ先に候補から外れた。理由はそもそも岐阜にマンションが少ないので選択肢が少ないのと、**私がエレベーターの待ち時間が耐えられない**のが大きい。また、マンションだと3LDKがほとんどで、ちょっと狭いかなという気持ちになった。マンションは駅近くが多いのだけど、駅近くは混んでるので車での移動は逆に不便になるとも思った。

分譲住宅も3LDKが多く、絶妙に痒いところに手が届かない間取りが多かったのでナシになった。「そこの吹き抜けいらんから部屋にしてくれ！」「和室もいらん！」みたいな。**自分が広めの書斎を求めているせいか、分譲住宅は合わない**んだなと思った。最近はコロナの影響もあるせいか、4LDKの分譲住宅も増えてきているっぽいが。

中古リノベも検討したが、狭い古民家が多かったり、立地条件が微妙だったりして、ほとんど選択肢がなかった。奇跡的によさそうな物件があったので、リノベ業者にお願いして見積もりをとってもらったところ、**理想の家にフルリノベするためには、かなりお金がかかることがわかった**。ぶっちゃけみんなが思ってるほど安くならない。この値段かけるなら新築注文住宅でいいわとなった。

## 土地探し

探し出して2ヶ月ぐらいで土地が決まった。購入した土地も、提案された次の日朝に買付証明書を出したぐらいのスピード感だった。なんでそんな即決できるの？という話だが、**土地勘があった** に尽きる。

買った土地は住んでいた賃貸から徒歩5分ほどの距離にある。結婚して2年住んだ結果、**「このへん絶妙に住みやすくない？」** ということが分かってしまったので、前提として近所で探していた。

賃貸時代含め、今の家はこんな感じ。

 - 名古屋駅までドアツードア30分
 - 東京まで2時間（新幹線使う）
 - 車で30分圏内にデパート5件、コストコ、水族館など色々ある

土地はハウスメーカー経由で探してきてもらって、地元の大手不動産屋と営業さんのコネで、まだオンラインの媒体に掲載される前の土地を安く買った。建築条件付きの土地でもなかったし、地盤改良も不要で神土地だった。

 - 建築条件付き: そのハウスメーカーで建てるという条件がついてくる。ハウスメーカーが整備した土地にありがち。
 - 地盤改良: 地盤が弱いと50万〜数百万かけて改良が必要になる。運ゲー。

できる営業は超絶コネをもっているので、まずは良い営業をつかまえて、コネで探すのが一番だと思った。また、オンラインに掲載されている土地はだいたい売れ残りだと分かった。

お買い得な土地は市場にはでてこないし、出てきても即買われてしまう。このへんはエンジニア採用やってるときの感覚と似ている。よくよく考えると当然なんだけど。

......

ということで、良い土地と出会ってしまったので、家を建てました。やっぱある程度の広さがあると子育てもしやすいです。

ところで、**国が推奨している家の広さは25平米 + 25平米 * 人数なので、例えば4人家族だと125平米がちょうどいいサイズらしいです。**

## まとめ

 - 買う前に近所に住んでみるといい
 - 良い物件は市場に出る前に取引される
 - 中古リノベは意外と金がかかる
 - 営業はガチャ要素強いので紹介してもらうのがいい

ローンの話はまた別途エントリ上げる予定です。

勢いで家を買うまでの話

最近、「リモートOKなんで弊社に転職しませんか？」的なお誘いがチラホラ来るようになったけど、若干辛いメッセージも増えてきている。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">リモート特別に許可しますよって言われても心動かないし、みんなリモートしてますようち来てくださいって言われても、コロナ落ち着いてみんなオフィス戻ったらどうなんねん</p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1369658553250680836?ref_src=twsrc%5Etfw">March 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このツイートの文脈ね。

## つらいケース

全然知らない会社から急に

 - 「リモートOKですよ。面談しませんか。」
 - 「週1集まってるけど、フルリモートでもOKですよ。」
 - 「今はみんなフルリモートで働いていますよ。うちきませんか。」

みたいなメッセージをもらったりする。

OKってことは、特別に許可してあげるよ〜ってことかな。対等な関係だと思うのだけど。
そして、今だけリモート可って話なのかな？

リモート4年以上やってるのでよく分かるのだけど
**一人でもフルリモートワーカーがいたら、会社全体の仕組みがリモート前提にならないとかなり辛い**

## 気にならなかったケース

その会社に知り合いがいたり、前から話してみたいエンジニアがいたりして、ある程度コミュニケーションが取れた後に「方針としてはオフィス前提だけど今は仕方なくリモートしている」ことを聞かされるケース。

この場合は、つらいなあー、とは思わなかった。一緒に働けなくて残念となった。
ちゃんと考え方を伝えてもらってからのアレなので。

## 結局何が辛かったのか

 - 「リモート？しょうがねえな。まあ声かけてやるよ。」と言われているように聞こえた
 - 1回も話したことがないのに、考え方を「決めつけ」られているように感じた

リモート前提かどうかは会社の戦略次第だと思っているので、オフィス前提の会社があっても私は全然かまわないのだけど、採用担当が無理やり母集団を広げてリーチしようとしているのは、あまり共感できないなあと感じた。

ちょっとした言葉遣いに、思想が反映されるなあと。

リモート"OK"ということはどういうことだ？

新居の庭がフルオープンだったのでウッドフェンスをDIYした。

<img width="2438" alt="PXL_20210307_023119655.MP.jpg (1.5 MB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/03/08/25374/7988ae95-b80c-472f-b15c-e1be00e9101b.jpg">

## まとめ

 - フェンスをDIYした
 - 柱は外構屋さんに建ててもらった
 - 資材の購入もお願いした（ホームセンターの木だと質が微妙なため）
 - 3.5日かかった

## DIYした経緯

 中途半端な高さのフェンスだと外から丸見えになってしまうので、ある程度高さのあるフェンスが欲しかった。

外構屋さんにお願いしたかったのだけど、予算オーバーのため、材料の購入と柱を建てるところまでお願いして、板の塗装と貼り付けを自分で施工することにした。ちなみに外構屋さんの提案だった。（よく提案するらしい）

柱はコンクリ流し込んだりが大変なので、業者さんにやってもらうのは理にかなってる。塗装と貼り付けは素人でもぜんぜんいける。

## 工程

 - 塗装して1週間乾燥
 - 塗装して1週間乾燥（2回目）
 - 穴あけ&カットして等間隔で打ち付け

**2m * 16m**のバカでかフェンスだったので、板の枚数が50枚前後あった。早朝から夕方までひたすら塗り続けてようやく1日で終わる感じ。塗装それぞれ1日ずつ。貼り付けに1.5日で合計3.5日かかった。テキパキ終わったほうな気がする。

塗装は[キシラデコール](https://amzn.to/3t0iYIJ)を使用

### 1回目

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">疲弊しています <a href="https://t.co/KPGK6k5xrW">pic.twitter.com/KPGK6k5xrW</a></p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1362963409696813057?ref_src=twsrc%5Etfw">February 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 2回目

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">2度塗りヨシッ！ <a href="https://t.co/yXSyoxdz89">pic.twitter.com/yXSyoxdz89</a></p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1365555781995663362?ref_src=twsrc%5Etfw">February 27, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

2度塗りするとそれっぽくなった

### 板貼り

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">フェンス半分張った！ヨシッ！ <a href="https://t.co/NEqudgElOx">pic.twitter.com/NEqudgElOx</a></p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1368137831919456258?ref_src=twsrc%5Etfw">March 6, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 完成

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ウッドフェンスのDIY完了したぞ！これで無限にバーベキューができる！カーポート付けたから雨でもバーベキューができるヨシッ！ <a href="https://t.co/A0o9cheZlh">pic.twitter.com/A0o9cheZlh</a></p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1368390099512135680?ref_src=twsrc%5Etfw">March 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

若干ムラがあるけど、わりと綺麗にできたと思う。
手作りなので愛着も出てよかった。はやくBBQしたい。

ウッドフェンスDIYの記録

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">マイナポータルで児童手当の変更届出そうとしてるんだけど難しすぎる。これちゃんとテストしました？？？ <a href="https://t.co/rqvIkM1FBF">pic.twitter.com/rqvIkM1FBF</a></p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1367265521767387142?ref_src=twsrc%5Etfw">March 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

なんかめっちゃ反応があった。

## 何があったの？

 - 新居に引っ越したので児童手当の住所変更手続きをしようとした
 - 調べたところ、紙で提出する方法と、マイナポータルで申請する方法があった
 - 私はマイナンバーカードを保有しているので、マイナポータルで申請しようとした
 - 子供は令和生まれだが、**令和に対応してなかったので申請失敗**

## 申請ページ

ぴったりサービスという、各種手続きを検索できるページがあるので、ここから探した

> ぴったりサービスでは、子育てに関する手続をはじめとして、様々な申請や届出をオンライン上で行うことができます。申請又は届出をする手続を検索してみましょう。

https://app.oss.myna.go.jp/Application/search

<img width="1564" alt="image.png (66.5 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/03/04/25374/b01622b1-5438-4511-8848-fc4d64454061.png">

受付開始日 2017年06月18日　ということなので、平成に作られたサービスである。

## 入力項目

受給者は和暦の選択がある

<img width="2150" alt="image.png (310.4 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/743350f8-e505-4430-bb7b-3dabb7254ac2.png">

児童は和暦の選択がない

<img width="2008" alt="image.png (59.0 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/303a1f56-de37-44ee-84dd-f97fff9ec581.png">

1からはじまっている

<img width="1976" alt="image.png (628.0 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/e00cbf9d-0ba5-4437-a463-e703f4b889cc.png">

100まで

<img width="1504" alt="image.png (242.2 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/ba8069ab-46ad-4021-a39a-021179281ee5.png">

ということで冒頭のツイートになる。

## 思ったこと

 - 最初は西暦だと思った
 - 入力項目が1〜100なのでどうやら和暦っぽい
 - 対象となる児童は、平成生まれと令和生まれがいるはずなので、選択肢がないのはおかしい
 - もしかして西暦の下二桁かも？ → 選択肢に100がある
 - 岐阜市の変更届（紙）を見ると、選択肢がある

<img width="1446" alt="image.png (73.2 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/444fce64-c36f-418c-8987-e04cf6afac42.png">

面倒になったので結局紙で提出することにした。

## 分かったこと

「申請書を見ながら入力」というのがある

<img width="2038" alt="image.png (134.9 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/a1147df9-d341-4f4b-b3c8-744563d4c039.png">

<img width="1886" alt="image.png (830.0 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/e94cf6e0-3321-4fc2-ab2a-f0d0dd0e12d9.png">

なるほどここの青色の入力項目がそのままフォームに対応しているのか・・・
**ってあれ、この紙の申請書、令和対応してなくない・・・？**

## 予想

 - 開発当時は和暦の選択が不要だった（給付対象となる児童は平成生まれしかいないため）
 - 開発時に「紙」の申請書を入力仕様として、記入欄をそのままWebフォーム化してしまった
 - 平成→令和の国のシステムの影響確認から漏れた or 知ってたが何らかの理由で直せてない

## まとめ

ツイートには「テストしたんか？」と書いたけど、システムテストというよりは、「実際のユーザーに使ってもらった？」「自分で使ってみた？」というごくごく当たり前のテストことを指していたのだが、やらない人たちが多いんだな〜という学びだった。

## オチ

市役所行ったら移動時間も含めて15分で手続き終わった

マイナポータルで児童手当の変更手続きに失敗した件

<img width="2264" alt="PXL_20210112_043506312.MP.jpg (699.1 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/01/17/25374/c121349f-fbc3-4392-b680-092a257ec390.jpg">

1年ほど前から家の購入を検討しはじめて、結果的に注文住宅を建てることにした。
もうすぐ新居の引き渡しがあるので色々振り返ろうと思ったが、ネタが多すぎるので一旦ここに羅列しておく。

 - 岐阜に建てた経緯と土地探し
 - 新築、マンション、中古リフォーム
 - 育休中の住宅ローン
 - 変動金利と固定金利とがん団信
 - つなぎ融資不要だった話
 - 住友林業どうだったか、坪単価の話
 - 工務店と大工さんの話
 - 延床36坪（120平米） + 4LDK（4SLDK?）+ 総二階
 - リモートワークと書斎とスタンディングデスク 
 - 食洗機: 新型ミーレ（洗剤自動投入）
 - 乾太さんと都市ガス
 - ZEHと太陽光
 - cat5eとインターネットと情報分電盤の話
 - 子供部屋の収納
 - 玄関クローゼットと土間
 - 床: 朝日ウッドテック、ライブナチュラルプレミアム
 - ウッドブラインド: TOSO 桐
 - キッチン: クリナップと便利家電置き場
 - エアコンの隠蔽配管
 - 外構の話
 - 建築中の写真
 - ルームツアー動画

こんなところ？

もうすぐ新居の引き渡しがある

<img width="1024" alt="PXL_20210111_041825185.MP.jpg (172.0 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/01/11/25374/41c96e93-78e9-4d19-8751-45abfcc61631.jpg">

ブログに埋め込んでいるS3のバケットパスがそのまま露出していたので、CloudFrontを使ってCDNで配信するようにした。

画像自体はPixel 5で撮影した写真をそのままアップロードしているためちょっと重く、自動で圧縮させたい。最初はImage Optimizerが使えるFastlyなりCloudflareなりを使ってみようかと思ったが、「営業に問い合わせてね！（ニッコリ）」と書かれていたので諦めた。

実装はesaのbody_mdをキャッシュする際に脳死で置換しているのみ。

ドメインはGoogle DomainsなのでS3とは若干相性が悪く、ACMの検証が終わらないのでとりあえずCloudFrontの生ドメインで置換しておいたので、どっかのタイミングで直す。

※画像は 私のお気に入りスポット、長良側河川敷です。だれもいないからよくまったりしにいく。


CloudFrontで画像をCDN化した

OGPが全ページ同じになっていたので、最初のイメージタグで設定された画像をOGPとして設定するようにしてみた。

以下の画像は年末に食べた雲丹です。
<img width="271" alt="PXL_20201229_110356441.MP.jpg (19.1 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/01/01/25374/4a71838e-9513-40e3-af62-80f525668c5e.jpg">


OGPの個別設定

## 今年やったこと

 - 育休から仕事に復帰
 - 育休本を出して色々と取材を受けた
 - 新規事業の立ち上げに参加
 - 家買った（引き渡しは来年）
 - 副業少し

<img width="2411" alt="PXL_20201226_045249810.MP.jpg (907.9 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2020/12/31/25374/76ba4b8e-b7de-471d-8b07-0b7256f8d999.jpg">
※もうすぐ完成

## 振り返り

育休復帰して子育てしながら仕事をしていたら、気づいたら2020年が終わっていた。わりと寝付きがよくて、自分の時間はある程度確保できたのでありがたい。

仕事にはスムーズに復帰できたが、あまり対外的なアウトプットまで手が回らなかった。手を動かすのが遅かったなーと感じたので、来年は面白いなと思った領域を、とりあえず手を動かして遊んでみることにしよう。


2020年のふりかえり

Google Pixel 5を購入した。10/15に発送連絡がきて、なぜかその日のうちに届いた。まだ1日も使ってないが、いまのところの感想を書いた。Pixel 3を使っていたので、比較になる。

## Good: サイズ感

ちょうどいい。Pixel 3より若干大きいが、大きすぎないレベル。

## Good: 端末の移行体験

もともとPixel 3を使用しており、Googleアカウントべったりなので、データ移行のチュートリアルでさくっと移行できた。

## Good: 画面のリフレッシュレート

Pixel3の60Hz -> Pixel5で90Hzになったので、ぬるぬる感がすごい。

## Bad: 戻るアクション

戻るが仮想ボタンではなく左スワイプになっている。単純に慣れない。意図せず戻ってしまうことが多々。Pixel 3のように下部にボタンを用意してほしい。一応、ジェスチャーやめて3ボタンに変更できるが、すべてボタンにしたいわけではないので、絶妙に使いづらい。

## Bad: 起動中のアプリ一覧

Pixel 3は画面下部から大きく上にさっとスワイプするだけで、起動中アプリ一覧が表示されたが、スワイプ後に長押しが必要になり動作がワンテンポ遅くなっている。ジェスチャーやめれないのは前述の通り。

## Bad: 電池の持ち

バッテリーが4000mAhに増加しているが、Pixel 3と体感同じぐらいガンガン減っていく。
まあ1.3倍になっただけだし、画面はでかくなってるので、しょうがないね。

## Bad: 液晶が黄色い

Pixel 3と比べて明らかに発色が黄色みががっているのが気になる。使ってたら気にならなくなってきたが、、これが尿液晶ってやつ？

## Bad: Felicaの挙動が不審

iDを設定しているのに反応しない。初期不良か？コンビニで「あれっ、反応しない汗 こっちのカードでお願いします」をやる羽目になったので大変辛かった。電子マネー系は設定確認するのに物を買う必要があるの難しい。

## モバイルSuica

これはPixel 5とは直接関係ないのだが、モバイルSuicaの設定を移行するために、移行前機種で手続きを行う必要があり、この手続にSIMが必要だった。もうすでに差し替えたあとだったので、とても面倒だった。

## まとめ

現時点だとあんまりおすすめできんなーという感じはあるが、FGOもサクサク動いたし、Pixel3ユーザーで電池がもう死にそうッって感じなら買ってOK。

Pixel 5を購入した

新居にいれるソファを検討したくて、冨士ファニチアのAgio（アージオ）というソファを見てきた。岐阜にショールームはないので、名古屋の千種まで行った。

[冨士ファニチア FUJI FURNITURE Co.,Ltd - Agio](https://fuji-furniture.jp/products/category/sofa-stool/sofa/l08670-rl.html)

自分の中の椅子の選定基準は概ね3つで

 * 座面の奥行きが浅め
 * 背もたれが高め
 * カバーが洗濯できる

ソファを探すとき、最初は自分の好みが全然わからず、家具屋を巡って試座するなかで好みに気づいた。新居の家具を検討するときは、最初から特定のブランドのショールームに行くのではなく、インテリアフェアや大きめの家具問屋のショールームへ足を運んで、自分の好みを絞るといいかもしれない。インテリアフェアでは、たくさんのブランドの家具を同時に見ることができ、時間の節約になる。

私の場合、初期はカウチソファのような大型のソファを検討していたが、実際座ってみたら、腰が座面の一番奥までフィットしないのに違和感があった。同時にダイニングチェアの試座もしたのだが、ダイニングチェアには背もたれ部分が低いタイプと高いタイプがあり、低いタイプは座った時に違和感があったので、そこで自分の好みを知った。

色々とソファを見たが、Agioは座り心地が抜群に良かった。そこそこお値段はするが、ソファは予算配分の中でもプライオリティが高めなので、たぶん買うと思う。

ちなみに標準サイズが10万ちょっと x3で30万ぐらいする

ちなみにこのAgioだが、一人がけ用の椅子を連結して使うようになっている。場合によっては、離して使用したり、来客時には1脚だけテーブルの横に移動させて使うなど、使い勝手が良さそうなのも気に入った。移動させる前提なので、非常に軽いのも魅力的だった。

ちょうど代理店のシークレットセールが開催されていたが、HM（ハウスメーカー）経由で購入したほうが値引率もいいみたいなので、家の代金に含める形で買う予定。

冨士ファニチアのAgioというソファを見てきた

CSSがお粗末な感じだったので直した。だいぶ見やすくなったはず。最初はtailwindcssを使って書き始めたのだが、記法を覚えるのが大変面倒になり、最終的に直接書いてしまった :innocent: 

また、OGPも設定した。記事ごとにタイトルからOGPが生成カッコイイと思ったが、プロフィールアイコンを設定しておいた。これはまた今度やろう。

## Reactで複数エレメントを返す

metaタグを詰めたオブジェクトをHTMLに展開する際、ルートのdivが邪魔だなーと思って調べたら ```<React.Fragment>```を使えば、複数のエレメントを直接展開できることが分かった。デザイン崩れ対策に覚えておこう。

short syntaxとして```<>```も使える。

[Fragments – React](https://reactjs.org/docs/fragments.html)

CSS直してOGPを設定した

個人サイトをNext.jsとesaを使って作った。

スタイルが適当だったりmetaとか色々設定してないけど、記事が見れればいいっしょ、ぐらいのノリなので、とりあえず公開している。

[corocn.dev](https://corocn.dev/)

## モチベ

r7kamura氏のエントリを見て作ろうと思った。
 * https://r7kamura.com/articles/2020-09-21-personal-website

概ね理由は同じだが、フィードバックと適切な距離を置いて、アウトプットへのハードルを下げたいのが理由。前から作りたいなと思っていたので、えいやで構築した。

このネタどこで書こう、Qiita? Zenn? note? はてブ? というように選択コストが上がってきたのと、プラットフォームが燃えてると自分の記事まで燃えている気持ちになるのにつらみを感じたので、雑に個人サイトでアウトプットする形に戻した。技術ネタ以外も書きたいし。住宅購入の話とかね。

## スタック

 * [Next.js](https://nextjs.org/) +  [Vercel](https://vercel.com/) +  [esa.io](https://esa.io/)

### Next.js

 * 仕事でVue.jsを書いてるので、Reactが書きたくなった
 * [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration) がすごい（でも今回は使ってない）
 * ナウくてかっこいい

### Vercel

 * シンプルで便利
 * ISRも対応してるしすごい
 * 個人使用なら無料で使える

### esa.io

 * 個人で契約して使っていた（月500円）
 * Markdownで書いてプレビューできる
 * 画像のアップロード先に独自のS3バケットを設定できる
 * APIで記事が取得できる

## 仕様

次の形で記事が公開される

 * esaの特定のカテゴリ以下に記事を書いてShip It!
 * WebHookがesa -> Vercelに飛んでビルド開始
 * APIでesaから記事を取得して静的ビルドされる

## 構築するときに考えたこと

考えたことをつらつら書いておく

 * Incremental Static Regeneration が必要かどうか
 * APIのリミットとキャッシュ
 * 画像の扱い
 * MarkdownからHTMLへの変換
 * プレビュー
 * デプロイ（WebHook）
 * メタ情報
 * スラッグ

### Incremental Static Regeneration（ISR） が必要かどうか

数百記事までなら正直不要だと考えたので、使ってない。キャッシュの有効期限を短くしすぎると、動的サイトを同じなので、API側に負荷がかかってしまう。長くすると、静的ビルドしたほうが公開が早くなる。また、esa側のAPIにリミットがあるので、ISRを選択する場合、何かしらのキャッシュを行う層を設けなくてはいけなくて、いろいろ大変なのでやらないことに決めた。

正直カッチョイイ機能なので使いたかったが、記事が増えてきたらトライする項目としておく。

### APIのリミットとキャッシュ

[dev/esa/api/v1 #noexpand - docs.esa.io](https://docs.esa.io/posts/102)

> 現時点では、ユーザ毎に15分間に75リクエストまで受け付けます。

なので、75記事以上ある場合、記事単体で取得するコードを雑にループすると死んでしまう。これを回避するために、静的ビルド時に記事の取得方法を工夫している。

esaは記事一覧のAPIを叩くとMarkdown本文まで取得できるので、一覧へリクエストした際に、個別の記事をローカルにキャッシュしている。キャッシュは .next/cache/posts/[id].json という形で保存しておく。個別ページのビルド時にgetPost(id) のような関数を用意しているが、リクエストを発生させずに、このキャッシュを見にいっている。次の内容しか保存していない。

```json
{ id, title, body_md, updated_at, created_at }
```

記事一覧APIの取得上限は1リクエスト100記事なので、7500記事まで対応できる。
個人サイトなら十分すぎると思う。

### 画像の扱い

esaは画像のアップロード先として、独自のS3バケットを設定できる。esaのバケットにアップした画像を直接公開個人サイトで公開するのは明らかに逸脱した使用だと感じているので、Headless CMSとしてesaを使う場合は必ず設定すること。

[help/ファイルアップロード先に独自のS3 Bucketを設定する - docs.esa.io](https://docs.esa.io/posts/81)

### MarkdownからHTMLの変換

正直デファクトが分からない。Next.jsのTutorialでremarkを使っていたので、そのまま使っている。コードハイライティングにhighlight.jsを使用。プラグインもある。

 * https://github.com/remarkjs/remark
 * https://github.com/remarkjs/remark-highlight.js

実はesaのAPIを叩くとHTMLも返してくれるが、Markdown前提で作っておきたかったので、使っていない。

### プレビュー

リアルタイムプレビューみたいなものを考え出すと色々面倒なので、esaのプレビューで十分だと考えている。

### デプロイ

esaの記事更新時のWebHook + VercelのDeploy Hooks を組み合わせて実現している。記事をShipItで作成、更新すると、VercelにWebHookが飛び、自動で静的ビルドが走る。特定のカテゴリ以下のみWebHookされるように設定しているので、他の記事を書いたときに不用意にビルドが走ることもないのが良い。esa、便利です。

<img width="1016" alt="esa-deploy.png (255.2 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2020/10/01/25374/9594025f-e645-41d2-9009-3b52fe036586.png">

<img width="825" alt="vercel-deploy-hooks.png (101.4 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2020/10/01/25374/c214a40f-c1d6-4777-8c97-d0a195e3b7d8.png">

### メタ情報

esaをHeadless CMSにするとメタ情報をどこに記述するかが問題になる。

今回やりたいこと

 * https://corocn.dev/posts/1 のようなIDでの参照をやめる
 *  https://corocn.dev/posts/super-ultra-greate-page のようにページURLに固有の文字列を与えたい

スラッグ（slug）とも言うみたい。これを実現するため、Speaker Deck のような形でやることにした。タイトルに埋め込んでしまう方式。

 * [Speaker Deck で最高の URL を生成する技術 - kakakakakku blog](https://kakakakakku.hatenablog.com/entry/2018/05/07/003042)

esaは スラッシュ"/" がカテゴリの区切り文字として使われているので、 "--" で識別することにした。"-- about-this-site"  と記述すると、公開されるURLが [https://corocn.dev/posts/about-this-site](https://corocn.dev/posts/about-this-site) になる。

<img width="1198" alt="image.png (93.4 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2020/10/01/25374/1b0e9d09-6966-4411-b05c-996334f37245.png">

もっと情報をもたせたくなったら、記事内に埋め込むことを検討したい。

## まとめ

 * 個人サイトをNext.jsとesaで作った
 * 1日ぐらいでサクっと作れたのでよかった

Next.jsとesaを使った個人サイト構築

## このサイトなんですか？

 * [@corocn](https://twitter.com/corocn) の雑記です

## 問い合わせ

 * Twitter DMが反応早いです


このサイトについて

# これは何

諸々の表示確認用のページ

以下から拝借
https://github.com/markdown-it/markdown-it/blob/master/support/demo_template/sample.md

# Embed Object

## Sample

This is a tweet.

https://twitter.com/corocn/status/1236196921997287425

This is a youtube video:
 
https://www.youtube.com/watch?v=aoLhACqJCUg
 
This is a photo:
 
https://www.flickr.com/photos/pedrocaetano/27432477888
 
This another photo:
 
http://www.23hq.com/mprove/photo/66422006
 
Check it out 👆

# Syntax Check

## JavaScript

```javascript
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export  $initHighlight;
```

## Ruby

```rb
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute
```



# h1 Heading 8-)
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading


## Horizontal Rules

___

---

***


## Typographic replacements

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,,  -- ---

"Smartypants, double quotes" and 'single quotes'


## Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~


## Blockquotes


> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.


## Lists

Unordered

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar


## Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code


Block code "fences"

```
Sample text here...
```

Syntax highlighting

``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

## Tables

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right aligned columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |


## Links

[link text](http://dev.nodeca.com)

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)


## Images

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Like links, Images also have a footnote style syntax

![Alt text][id]

With a reference later in the document defining the URL location:

[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"


## Plugins

The killer feature of `markdown-it` is very effective support of
[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).


### [Emojies](https://github.com/markdown-it/markdown-it-emoji)

> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)

see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.


### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)

- 19^th^
- H~2~O


### [\<ins>](https://github.com/markdown-it/markdown-it-ins)

++Inserted text++


### [\<mark>](https://github.com/markdown-it/markdown-it-mark)

==Marked text==


### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.


### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)

Term 1

:   Definition 1
with lazy continuation.

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

_Compact style:_

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b


### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)

This is HTML abbreviation example.

It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

*[HTML]: Hyper Text Markup Language

### [Custom containers](https://github.com/markdown-it/markdown-it-container)

::: warning
*here be dragons*
:::

表示確認用の投稿

<img width="239.99999999999997" alt="corocn_背景なし.png (157.6 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2020/09/27/25374/b050a9bf-9496-433a-8178-a837c04ce6e3.png">

 * Takahiro Tsuchiya
 * [@corocn](https://twitter.com/home)
 * ころちゃんと呼ばれることが多い

## 経歴

 * 2019-02 〜 現在
     * 株式会社キャスター （bosyu開発チーム）
 * 2017-04 〜 2019-01
     * 株式会社Misoca
 * 2015-05 〜 2017-02
     * 株式会社Arc
 * 2013-04 〜 2015-04 
     * DENSO
 * 2011-04 〜 2013-03
     * 国立大学法人 名古屋工業大学 大学院工学研究科 徳田・李研
 * 2007-04 〜 2011-03
     * 国立大学法人 名古屋工業大学 工学部 情報工学科

## Links

 * https://corocn.jp/
 * https://github.com/corocn
 * https://www.facebook.com/corocn
 * https://slackemojigen.com/