Official Website

GitHub

はてなブックマーク

Twitter

Facebook

Instagram

Tumblr

2022年の大晦日なので、本年の振り返りをば…前年まではコロナ禍真っ盛りということもあって行動を謹んでいた所も多かったものの、本年は色々と動きがあった（動かざるを得なかった）ため、色々と書いてまとめたいことが増えた。トータルで見れば仕事もプライベートも充実できたので、有意義な1年だったかなと思う。 <h2 id="hf011db6a88">退職</h2>2月にこれまで丸3年務めていた会社を任期満了に伴い辞めることにした。選択肢としては辞めるor正社員登用の2択だったものの、すぱっと見切りをつけて他のWeb制作会社に就活をするという選択を取った。最初に入った会社を辞める際は（心の中で）中指を突き立てて辞めた感があったので、今回は無事円満に退職できて良かった。貴重なエンジニア枠がいなくなって会社的には困っただろうけど。今でもわずかにこの時の会社の方々と連絡を取る機会があるものの、辞める人が多いようで色々と大変そう。もっとも、離職ドミノの先陣を切った張本人なので他人事感100%だが。 なお、退職の時点で転職先が決まっておらず「会社辞めたらニート生活だあああ」と思っていたので、まとまった有給消化は行わなかった。代わりに会社最後の1〜2ヶ月は毎週3〜4日出社で、水曜などに有給取得して分散消化…という働き方をしていた。週休3日制は最高！その平日休みの時に転職活動をスムーズに行えたので、最後にまとめて有給消化するよりも動きやすいと感じた。 退職してから1週間後に内定を頂いたものの、様々な都合で入社日が4月にもつれこむことになり、それまでは実家でダラダラすることにした。地元の友達ともたくさん会えたので、これはこれで良かったかな。次回転職する際も数ヶ月間開けてしまいたい（お金の面で大きな問題がなければ） <h2 id="h138efb3811">転職</h2>これまで社内唯一のエンジニアとして働いていたものの、このままだとちょっとな…という思いでエンジニアが集まっていそうな会社に転職した（受かって良かった）。転職先はとても良い環境で、エンジニアの方々に囲まれるのは福利厚生の1つに思えた。色々と手厚くやってくれる会社なので、これまでより働きやすく感じている。前職よりも様々なタスクを同時並行で捌く必要があるため、タスク管理などの能力が試されているが、とりあえずは恙無く仕事をこなすことができている。CSS設計やTypeScriptをメインで相手にしており、独学やちょっとしたタスクだけだと身につけるのが厳しいことを学べている。まだまだ出来ないことが多いので、現状に甘んじることなく色々なタスクに挑んでみたい。また、現職からリモートワークができるようになったので、これもまた新しい挑戦としてちょうどよかったし、何より通勤から開放されるのが非常にデカい。転職して良かったなー <h2 id="hf29e076a6d">引越し</h2>転職後に引越しをした。理由としては通勤時間の短縮がメイン。通勤時間よりも満員電車が想像以上にきつかったというのがあり、これなら引越し費用を墓地に捨てたり月々の家賃が上がってしまったとしても仕方がないかなというお気持ちになり、職場からまあまあ近い場所に移り住んだという流れ。この決断は通勤時間の短縮もさることながら、プライベートでも良い方向に影響を与えてくれた。 段ボールの山<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/0b2bf32e835d4e87a914e1a94584d70f/moving.jpg" alt=""> <h2 id="h227b8a8919">小旅行</h2>引越し前の場所がどこに遊びに行くにも微妙に遠いというのもあり、（コロナ禍というのを差し引いても）家に引きこもっていることが多かった。しかし、引越し先が比較的関東圏内の観光地にアクセスしやすい場所に位置しているということもあり、週末にお出かけをする機会が増えた。自衛隊のイベントに行ってみることが多く、これらに関しては以下の記事でまとめた。<ul><li><a href="https://blog.klim0824.dev/articles/20220911/20220522_yokota" target="_blank" rel="noopener noreferrer">20220522 横田基地のお祭りに行ってきた | 🐺 射撃しつつ後退</a></li><li><a href="https://blog.klim0824.dev/articles/20221230/20220806_yokosuka" target="_blank" rel="noopener noreferrer">20220806 横須賀基地のお祭りに行ってきた | 🐺 射撃しつつ後退</a></li></ul>他にも鎌倉に行ったり高尾山に登ったりしているものの、まだ記事にはまとめきれていない…。 高尾山山頂<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/a51b4b6f9ce64db488e0373f57d92cdb/takaosan.jpg" alt=""> 鎌倉<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/be550220df794b1bbca3e07f23786302/kamakura.jpg" alt=""> <h2 id="h59ad66864d">ブログ立ち上げ</h2>本ブログを立ち上げたのが3月末の時だった。新しい職場で使うかもしれないと思いながら素振りの気持ちで作ったものだったが、残念ながら転職先でTypeScript以外の技術スタックを使う機会に恵まれていない…。でもここで身につけたことが活かせている箇所もあるので、プライベートでも手を動かすことは大事だと再認識できた。<ul><li><a href="https://blog.klim0824.dev/articles/20220330/building-a-blog-with-nextjs-and-microcms" target="_blank" rel="noopener noreferrer">microCMS + Next.js + TypeScript + Chakra UIでブログを構築した | 🐺 射撃しつつ後退</a></li></ul> <h2 id="ha21e4b33a9">地元の友達にWeb制作のあれこれを教える</h2>8月頃からWeb制作のあれこれをマンツーマンで週1の頻度でレクチャーするという会をやっている。HTMLとはなんぞや？からWebデザインに関することを2時間前後でお話しするという小ぢんまりとした会だ。元々スライド作成をしたり、自分の知識をまとめて…という作業が好きで、特に苦に感じることもないのでお安い御用と引き受けた。ここで教えて感じたのが、HTMLの存在意義を伝える際に初手でマシンリーダブルやアクセシビリティの概念を伝えるとラクだということに気がついた。人間はプレーンテキストだけ見せても見出しとかリストの関係性を勝手に認識できるけど、単純な機械はマークアップされたテキストからの方が情報の取得がラクだよ…的な感じ。人に教えることで、どのような表現をすれば人に伝わりやすいかという試行錯誤を経ることができたので、これはこれで教える自分にとってもいい経験になった。 <h2 id="h46ca300c47">オフ会</h2>コロナ禍とは言え、人と関わる時間を増やしたいと思い、SNSのオフ会などに参加する機会を少し意識して増やしてみた（退職と転職の間のニート期間に色々予定をぶちこんだというのもある） 隅田川オフ会<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/50b5fa6986524ef1abd6a5b103bfa02d/sumidagawa.jpg" alt=""> 中山競馬場オフ<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/2a22da97a9664e19bc911fabb7a82226/nakayama.jpg" alt=""> 東京タワー見ながら花見<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/7c07433633624e16999d5c34f52f23d7/tokyotower.jpg" alt=""> ゲームマーケット<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/61150a9da3614223ad8733e3052f3ec0/gamemarket.jpg" alt=""> 来年も色んな人と色んな場所に行ってみたいなー <h2 id="h297714505a">オフラインセミナー参加</h2>元々WebとかIT関連のセミナーやカンファレンスに参加することが好きだったので、このコロナ禍でほぼ全部オンラインで開催されるようになって残念な気持ちになっていた。もちろんオンラインでも楽しくお話を伺うことはできるし、自宅からのんびり視聴できるのでそれはそれでメリットは有るのだけれど。そんな中、少しづつオフラインセミナーが開催されるようになったので、せっかくだからと足を運んでみた。やっぱ、人が物理的に集まってみんなで一斉に登壇者のお話を聞くという会場の一体感が好きなんだろうな。 <img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/f15a98bb097b4c2eaf43f07b1f445bba/seminar1.jpg" alt=""> <img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/8a895d7dd42d41ec9710c7c4d21206d0/seminar2.jpg" alt=""> <h2 id="hece3edabf8">お金関連</h2><h3 id="h93f66c5a83">つみたてNISA</h3>つみたてNISAを去年くらいから始めており、今年も粛々と40万円を積み立てた。今後NISA改正が行われて恒久化するという話が出ているものの、あまり深く話を追えていない…。現状一応プラスになっているので、今後も粛々と積み立てていきたい（ウクライナ戦争の時にドカンと利益が減ってビビったが… <h3 id="h5fb0eee304">ふるさと納税</h3>つい先程、人生で初めてのふるさと納税をやってみた（手続きはこれから）転職が重なったということもあって年収が控えめになった年なので、控除対象額もまた控えめに…。対象となる自治体は自分の地元に限定することにし、そこで返礼品を探すという流れになった（返礼品目的で縁のない自治体にお金を流すことに抵抗感があるので） ＠自分へ　以下の書類を印刷して、必要書類と一緒に提出しましょう。<ul><li><a href="https://www.soumu.go.jp/main_content/000397109.pdf" target="_blank" rel="noopener noreferrer">寄附金税額控除に係る申告特例申請書 - 総務省</a></li></ul> <h3 id="h8e767d6327">MVNOで日々の通信費を節約</h3>長らくダラダラと携帯キャリアの通信プランを契約し続けていたが、重い腰を上げて格安SIMとやらに乗り換えることにした。乗り換えてみたところ、現在月々の支払いが千円を下回っており、「なぜ自分はもっと早く…」と後悔している。もっとも、通勤時間が短い＆リモートワークの日は家のWi-Fiで済む＆屋外で動画は見ないという各運用のお陰で低価格プランでも不便が無くなっているという側面もある。 <h2 id="h13b1a7e351">映画鑑賞</h2>MCUやアクション映画が大好きなので、これらをIMAXで見るのが定期的なお楽しみ。 Doctor Strange in the Multiverse of Madness<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/4d01b3f573754f488fe5aadb64903f15/movie1.jpg" alt=""> Top Gun: Maverick<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/1fedff6bcc08447b975436d2894f75e7/movie2.jpg" alt=""> Thor: Love and Thunder<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/25ffb399d8eb42a0a9edae357bb98741/movie3.jpg" alt=""> Jurassic World: Dominion<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/985e76a88e5c479ca946e25119d4a955/movie4.jpg" alt=""> ガールズ&amp;パンツァー 劇場版&nbsp;爆音上映会<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/a614db11f484452ea20156a230a5ccb1/movie5.jpg" alt=""> Black Panther: Wakanda Forever<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/81a17eb6ad4e4a22a4df337695f0d4ec/movie6.jpg" alt=""> 来年はAnt-Man and The Wasp: Quantumaniaが来るぞ！！！ <h2 id="h8821b2b241">ゲーム</h2>ポケモン三昧な1年でした！ Pokémon LEGENDS アルセウス<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/97e9125a3e3d4a2b9a13b89432cdc42a/pokemon.jpg" alt=""> ポケットモンスター スカーレット・バイオレット（図鑑埋めに躍起で、まだポケモンリーグに挑んでいない）<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/431ef92384564ecb88e6c864e504481b/pokemon2.jpg" alt=""> また、ボードゲームやカードゲームに興じる機会も増えており、来年もこんな感じで遊べたらなあと思っている。 カタン<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/71aa535c09c64f5fae41622d9beb97ee/catan.jpg" alt=""> 現場は安全っていったじゃないですか 〜仕事猫&amp;電話猫カードゲーム〜<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/d8bf756571d7448d8a45f9b6f93c10d8/yoshi.jpg" alt=""> <h2 id="ha214098e44">まとめ</h2>転職とか引越しとか大変だったけど、この1年無事に楽しく過ごせたのでヨシ！

