むーすけのブログ

GitHub X(Twitter) Qiita Zenn
「2023年1月 第2週の振り返り」のサムネイル画像

2023年1月 第2週の振り返り

2023/01/13

2023/02/23

週報

今週はどんな週だったか

  • Next.js v13のキャッチアップを改めてできた
  • ブログのスタイルを調整できた
  • マストであるQiitaの投稿ができなかった

今週やることの振り返り

できたこと、できなかったことを箇条書きで書いていき、来週どうやってこなしていくかをあとに書く。

できたこと

  • Next.js v13のキャッチアップ
  • 個人ブログの行間をnoteとかqiitaを参考に丁度いい感じにする

できなかったこと

  • Qiitaの記事投稿（Next.jsのGithub Templateを作成した話）
  • Astroのキャッチアップ

Next.js v13のキャッチアップについて

v13が出た時にある程度キャッチアップはしていたが、実際のプロダクトに対応させるのは初めてだったので色々と学びになった。
今回は目玉機能のappDirはまだGAになっていないこともあり導入は見送った。
その他の点で導入する上で学びになったことを書いていく。

Middleware内でcookieを取り出す方法が変わった

細かく言うとv13.0.1での変更だが、それまでのNextRequestのCookiesの型がNextCookiesだったのがRequestCookiesに変更された。
その影響でCookieを取得したい場合は以下のようになった。

export async function middleware(req: NextRequest) {
	// before
  const cookie = req.cookies.get(ENV.COOKIE_NAME)
  const digest = req.cookies.get(ENV.DIGEST_NAME)

	// after
  const cookie = req.cookies.get(ENV.COOKIE_NAME)?.value
  const digest = req.cookies.get(ENV.DIGEST_NAME)?.value
}

参照: https://github.com/vercel/next.js/pull/41526

next/linkの使い方が変わった

• The next/link child can no longer be <a>. Add the legacyBehavior prop to use the legacy behavior or remove the <a> to upgrade. A codemod is available to automatically upgrade your code.
https://nextjs.org/blog/next-13#breaking-changes から引用


これまでnext/linkの子要素にaタグが必要だったのに対してv13からはaタグが不要になった。
自分達のプロジェクトではUIフレームワークにChakra-UIを採用していたのでリンク周りの対応を行った
と言っても、対応はかなり簡単で以下のように変更した

import NextLink from 'next/link'
import { Link as ChakraLink } from '@chakra-ui/react'

<NextLink href='/' passHref>
	<ChakraLink>
		トップへのリンク
	</ChakraLink>
</NextLink>
import NextLink from 'next/link'
import { Link as ChakraLink } from '@chakra-ui/react'

<ChakraLink as={NextLink} href='/' >
	トップへのリンク
</ChakraLink>

個人ブログの行間調整について

小さな改善だけど自分の記事をスマホで読み返していた際に妙な読みづらさがあった。
記事を読む頻度が高いQiitaやZennと比較したところ行間が原因のように感じたので参考にしながら修正した。
個人的にだが、文章を見たときの「うっ、読みづらい…」という感じは無くなった。

こんな感じに自分がいち読者として思ったことはなるべく改善に繋げていきたい。

Before After
変更前の個人ブログのUI 変更後の個人ブログのUI

そのほかに今週やったブログに関する変更は以下がある。

実装系

  • トップ、記事ページに投稿日時を表示
  • 下書き記事のプレビューモードを実装

修正系

  • 文字のデフォルトカラーを#000000から#333333に変更
  • リスト表示のインデントが機能していなかったので修正（そもそもlist-style: noneだった）
  • サムネ画像の表示サイズを修正


次はタグ機能の実装をやってみようと思う。

ちなみにこれは改善するというモチベーションではなく、単に実装してみたいというエンジニア知的好奇心からである。

Qiitaの記事投稿について

まず先に良かった点を挙げて自分を褒めておくと、きちんと下書きに書いてはいた。
が、書き切るまで続かなかったり、その時楽しかったブログの機能改善に目がいってしまっていた。

その時楽しいことをするのではなく決められたタイミングで強制的に自分を動かせるようコントロールする力を身につけるべきだと思った。

今週のブログ改善を見てればわかるけど、楽しいことをやるのは簡単だもの。

まぁ人間誰しも楽しい方楽な方に流れていきやすいのである程度は仕方ないが、先週の自分がやると決めたことはきちんとやっていきたい。

Astroのキャッチアップについて

ゼンゼンデキナカッタ。
来週やることの設定量の問題だった。
来週やることを記載すること自体が初めての試みだったので、これは量の改善をする。

やりたいことリストみたいなのを作って優先度つけてくと良さそう。

来週やること

上記のできたこと、できなかったこと、反省点を踏まえて来週は以下のことをやっていく

  • Qiitaの記事投稿（Next.jsのGithub Templateを作成した話）
  • やりたいことリストの作成

余裕があれば、

  • 個人ブログのタグ機能の実装の見通しを立たせる

最後に

初めてのしっかりとした振り返りをした。

来週やることを決めたことで業務外の時間の使い方が明確になったのでとても良かった。

来週も引き続きやっていく。
今週もお疲れ自分！

© 2022, mu-suke