最近連載開始して3巻程度で好きな作品たち

社内の朝会のスピーチで発表したのを公開しておく。

漫画の連載追いかけるの好きです。最近連載が始まって単行本3巻程度のもので、好きな作品を紹介します。

大ダーク・1巻

大ダーク (1) (ゲッサン少年サンデーコミックス)

• ダークファンタジーの設定が良いし絵が最高
• ドロヘドロの作者の新連載
• ドロヘドロも2巻から爆発的に面白くなった漫画だけど、大ダークもそのような雰囲気を感じて楽しみにしてる

夏目アラタの結婚・1巻

夏目アラタの結婚 (1) (ビッグコミックス)

• 殺人鬼と面会室ごしに恋愛していく(????)話。サスペンスっぽい。ハラハラします
• 医龍の作者の新連載

スキップとローファー・2巻

スキップとローファー（２） (アフタヌーンコミックス)

• ほわほわしてて癒やされる。主人公がいい子。
• 疲れているときに見て良かった

アンサングシンデレラ・3巻

アンサングシンデレラ 病院薬剤師 葵みどり 3 (ゼノンコミックス)

• 僕にとってあまり職種として馴染みのない薬剤師のことがわかって面白い

水は海に向かって流れる・2巻

水は海に向かって流れる（２） (週刊少年マガジンコミックス)

• シェアハウスに住んだら、親の元不倫相手の子供がいたという話
• 「子供はわかってあげない」の作者の新連載で、同様にボーイ・ミーツ・ガール的?

おとなになっても・1巻

おとなになっても(1) (KC KISS)

• 志村貴子の百合もの
• 志村貴子のこういうジャンルはいつも面白い気がしている

猫が西向きゃ・1巻

猫が西向きゃ(1) (アフタヌーンKC)

• ”フロー”と呼ばれる奇妙な自然現象(三叉路が七叉路に増殖してるとか)が存在して、それを処理するフロー業者がいるって話
• 蟲師の人の新連載

まとめ

面白い漫画なかなか見つけられないので、おすすめあったら教えてください！

Next.jsでNot FoundページやISEページをカスタマイズする

https://nextjs.org/docs/advanced-features/custom-error-page を見て設定したが、特にstatusCode周りでハマったのでメモ。

• pages/_error.tsxを作ると、SSR(Server Side Rendering)時やCSR(Client Side Rendering)時に例外が起きるなどした時やルーティングが存在しないエラーが発生した時に、そのページを表示してくれる
• このページで400エラー、404エラー、500エラーをハンドリングして、自前のページを作成すれば良い
• pages/_error.tsxはproduction環境時(next build -> next startした時)にしか使われないので注意。デバッグするときはnext buildをする必要がある
• statusCode算出周りはハマりどころなので、自前でやったほうが良い場合がある
  • next/errorのgetInitialPropsではCSR時に例外が起きた時、err.statusCodeに何も入っていないという問題がある
  • 参考
• next/errorによるとstatusCodeには400、404、405、500が入ってくるようなので、エラーページではそれらに対応すれば良い

pages/_error.tsxのサンプル

import React from 'react';
import { NextPage, NextPageContext } from 'next';

// production時(next buildの成果物を使っている時)のエラー表示に使われる
// See Also: https://nextjs.org/docs/advanced-features/custom-error-page

interface Props {
  statusCode: number;
}
const Error: NextPage<Props> = ({ statusCode }) => {
  // ここでエラーページをちゃんと構築する。statusCodeが400の時BadRequest、
  // 404/405の時Not Found、500の問Internal Server Errorが出るように正しく処理すれば良いだろう
  return <div>{statusCode}エラーが発生しました</div>;
};

Error.getInitialProps = async ({ res, err }: NextPageContext) => {
  // statusCodeを算出する。
  // - resが存在する時はSSRであり、res.statusCodeをそのまま利用すれば良い。
  // - resがない場合はCSRである。
  //   - err.statusCodeがあればそれをそのまま利用する
  //   - 意図しない例外が起きてerrがここに渡ってくる場合、単なるErrorオブジェクトが入っていてstatusCodeプロパティがない。errがある時点でISEなので500にする
  // See Also: https://nextjs.org/docs/advanced-features/custom-error-page
  const statusCode = res ? res.statusCode : err ? err.statusCode ?? 500 : 404;

  return { statusCode };
};

export default Error;

Next.js利用時の静的画像配信の方法

静的な画像を使いたくなったら、基本はnext-imagesを使っておけば良い。https://github.com/zeit/next-plugins でも紹介されている。

このライブラリはNext.jsを使う時のwebpackのfile-loaderの推奨設定を書いてくれているだけの薄いライブラリ。file-loaderを使っているので、画像を使いたいところではimportして使うと良い。詳しい使い方はnext-imagesのドキュメントを参照のこと。

実装は非常に薄いので、もし静的画像の配信周りでチューニングしたければ中身を拝借して自分好みに変えると良いだろう。

production環境での配信

next-imagesを使うことで、静的画像も配信できるようになる。しかしproduction環境ではNodeのプロセスから画像を配信せず、S3に静的ファイルを配置し、CloudFrontを経由して配信したくなるだろう。その場合はS3にファイルを配置した上で、フルCDNアーキテクチャやCDNのドメインを分けるアーキテクチャなどのアーキテクチャに応じて配信方法を変えると良い。

S3に静的ファイルをアップロードする

next buildすると.next/以下に成果物が作成される。特に静的ファイルは.next/static/以下に生成されている。この成果物はURLとしては /_next/static/ 以下から配信されている。

• 例1) /_next/static/mxB2bTmDn1q4LbLd4s4qP/pages/index.js
• 例2) /_next/static/images/image1-2ae516abfafa31abf108c359ca581b8c.jpg

そのため、.next/以下のファイルをS3に配置しておくと良い。もしかしたら.next/static/以下だけで良いかもしれないが、生成されている成果物のそれぞれのディレクトリごとの役割が把握しきれていないので、一旦全部アップロードしておく。

フルCDNアーキテクチャパターンでの配信

動的なページも含めて全て一度CDN(CloudFrontなど)を通る設計となっているなら、URLのpathベースでS3にルーティングしたら良い。すなわちCloudFrontなどで

• /_next/配下へのリクエストならS3をオリジンとする
• それ以外ならNext.jsが動くNodeプロセスをオリジンとする

CDNのドメインが、アプリケーションのドメインと別の場合での配信

例えばCDNのドメインが cdn.example.com で、アプリケーションのドメインが example.comの場合、静的ファイルのURLのドメインはCDNのドメインにする必要がある。この場合は、assetPrefixを設定することで対応できる。