2022年振り返りをし、転職とか引越しとか小旅行とか趣味とか色々思い返したりしました

2022年振り返り

2022年5月22日、横須賀サマーフェスタ2022に行ってきた。SNSで横須賀基地のイベントの情報を偶然見かけたので、勢いだけで横須賀に向かうことにした。 <ul><li><a href="https://www.mod.go.jp/msdf/yokosuka/event/samafesu2022.html" target="_blank" rel="noopener noreferrer">海上自衛隊横須賀地方隊 サマーフェスタ2022</a></li></ul> <h2 id="h8b278b7da1">移動</h2>新宿から2時間弱かけて横須賀へGO！運賃をケチるために最短時間ではないルートを選んだ。横須賀へ到着したところ、横須賀基地に入場するのに1.5時間前後かかった。その日は快晴もいいところで、挙げ句日焼け止めを忘れた上に半袖で来るという失態を犯したので、帰宅後に腕などがお察しな状態になった…。<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/653c4a2257ad471f9f31d49813c87b3c/yokosuka0.jpeg" alt="">自衛隊のイベントは長蛇の列に並ぶことを前提に行動しましょう。 <h2 id="h23fe7475f7">入場</h2>整列の途中で次のような立て看板を何回か見かけた。<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/bc70dc67c2a94e469bfdab39d2d02a57/yokosuka3.jpeg?w=1108&amp;h=1478" alt="立て看板「サマーフェスタへの入場 接触確認アプリ「COCOA」のインストールが必要です」">今となっては機能が停止してしまったCOCOAのインストールを求める内容で、並んでる間にインストール→入場時にコロナ観戦者との接触がないことをスマホ提示で確認してもらいという流れだった。スマホを持ってない人向けの案内も見かけた（どのように入場手続きを進めるのか分からないが）。あとはお決まりの手荷物検査を行ったら入場。 <img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/6ce1ba48d14d46839d5d4553b4fbd3b8/yokosuka2.jpeg" alt=""> <img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/5e555cec2e3448a385f8349288ea249a/yokosuka5.jpeg" alt=""> <img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/862df0989116457baa559bf2b973fb63/yokosuka4.jpeg" alt=""> <h2 id="h6db8923773">会場の様子</h2>人はなかなか多かったが、屋台などがある様子ではなかったのでお祭り感は薄かった。もちろん、自衛隊グッズの販売などはあったし、そもそもとしてコロナ禍の影響で人が集まるイベントにあまり参加していなかったというのもあって、やはりイベント感は感じられた。 入場して直後の広場っぽい場所に海上自衛隊の音楽隊が演奏を披露しており、そこに多くの人が集まっていた。<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/59185384a28e4fc5b521b68685dfa882/yokosuka6.jpeg" alt=""> また、艦船が並ぶ港までの通りで組みひも教室やロープワーク教室が行われていたようで、柱みたいなものにロープが結び付けられている様子が見て取れた。手旗教室も行われていたようだったが、こちらは見逃してしまった。 <img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/f78de6961a224be6bf6a3616515f166e/yokosuka7.jpeg" alt=""> <img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/34cb5f3012be4918b5ec632fa2cc8c44/yokosuka8.jpeg" alt=""> <h2 id="hd9c755d91c"><a href="https://ja.wikipedia.org/wiki/%E3%81%8D%E3%82%8A%E3%81%97%E3%81%BE_(%E8%AD%B7%E8%A1%9B%E8%89%A6)" target="_blank" rel="noopener noreferrer">護衛艦きりしま</a></h2>本イベントのメインと言っても過言ではない、護衛艦きりしまの一般公開。甲板に乗ることができる貴重な時間だったりする。ここに乗るためにまたしても列をなしており、甲板に上がるまで20分くらいかかった。 <img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/67b5fc95f4a742dcb857e669a8ff3914/yokosuka9.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/4821df762ae0459e861ce7e758737c6c/yokosuka10.jpeg" alt="">ベビーカー置き場があった<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/cc2db8d0315e46b89de7308f85dc85bc/yokosuka11.jpeg" alt=""> ここからは甲板上で撮影したもの <img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/8c23defb6e3c43f6aa2c791f6ebdd282/yokosuka12.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/4575a3019189453592ccdbf1ffc009f5/yokosuka14.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/b31dfa15c75a4b2c815188b56c6bf162/yokosuka15.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/768146aa2d3c416eb1f74005b98a5fc6/yokosuka13.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/e747977427ee4386a51aeacb33aa9031/yokosuka16.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/eb50e62213d34a258c3f755930c66768/yokosuka17.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/66348d201e3142fbb5d3ba5056026271/yokosuka18.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/6efdece9c6384eef8b288c4892d99e0b/yokosuka19.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/3d015ff8d8794a7b85eebca494b4a274/yokosuka20.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/e497d173354841e59cafa5c50dc24030/yokosuka21.jpeg" alt=""> <h2 id="hc929e0e6b1"><a href="https://ja.wikipedia.org/wiki/%E3%81%9B%E3%81%84%E3%82%8A%E3%82%85%E3%81%86_(%E6%BD%9C%E6%B0%B4%E8%89%A6)" target="_blank" rel="noopener noreferrer">潜水艦せいりゅう</a></h2>潜水艦せいりゅうの甲板？に乗ることができる機会もあったので、せっかくなので乗ってみることに。なお、乗るまでに1時間列に並んで、乗った時間は3分くらいだった…。でも潜水艦せいりゅうの甲板？の手触りみたいなのを感じられたのでこれはこれで。<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/ed54cafd54b14bf1b3d9201dfe7f8ad3/yokosuka22.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/753ebb8a673348c0877e4a3dc5d8c217/yokosuka24.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/46741acad5354827856dceed61344e16/yokosuka23.jpeg" alt=""> <h2 id="hc06af0feb3">展示など</h2><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/1507c1bc666c415397a1d373bbd2ef75/yokosuka25.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/5a6b609c38974481a6b2ba2f2e4203c9/yokosuka26.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/41d05293f3ca4d779b195d7e7f0cde69/yokosuka27.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/fbc5a45389ee4d65a636bbd97c2b26f3/yokosuka28.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/d62296b5a880405c821b22c8b05591c1/yokosuka29.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/b2a8ae0a507d4f4fbae1bd89a8de7e80/yokosuka30.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/b47832ba28b740ad857b5b2fcf16111d/yokosuka31.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/061a4d56c52347cfbd4151783d640bd1/yokosuka32.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/af605bb26a7f4e75b3aa7f5cf402542f/yokosuka33.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/8adfbe6c98e845949683677e911be9fc/yokosuka34.jpeg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/a916e17ecd964d1dba788876587680a7/yokosuka35.jpeg" alt=""> <h2 id="ha214098e44">まとめ</h2>突発的な小旅行だったけれど、護衛艦きりしまにも潜水艦せいりゅうにも乗れたので大変満足できる旅だった。一方で、日焼け対策などを怠ってしまったので、これから夏場に出かける時は気をつけたいと思った。前回の日米友好祭横田基地フレンドシップフェスティバル2022の時の教訓で、現金はそこそこ用意していったので、物販などで困ることはなかった（戦利品の画像は未撮影…）<ul><li>新宿から横須賀駅まで1時間〜2時間くらい</li><li>夏場は日焼け止め忘れないように！</li><li>整列時間は1時間以上を覚悟</li><li>組みひも教室のようなものは時間が指定されているので、参加したい場合は開催時間などから逆算して整列しよう</li><li>記念館（戦艦）三笠を見るのを忘れた</li></ul> <h2 id="h37f22b1226">おまけの鎌倉探訪</h2>横須賀駅に到着する前に鎌倉駅を経由するルートを取ったため、帰りに鎌倉に寄り道してみた。<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/5fd49aa5c6bb4df0bff1246e831540a5/kamakura1.jpg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/713090c03a4a4696b86c4f1e8281953a/kamakura2.jpg" alt=""><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/94f0d183b6684378a188821c9c57400b/kamakura3.jpg" alt="">これをきっかけに定期的に鎌倉散歩をするようになったけれど、それはまた別の機会に…

20220806 横須賀サマーフェスタ2022に行ってきた時の記録

20220806 横須賀基地のお祭りに行ってきた

2022年5月22日、日米友好祭横田基地フレンドシップフェスティバル2022に行ってきた。小さい頃からゴジラなどの怪獣映画を見て育ったせいか、はたまたガルパンのせいか、ミリタリー物が好きだったりする。首都圏に住んでいるとちょっと足を伸ばせばアクセスできる基地が複数あるので、基地に入れるイベントに行ける機会があれば足を運ぶようにしている。本当は当日別件で用事が入っていたので行くのを諦めていたのだけれど、その予定が早く終わったのでこれ幸いと国分寺市や立川市よりも向こうの福生市に赴くことにした。 <ul><li><a href="https://www.mod.go.jp/asdf/yokota/topics.html#No70" target="_blank" rel="noopener noreferrer">横田基地日米友好祭のお知らせ（令和４年５月１０日） - TOPICS - 航空自衛隊横田基地</a></li><li><a href="https://twitter.com/JasdfYokota/status/1524301760873250817" target="_blank" rel="noopener noreferrer">航空自衛隊横田基地さんはTwitterを使っています: 「・横田基地は、令和４年５月２１日（土）２２日（日）の２日間、「日米友好祭」を開催します。・航空自衛隊は、期間中、装備品の展示ブースを設置します。当該ブースは、第５ゲート（入場門）から滑走路方向に向かってしばらく歩くと左側にあります。 https://t.co/oGDbm0k8YU」 / Twitter</a></li><li><a href="https://www.yokota.af.mil/Friendship-Festival/" target="_blank" rel="noopener noreferrer">Friendship Festival - Yokota Air Base Home</a></li></ul><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/31c106c97add46a6b396186ed65ec173/Yokota_Friendship_Festival_Flyer.jpg?w=496&amp;h=704" alt="日米友好祭横田基地フレンドシップフェスティバル2022のポスター"> <h2 id="h8b278b7da1">移動</h2>新宿駅から福生駅まで中央線や青梅線を使って1時間前後かかった。立川駅あたりで乗り換えをしたような気がする。福生駅から基地まで徒歩で15分くらいの距離だったが、駅の時点でも道筋でも混んでいたのでそれよりも時間がかかった。なお、上記のポスターには「拝島駅から第5ゲートまで歩いて20分」とあるが、実際に航空機が配置されているのは第2ゲート寄りだったので、拝島駅からだと歩く距離が増えそう（とは言え、最短距離で福生駅を最寄りと伝えてしまうと駅がパンクしそうなので、あえて拝島駅から誘導しようとしたのかもしれない） <h2 id="h23fe7475f7">入場</h2>Twitterなどで検索をすると「入場時に運転免許証と免許取得時に発行した2組の暗証番号が求められる」という情報が入ってきた。一応メモアプリに2組の暗証番号を控えていたので多分大丈夫だろう全然覚えてないけど多分この暗証番号で合ってるはずきっと大丈夫と自分を言い聞かせながら会場に向かった。しかし、実際の入場ゲートでは手荷物検査が行われていただけだった。基地に着いたのが15時半過ぎだったが、ひょっとしたら開場当初は真面目に免許証の確認をしていたのかもしれない（実際Twitter上でも暗証番号が答えられなくて入場できなかったという声があった）ともあれ、無事に基地に到着・入場できた。<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/2bb36b511fb647768666b940b5e98e97/yokota1.jpg?w=1022&amp;h=766" alt="入場の様子。手荷物検査が行われているゲートに長蛇の列が。"> <h2 id="h6db8923773">会場の様子</h2>入場してみると屋台などが並んでおり、まさにお祭りといった感じだった。地面にシートを敷いて横たわっている人も多く、活気もありつつ自由にみんなやっている様子だった。<img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/2d4551c76e414c9d9a2aa7bb7bf7f02e/yokota47.jpg?w=1022&amp;h=766" alt="基地内の様子。奥に屋台が見える。"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/5019de8651c54f8888bad63843fd1ac0/yokota48.jpg?w=1263&amp;h=946" alt="基地の様子。晴天の下で人がごった返している向こうに戦術輸送機C-130が見える。更に向こうには様々な屋台が並んでいる。"> <h2 id="hcf109f6b94">格納庫</h2><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/03c84b550de842ebbbcad6963306a7ec/yokota7.jpg?w=1022&amp;h=766" alt="シャッターが開かれて中が見えている格納庫。中に航空機の姿はない。"> <h2 id="h2d92fda0b9">航空機画像</h2>以下、45枚ほど画像が続きます。 <h3 id="h7ed32ad2e4"><a href="https://ja.wikipedia.org/wiki/C-130_(%E8%88%AA%E7%A9%BA%E6%A9%9F)" target="_blank" rel="noopener noreferrer">C-130 Hercules</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/a47ae03d7d5d4923a0fd33d8bf607f02/yokota2.jpg?w=1030&amp;h=566" alt="C-130 Hercules 正面 やや右寄り"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/ba14a6c1999e4a95b88241884cc572a7/yokota3.jpg?w=1022&amp;h=766" alt="C-130 Hercules 真正面"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/b51017c556e040aa914a03b4b670bd8c/yokota4.jpg?w=1022&amp;h=766" alt="C-130 Hercules 左側面"> <h3 id="h5a24d21c0a"><a href="https://ja.wikipedia.org/wiki/UH-60J_(%E8%88%AA%E7%A9%BA%E6%A9%9F)" target="_blank" rel="noopener noreferrer">UH-60J Black Hawk</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/f99cdd41941f47b5a369f969a49f9a4f/yokota5.jpg?w=1022&amp;h=766" alt="UH-60J Black Hawk 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/3f4a71736acc4e26948bac55d558a0e3/yokota6.jpg?w=574&amp;h=331" alt="UH-60J Black Hawk の説明パネル"> <h3 id="h4114f6bbdb"><a href="https://ja.wikipedia.org/wiki/CH-47_(%E8%88%AA%E7%A9%BA%E6%A9%9F)" target="_blank" rel="noopener noreferrer">CH-47J Chinook</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/2b4a84770f6248b2af950f3d865cc222/yokota8.jpg?w=1022&amp;h=766" alt="CH-47J Chinook 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/1783cea398c042c181380b3607ebfa04/yokota9.jpg?w=853&amp;h=672" alt="CH-47J Chinook 説明パネル"> <h3 id="hb87eedfae9"><a href="https://ja.wikipedia.org/wiki/SH-60_%E3%82%B7%E3%83%BC%E3%83%9B%E3%83%BC%E3%82%AF" target="_blank" rel="noopener noreferrer">SH-60B Seahawk</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/6cd94ef4b73044b796aa1e9703a2d272/yokota42.jpg?w=1022&amp;h=766" alt="SH-60B Seahawk 正面"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/bd663386d3cc4f209532eea35a06596a/yokota43.jpg?w=574&amp;h=766" alt="SH-60B Seahawk 説明パネル"> <h3 id="h682433ace5"><a href="https://ja.wikipedia.org/wiki/RQ-4" target="_blank" rel="noopener noreferrer">RQ-4 Global Hawk</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/9877c6387c6848bf8524f76821a3973e/yokota33.jpg?w=1022&amp;h=766" alt="RQ-4 Global Hawk 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/0204eea120ed481fb7aedf584e6967f6/yokota34.jpg?w=1022&amp;h=766" alt="RQ-4 Global Hawk 正面左寄り"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/3b3866a28f124f168e1408aa3700c1a2/yokota35.jpg?w=590&amp;h=766" alt="RQ-4 Global Hawk 説明パネル"> <h3 id="h195c5c857c"><a href="https://ja.wikipedia.org/wiki/F-15_(%E6%88%A6%E9%97%98%E6%A9%9F)" target="_blank" rel="noopener noreferrer">F-15C Eagle</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/3e5323c6c381480ba551b4dc6a1a4c11/yokota10.jpg?w=1022&amp;h=766" alt="F-15C Eagle 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/6c9553d609064e27943102e810242b24/yokota12.jpg?w=1022&amp;h=766" alt="F-15C Eagle 正面"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/15a50beb40414213bec3dce55f31bcef/yokota13.jpg?w=1022&amp;h=766" alt="F-15C Eagle 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/b05b32a6457b4a498d05913783b70fa4/yokota11.jpg?w=635&amp;h=657" alt="F-15C Eagle 説明パネル"> <h3 id="hb5b9f6d8fc"><a href="https://ja.wikipedia.org/wiki/F-15J_(%E8%88%AA%E7%A9%BA%E6%A9%9F)" target="_blank" rel="noopener noreferrer">F-15J Eagle</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/13127df329a546b38a41cd5bfda330df/yokota14.jpg?w=1022&amp;h=766" alt="F-15J Eagle 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/5e81efa607ed48679c8f3da9ea565540/yokota15.jpg?w=1022&amp;h=766" alt="F-15J Eagle 正面"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/047d50541b084447884b44bcd9262b32/yokota17.jpg?w=1022&amp;h=766" alt="F-15J Eagle 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/a4ad5ef0c7af4fdda67ed9d176abdc96/yokota16.jpg?w=574&amp;h=766" alt="F-15J Eagle 説明パネル"> <h3 id="h68113bb140"><a href="https://ja.wikipedia.org/wiki/F-2_(%E8%88%AA%E7%A9%BA%E6%A9%9F)" target="_blank" rel="noopener noreferrer">F-2A</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/3695bf3b690342c5962a9b4df2c63ae7/yokota18.jpg?w=939&amp;h=573" alt="F-2A 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/9b04781a558344dd90dc67270215f248/yokota20.jpg?w=574&amp;h=766" alt="F-2A 正面"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/fd34ae28c2ca459ba2f62f559982563d/yokota19.jpg?w=574&amp;h=766" alt="F-2A 説明パネル"> <h3 id="h9379ba02e8"><a href="https://ja.wikipedia.org/wiki/T-4_(%E7%B7%B4%E7%BF%92%E6%A9%9F)" target="_blank" rel="noopener noreferrer">T-4</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/33adce25b27d4627b4f756b0a73efebe/yokota21.jpg?w=1022&amp;h=766" alt="T-4（ブルーインパルス）全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/eccb2a9dec3a4f95a1136b084784d4a8/yokota22.jpg?w=1022&amp;h=766" alt="T-4 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/eb2a56cbc43441698cdfb9a7362c74f3/yokota23.jpg?w=478&amp;h=631" alt="T-4 説明パネル"> <h3 id="ha554782d62"><a href="https://ja.wikipedia.org/wiki/C-130_(%E8%88%AA%E7%A9%BA%E6%A9%9F)" target="_blank" rel="noopener noreferrer">C-130H Hercules</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/bf236088e99c4cb2a372f74ce4e8165c/yokota28.jpg?w=1022&amp;h=766" alt="C-130H Hercules 全景　行き交う人々に囲まれている"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/a9c1b703745c4cda8b7c9676ae805c43/yokota29.jpg?w=1003&amp;h=764" alt="C-130H Herculesのプロペラ"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/32f195ad953e4450b354f4fa9e3efa40/yokota30.jpg?w=335&amp;h=573" alt="C-130H Hercules 説明パネル"> <h3 id="h33297ae221"><a href="https://ja.wikipedia.org/wiki/C-1_(%E8%BC%B8%E9%80%81%E6%A9%9F)" target="_blank" rel="noopener noreferrer">川崎 C-1</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/c1b1434b9adc46648810441375986eb3/yokota31.jpg?w=1022&amp;h=766" alt="川崎 C-1 正面右寄り"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/bac280f8056a43d89ce7b5a6c02e49ef/yokota32.jpg?w=574&amp;h=766" alt="川崎 C-1 説明パネル"> <h3 id="h1747643ed1"><a href="https://ja.wikipedia.org/wiki/U-125_(%E8%88%AA%E7%A9%BA%E6%A9%9F)" target="_blank" rel="noopener noreferrer">U-125A</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/2bfb94e12e794691b0ca50da512cbbda/yokota44.jpg?w=1022&amp;h=766" alt="U-125A 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/a5828b92373247f09fce690ff5c54ca4/yokota45.jpg?w=1022&amp;h=766" alt="U-125A 説明パネル 奥にU-125Aが写り込んでいる"> <h3 id="h5747d05a4b"><a href="https://ja.wikipedia.org/wiki/%E3%82%BB%E3%82%B9%E3%83%8A_%E3%82%B5%E3%82%A4%E3%83%86%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%A9%E3%83%86%E3%82%A3%E3%83%81%E3%83%A5%E3%83%BC%E3%83%89" target="_blank" rel="noopener noreferrer">U-680A</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/6e3a34e0e9614a27b00194fcace7787f/yokota46.jpg?w=1022&amp;h=766" alt="U-125A 奥に機体本体があり、手前に説明パネルがある"> <h3 id="h3fbddfb4ee"><a href="https://ja.wikipedia.org/wiki/F-35_(%E6%88%A6%E9%97%98%E6%A9%9F)" target="_blank" rel="noopener noreferrer">F-35A Lightning II</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/1314e1a121704e3fb719801b14884899/yokota24.jpg?w=1022&amp;h=766" alt="F-35A Lightning II 機体が2機並んでいる"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/6d41e56c72034a15ba87cb84153e874f/yokota25.jpg?w=1022&amp;h=766" alt="F-35A Lightning II 全景"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/e93104d6b78945feb5d8d03378403f1d/yokota26.jpg?w=1022&amp;h=766" alt="F-35A Lightning II 全景（逆光）"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/7496609dba1e4ba08a4bbf251881769d/yokota27_1.jpg?w=574&amp;h=766" alt="F-35A Lightning II 説明パネル"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/953ec4188a9b4d72bb61ff77c8bc0e31/yokota27.jpg?w=966&amp;h=766" alt="F-35A Lightning IIのブースに「アンケートにこたえるとF-35Aを近くで撮れる！中学生〜32歳の方限定」という張り紙がしてあった"> <h3 id="hc8b32a237a"><a href="https://ja.wikipedia.org/wiki/C-5_(%E8%88%AA%E7%A9%BA%E6%A9%9F)" target="_blank" rel="noopener noreferrer">C-5 Galaxy</a></h3><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/4e1ffd3a13474afb864c295dda25ff1a/yokota37.jpg?w=1019&amp;h=555" alt="C-5 Galaxy 全景 機体正面が大きく開いていて、人が大勢並んだり周りを歩いていたりする"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/682dd817b71b45398809068f53cf4147/yokota38.jpg?w=574&amp;h=766" alt="C-5 Galaxy 尾翼"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/0fb07e448e144140af2b9bd038d50021/yokota36.jpg?w=574&amp;h=766" alt="C-5 Galaxy 全景 機体正面のアップ 開いている正面から人が続々機体内に入っていく様子"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/6390d078a7ba4aa2a30837ae4557c4eb/yokota39.jpg?w=574&amp;h=766" alt="C-5 Galaxy 全景 機体正面が大きく開かれている箇所を見上げた様子"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/0b31377470d849bfaac17d4f10f0d25f/yokota40.jpg?w=1022&amp;h=766" alt="C-5 Galaxy 機体内部 人がごった返している"><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/3a7316243af74731ae138978ac2455d9/yokota41.jpg?w=1022&amp;h=766" alt="C-5 Galaxy 機体内に掲げられていた旗 "><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/196719724c88409889d7792fc0698378/yokota49.jpg?w=2060&amp;h=1545" alt="C-5 Galaxy 機体内で販売されていたワッペン（500円）"> <h2 id="ha214098e44">まとめ</h2>沢山の機体を拝むことができて、非常に最高だった！様々な航空機や輸送機を眺めたり中を通ったりという体験は出来たけれど、屋台などで食べ物やグッズをあまり買ったりしなかったのでその点がやや後悔。物販の販売は現金が多いようなので、電子マネーで普段生活している人は注意。あと、2時間ほどしか滞在できなかったので、次回はもう少し滞在時間を伸ばせるように計画を立てたい。以下、今回の小旅行で学んだことや反省点。<ul><li>現金を用意すると物販や屋台で便利</li><li>米軍基地入場には免許証と2種類の暗証番号が必要かも</li><li>新宿駅から福生駅まで1時間くらい（乗り換えが発生するかも）</li><li>福生駅から基地まで徒歩で15分くらいだけど、長蛇の列に並ぶ覚悟が必要（日焼け止めとか要るかも）</li><li>第2ゲートから入場すれば、荷物検査を抜けたら歩いて5分10分で航空機や屋台が拝める</li></ul>

20220522 日米友好祭横田基地フレンドシップフェスティバル2022に行ってきた時の記録

20220522 横田基地のお祭りに行ってきた

<h2 id="h74020fa5f7">前回までのあらすじ</h2><ul><li><a href="https://blog.klim0824.dev/articles/20220330/building-a-blog-with-nextjs-and-microcms" target="_blank" rel="noopener noreferrer">microCMS + Next.js + TypeScript + Chakra UIでブログを構築した | 🐺 射撃しつつ後退</a></li></ul>初めて触る技術で技術ブログを作ってみたけれど、作っただけで満足してしまってそれっきりだった。上記記事のオチとして以下の画像を貼り付けたものの、3postsもしない内に放置するように…。オチ画像以下の現状。 <img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/39c85bd49b1e42d4bc466ba37f6c3ec0/D2HyrDbVAAAYBM1.jpeg?w=512&amp;h=504" alt=""> <h2 id="hf3600b9ade">ブログを再開して何を書くか</h2>このブログを完成させてから今まで転職とか引越しとか帰省とか色々あったのだけれど、最近は落ち着いてきたので少しずつ時間を確保できるようになってきた。そこで、週末などに関東近辺でのイベントとか観光地を周る機会が増えつつある。元々色々なイベントとかを見るために上京してきた節もあったので、気軽に面白そうな場所に行けるのはとても楽しい。コロナ禍というのもあって自由に移動するのも憚られていたけれど、屋外移動がメインの一人旅であればあまり怯える必要も無いと判断するようになった。イベントなどに関しては、過去のイベントの様子を検索で探すことが増えた。当時の様子がある程度分かると、移動やイベント先で何に気をつけたらいいのか・何を見ることが出来て何が出来ないのかをある程度確認できるからだ。また、イベントや旅行先の様子はスマホなどで画像を撮り貯めしているものの、これをブログなどでまとめておくと数年後の誰かに参考として役に立てられるかもしれない。そう考えるようになった。なので、これからは旅行先やイベントの様子をこの自作ブログに書き残していこうと思う。元々技術ブログとしてやっていくつもりだったけれど、それに拘るのは辞めにした。今度こそ3posts以上の記事を残せるようにしていきたい…！

技術ブログ一本で貫き通すのを諦めて、小旅行とかの記事も載せることにしました。

ブログ再開します

タイトルの通り、microCMS + Next.js + TypeScript + Chakra UIでブログを構築した。ここでは本ブログの運営方針や、今ブログ構築の際に考慮した点を挙げていきたい。ベースは以下のmicroCMS公式記事を参考にした。Next.jsにはあまり慣れていない身ではあったが、たいへん分かりやすい内容で本当に助かった。<ul><li><a href="https://blog.microcms.io/microcms-next-jamstack-blog/ ">microCMS + Next.jsでJamstackブログを作ってみよう | microCMSブログ</a></li><li><a href="https://blog.microcms.io/tag/nextjs/page/1 ">microCMSブログ</a><ul><li>Next.jsを使用した開発に関する記事の一覧</li></ul></li></ul>microCMSとNext.jsを用いたブログ環境のセットアップに関しては、上記の公式ブログを始めとしてさまざまな記事がすでにネット上に点在している。本記事では具体的な導入方法やコードの説明、固有名詞の説明は行わず、どのような機能を用意した（これから用意する）のかを列挙していく。具体的な開発手順に関しては後日別記事でまとめたい。 <h2 id="h3c01951a6c">その前に、あんた誰？</h2>2017年にHTMLから入門し始めたマークアップエンジニア。WordPressでコーポレートサイトを構築したり、gulp(Pug, Sass)でLPを制作したりしつつ、PHPやNode.jsを用いてチーム内で使う便利ツールを開発したりしていた。これまでJavaScriptフレームワークなどをがっつり触る機会があまりなかったため、自ドメインで運用するブログをmicroCMSとNext.jsを使って構築してみたという流れ。 <h2 id="h8cac5dfd31">実装してみた感想</h2><h3 id="hc1e3479953">microCMS + Next.js開発体験は最高！</h3>初めてNext.jsを活用したサイト構築を行ってみたが、元々Node.jsで開発をしていた経験が生きたのか、特に大きくつまづく箇所が無かった。そもそもとしてNext.js公式のドキュメントが分かりやすく、こちらに沿って手を動かすだけでベースとなる環境が用意できる。<ul><li>Getting Started | Next.js</li></ul> そしてこのmicroCMS + Next.jsという組み合わせによるブログ開発は快適だった。microCMSの吐き出すAPI仕様は分かりやすいし、何よりmicroCMSのブログが公式にノウハウを提供しているのが大きい。超偉大！<ul><li><a href="https://blog.microcms.io/tag/nextjs/page/1" target="_blank" rel="noopener noreferrer">microCMSブログ</a></li></ul> フレームワークやプロダクトそのものの分かりやすさだけでなく、公式ドキュメントがどれだけ豊富に用意されているかが開発体験に直結すると強く感じさせられた。 <h3 id="ha1d9bafcf1">開発環境を用意できれば確度の高い開発が可能に！</h3>ESLintやPrettier、TypeScriptをはじめとした開発支援に関してもウェブ上に先人の知恵が沢山残されており、見様見真似でも快適な環境を構築することができた（URL等は本記事最後に記載）。一方で、選択肢が豊富であるがゆえにESLintの設定の厳格さは無限に設定できてしまうため、ルールをどれだけ細かく導入するかはずっと判断に困る状態になった。とは言え、Visual Studio CodeとPrettierやESLintの組み合わせによるコードの自動整形は本当に強力なため、どのプロジェクトでも採用するべき。 <h3 id="h15bf6b967c">Chakra UIによるコンポーネント + ユーティリティによるスタイリング</h3>Chakra UIはReact向けのコンポーネントライブラリで、Tailwind CSSのようにユーティリティも兼ね備えているのが特徴。サイト全体をコンポーネントベースで構成し、それらの配置をユーティリティで調整…というようなアプローチが単一のライブラリで達成できるのが採用した理由だった（ボタンやVisually hiddenのようなコンポーネントをTailwindで個別に用意するのは面倒だったので…） また、FigmaのUIキットも有志の手によって提供されている。一応本ブログ構築にあたってFigmaでベースデザインを組んでみたが、デザインとフロントエンドが一気通貫で繋げられるのも良かった（デザイン構築は本業ではないので、色々困惑したままで終わってしまったが…）<ul><li><a href="https://www.figma.com/community/file/971408767069651759 ">Chakra UI Figma Kit — Figma</a></li></ul> 全てをChakra UIで構成できれば理想だったが、microCMSによる記事部分に関してはCSS Modulesを使用することにした。ここの箇所のスタイリングをChakra UIで行うアプローチが分からなかったというのが大きな理由だが、ここはひょっとして対応方法があったりするんだろうか？CSS Modulesを使用した理由は、単にNext.jsがデフォルトで組み込まれているからというだけだったりする。 以上の3点がそれぞれの感想だった。この組み合わせによる開発体験は本当に最高だったので、いずれこの構成で他のプロダクトも開発してみたい。 <h2 id="h27b890d73b">本ブログの基本構成</h2><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/d5fcc76b7b5e4397aee9c599bc3db833/building-a-blog-with-nextjs-and-microcms-architecture.png" alt=""><h3 id="h925b878f12">フレームワーク・アプリケーション</h3><ul><li><a href="https://nextjs.org/ ">Next.js</a></li><li><a href="https://www.npmjs.com/package/microcms-js-sdk ">microCMS JavaScript SDK</a></li><li><a href="https://chakra-ui.com/ ">Chakra UI</a><ul><li><a href="https://github.com/css-modules/css-modules" target="_blank" rel="noopener noreferrer">CSS Modules</a> (microCMSによるコンテンツ部分のスタイルで使用)</li></ul></li><li><a href="https://vercel.com/ ">Vercel</a></li></ul> <h3 id="h2c7b748af2">microCMS API設計</h3><ul><li>記事<ul><li>タイトル（必須）</li><li>内容（必須）</li><li>カテゴリー（必須・1つのみ）</li><li>タグ（任意・複数可）</li><li>概要（任意・OGP用）</li><li>メインビジュアル（任意・OGP兼用 1200px * 630px）</li></ul></li><li>カテゴリー<ul><li>カテゴリー名</li><li>アイコン</li></ul></li><li>タグ<ul><li>タグ名</li><li>アイコン</li></ul></li><li>メタ情報<ul><li>ブログ名</li><li>ブログ説明</li><li>著者名</li><li>著者ID</li><li>著者画像</li></ul></li></ul> <h2 id="h3abb9548fe">ブログ構築の際に考慮したポイント</h2><h3 id="hace65edb0f">ブログの基本機能の実装</h3><ul><li>カテゴリー一覧</li><li>404ページ</li><li>Favicon / Apple Touch Icon</li><li>特定ディレクトリをブログトップにリダイレクト</li><li>記事内のコードにシンタックスハイライトを付ける</li><li>レスポンシブデザイン</li><li>カードUI</li><li>RSSフィード生成</li><li>記事プレビュー機能</li><li><a href="https://tagmanager.google.com/" target="_blank" rel="noopener noreferrer">Google Tag Manager</a></li><li>URL構造<ul><li>記事単体ページには記事IDを反映する</li><li>記事単体ページには公開日をyyyymmddの形式で入れておく</li><li>URLを見ただけでいつ書かれた記事なのか把握しやすい形がユーザーフレンドリーだと考えているため<ul><li>例：https://blog.klim0824.dev/articles/20220824/lorem-ipsum</li></ul></li></ul></li></ul> <h3 id="h118325ba5e">SEOをきちんと考慮する</h3><ul><li>記事名・meta description</li><li>OGP / Twitter Card<ul><li><a href="https://ogp.me/ ">The Open Graph protocol</a></li><li><a href="https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started ">カードの利用開始 | Docs | Twitter Developer</a></li></ul></li><li>URL正規化（Canonical）<ul><li><a href="https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls?hl=ja ">重複した URL を正規 URL に統合する | Google 検索セントラル | Google Developers</a></li></ul></li><li>構造化データ<ul><li><a href="https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=ja ">構造化データの仕組みについて | Google 検索セントラル | Google Developers</a></li></ul></li><li>XMLサイトマップ（sitemap.xml）<ul><li><a href="https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap?hl=ja ">サイトマップの作成と送信 | Google 検索セントラル | Google Developers</a></li></ul></li><li>SNSシェアリンク</li></ul> <h3 id="hb7c90b8980">アクセシビリティを意識する</h3><ul><li>セマンティックなマークアップ<ul><li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML ">HTML: アクセシビリティの基礎 - ウェブ開発を学ぶ | MDN</a></li></ul></li><li>Tabキーでのリンク移動</li></ul> <h3 id="h494d8710dc">セキュリティ対策も忘れない</h3><ul><li>HTTP ヘッダーの設定<ul><li><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Content-Type-Options ">X-Content-Type-Options - HTTP | MDN</a></li><li><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-Frame-Options ">X-Frame-Options - HTTP | MDN</a></li><li><a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/X-XSS-Protection ">X-XSS-Protection - HTTP | MDN</a></li></ul></li></ul> <h2 id="h9bbb0bca62">開発環境</h2><h3 id="he47db1423b">基本環境</h3><pre><code>$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.7 # macOS Catalina

$ node -v # yarnは未使用
v16.14.0

$ npm -v
8.3.1

$ code -v # Visual Studio Code
1.65.2</code></pre> <h3 id="h797bb1e72b">開発用パッケージ</h3><ul><li>TypeScript</li><li>ESLint</li><li>MarkupLint</li><li>Prettier</li><li>Dotenv</li><li>Editorconfig</li></ul> <h3 id="ha674287517">使用ソフトウェア</h3><ul><li>Visual Studio Code</li><li>Insomnia（API Client）</li><li>Chrome Devtoolや拡張機能</li><li>Slackへデプロイ通知</li></ul> <h2 id="hedcc03b7c8">今後実装する予定</h2><ul><li>タグ一覧</li><li>目次機能</li><li>記事検索</li><li>ダークテーマ</li><li>ページネーション</li><li>ハンバーガーメニュー</li><li>公開日が1年以上前だったら注意書きを表示</li><li><a href="https://search.google.com/search-console ">Google Search Console</a></li><li>Storybookの導入</li><li>テスト環境の導入</li></ul> <h2 id="h2d62e9bc20">参考にした記事</h2><h3 id="hd8df71b10d">microCMS + Next.js関連</h3><ul><li><a href="https://blog.microcms.io/microcms-next-jamstack-blog/ ">microCMS + Next.jsでJamstackブログを作ってみよう | microCMSブログ</a></li><li><a href="https://pentaprogram.tokyo/blog/yY0TzENiIx ">microCMS SDK と Next.js で Vercel を使ったプレビューを実装したメモ | 東京都・駒込のWeb制作 ペンタプログラム</a></li><li><a href="https://zenn.dev/elletech/articles/nextjs_microcms">Next.js(TypeScript)、TailwindCSS、microCMSでブログを作成しよう！</a></li><li><a href="https://zenn.dev/d_suke/articles/5bd7b2da4de87c22368e ">microCMSブログをNext.jsで構築しました。</a></li><li><a href="https://zenn.dev/wattanx/articles/d45d5627ffef54 ">microCMSブログのNext.js版を作成した</a></li><li><a href="https://itc-engineering-blog.netlify.app/blogs/efxq_5j84z ">Next.js microCMS GitHub NetlifyでJamstackなブログを公開</a></li></ul><h3 id="h5ba2477d8d">具体的な機能関連</h3><ul><li><a href="https://fwywd.com/tech/chakra-ui-howto ">【React/Next.js】Chakra UI の基本的な使い方【TypeScript 対応】 | fwywd（フュード）powered by キカガク</a></li><li><a href="https://zenn.dev/catnose99/articles/c441954a987c24 ">Next.jsで動的にXMLサイトマップを生成する</a></li><li><a href="https://ru-blog.netlify.app/nextjs-microcms-rss/ ">【Next.js】microCMSからデータを取得してRSS2.0を実装する | Ru-Blog</a></li><li><a href="https://zenn.dev/catnose99/articles/c7754ba6e4adac ">Next.jsで動的にRSSフィードを生成する</a></li><li><a href="https://fwywd.com/tech/next-feed-rss-atom ">Next.js に feed を導入して RSS と Atom のフィードを生成しよう | fwywd（フュード）powered by キカガク</a></li><li><a href="https://fwywd.com/tech/next-sitemap ">Next.js に next-sitemap を導入して超手軽にサイトマップ sitemap.xml を生成しよう | fwywd（フュード）powered by キカガク</a></li><li><a href="https://miningoo.com/2329/" target="_blank" rel="noopener noreferrer">Next.js で GTM を設置する方法メモ｜Miningoo</a></li><li><a href="https://blog.microcms.io/nextjs-preview-mode/ ">Next.jsのPreview Mode＋Vercelでプレビュー機能を実現する | microCMSブログ</a></li><li><a href="https://pentaprogram.tokyo/blog/yY0TzENiIx ">microCMS SDK と Next.js で Vercel を使ったプレビューを実装したメモ | 東京都・駒込のWeb制作 ペンタプログラム</a></li><li><a href="https://zenn.dev/thiragi/scraps/cb502de7f6866d ">Next.jsを10.2へアップデートしたらビルドできなくなったので調査</a></li></ul><h3 id="h8a71d3f33f">開発環境関連</h3><ul><li><a href="https://zenn.dev/ryusou/articles/nodejs-prettier-eslint2021">prettier,eslintを導入する際にハマったこと2021新年</a></li><li><a href="https://fwywd.com/tech/next-eslint-prettier">Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう | fwywd（フュード）powered by キカガク</a></li><li><a href="https://fwywd.com/tech/next-base-url ">【Next.js】特定のディレクトリを基準にし、絶対パスでモジュールをインポートする方法 | fwywd（フュード）powered by キカガク</a></li><li><a href="https://buildersbox.corp-sansan.com/entry/2021/05/28/110000 ">TypeScript / JavaScript の import を自動でソートする - Sansan Builders Blog</a></li></ul> <h2 id="h4375ebaf7f">早くこれになりたい</h2><img src="https://images.microcms-assets.io/assets/19c7ac584e514243829c7cf5e7420b27/39c85bd49b1e42d4bc466ba37f6c3ec0/D2HyrDbVAAAYBM1.jpeg?w=512&amp;h=504" alt="webpack + babel + typescript + react + emotion = a static blog with 3 posts"><ul><li><a href="https://twitter.com/markdalgleish/status/1108433814647300097" target="_blank" rel="noopener noreferrer">https://twitter.com/markdalgleish/status/1108433814647300097</a></li></ul>

microCMS + Next.js + TypeScript + Chakra UIでブログを構築した。ここでは本ブログの運営方針や、今ブログ構築の際に考慮した点を挙げていきたい。

etcetera 記事一覧

.css-kvj8dg{position:static;}.css-kvj8dg::before{content:'';cursor:inherit;display:block;position:absolute;top:0px;left:0px;z-index:1;width:100%;height:100%;}2022年振り返り

ブログ再開します

2022年振り返り