【Everyday Next.js】1. インストール～デプロイ

nextjs

インストール

nextjs.org

インストールは簡単

npx create-next-app@latest

App Router は recommended。

Tailwind CSS がデフォルトでインストールされるのは非常に嬉しい。

とりあえず立ち上げてみる。

npm run dev

create-next-app のサンプルにはこの単ページしか入ってないらしい。 Docs とかをクリックしても外部サイトに飛ぶ。

Dynamic Routes とか SRC とかの例を置いといてほしかった…

App Router のディレクトリ構成？

nextjs.org

Dynamic Routes とかも含めたディレクトリ構成はこんな感じ？ ドキュメント読みながら追い追い確認していく。

project
├ src
│ └ app
│ 　 ├ layout.tsx
│ 　 ├ page.tsx
│ 　 ├ loading.tsx
│ 　 ├ not-found.tsx
│ 　 ├ error.tsx
│ 　 ├ global-error.tsx
│ 　 ├ route.ts
│ 　 ├ template.tsx
│ 　 ├ default.tsx
│ 　 └ folder1
│ 　 　 ├ layout.tsx
│ 　 　 ├ page.tsx
│ 　 　 └ [dynamic-routes]
│ 　 　 　 ├ layout.tsx
│ 　 　 　 └ page.tsx
├ public
├ next.config.js
├ package.json
├ middleware.ts
├ .env
├ next-env.d.ts
└ tsconfig.json

デプロイ

とりあえずサンプルのままデプロイしてみる。

デプロイ先はVercel。

vercel.com

GitHub に push したあと、Vercel でボタン２つくらいポチポチすればデプロイ完了。

おわりに

今日は Next.js プロジェクト新規作成からデプロイまで終了。

次回は、一旦公式ドキュメントから離れて VSCode で快適に開発するためのあれこれに取り組む。

【TODO】書きたいことメモ

今後書きたいことをメモ

【Everyday Next.js】0. シリーズ概要

nextjs

概要

「Everyday Next.js」は、Next.js への理解を深めるために始めた、(なるべく)毎日投稿の自分用備忘録的記事シリーズである。

執筆の時間も含めて毎日「１時間」という制約を設けて、ドキュメントを読みながら実際に手を動かしながら執筆していく予定。

筆者は、１年半くらい前に初めて React や TypeScript に触れ、フロントエンド開発に強く惹かれ、それから趣味で React アプリを作ったり、アルバイト(インターン)で数か月間 React を使ったプロジェクトに携わったりしてきた。Next.js も少し触っていた。

しかし、ちょっと時間を割けなくなっていた隙に App Router が現れ、Next.js の仕様が大きく変わり、それ以降あまりキャッチアップできずにいた。

その上、以前までは「React アプリ初めて作ってみるならこれ！」って感じで React 公式ドキュメントでも紹介されていた CRA(create-react-app) も、現在は公式ドキュメントから綺麗さっぱり消えており、「Start a New React Project」の一番上の選択肢に Next.js が来ている。

react.dev

これはつまり、「React 勉強してみるか～」って人が公式ドキュメント通りに進めようとして最初に触れる可能性が一番高いのが Next.js ということである。

（個人的には、React の初めての学習用に Next.js はハードルが高すぎるので、vite から始めた方がよいと思うのだが、React 公式ドキュメントの選択肢ではなぜか「おすすめしないけどどうしても使いたいなら…」って感じで vite が紹介されている）

なにはともあれ、React の新規プロジェクトなら Next.js というのがデファクトスタンダードになりつつある中、なんとか Next.js をキャッチアップしていきたい。

そんな思いで始めたシリーズである。

このシリーズは基本的に以下の知識を前提とする。

  • React
  • Pages Router 時代の Next.js
  • TypeScript
  • その他 web 開発一般知識

コンスタントに触れる機会を作るため「執筆の時間も含めて１日１時間まで」という制約を課しているので、記事の内容を精査できておらず間違いも含んでいるかもしれない。

自分用の備忘録であるためわかりにくいところも多いとは思うが、もし同じような境遇の方の手助けになったりモチベーションになれば幸いである。

poetryでtensorflowをインストールできない・インストールしたのに使えない

python

概要

poetryでtensorflowをインストールしようとしたら手間取ったのでメモ。

環境

  • OS: windows11
  • python version: 3.10.5

結論

tensorflow-io-gcs-filesystemをバージョン0.31でインストールした後、tensorflowをバージョン2.10でインストール

poetry add tensorflow-io-gcs-filesystem~=0.31.0
poetry add tensorflow~=2.10.0

経緯

poetry add tensorflow できない

poetry add tensorflowでインストールしようとすると、以下のエラーに遭遇。

RuntimeError

  Unable to find installation candidates for tensorflow-io-gcs-filesystem (0.32.0)

このエラーについて、githubにissueが立ってた。

github.com

「先にtensorflow-io-gcs-filesystemを0.31.0でインストールしてからtensorflowをインストールすると上手くいくよ」とのことなので、その通りにすると無事インストールはできた。

poetry add tensorflow-io-gcs-filesystem==0.31.0
poetry add tensorflow

インストールしたのに No module named 'tensorflow'

インストールできました。めでたしめでたし…。

と思いきや以下のエラーが。

import tensorflow as tf
ModuleNotFoundError: No module named 'tensorflow'

インストールしたはずなのに「モジュールないよ！」エラーが出ています。

pyproject.tomlにtensorflowが追加されているから正常にインストールはできたはず。

本プロジェクトの仮想環境を参照できていることも確認した。

あれ…？

と思って.venv/Lib/site-packageを覗いてみると、tensorflowディレクトリが見当たらない。 tensorflowの周辺ライブラリはインストールされているのに。

ググってみたところこちらもissueが立ってまして、どうもメタデータ関連で問題が起きているようです。

github.com

stackoverflow.com

tensorflowの現在の最新バージョンは2.12ですが、2.10であればpoetryで問題なく動くみたいなので改めてバージョン指定してインストール。

poetry add tensorflow-io-gcs-filesystem~=0.31.0
poetry add tensorflow~=2.10.0

これで無事動くようになりました。バージョンは最新のものよりちょっと古いですが…。

プラットフォームに基づく異なるホイール間のメタデータの不一致に起因する…などと書いてあるので、windows以外のosであればpoetryでも正常に最新バージョンがインストールできるのかもしれないです。

余談

ちゃんとパッケージ管理したいのでpyenv+poetry構成にしてますが、pyenv+poetryの環境構築も面倒だしos依存もあるとなると、もうdocker使った方がマシなのかな…。

ただ、pyinstallerで実行ファイル化したいときも多々あり、そうなったときdockerのlinux上でやってるとwindows用にexe化できないのが難点かな？

あと、fastapiでサーバー建てるときport通したりしなきゃいけないのもちょっと面倒かな…。

はてなブログ公式ドキュメントを読み進める

概要

はてなブログを新しく使い始めることにしたので、 はてなブログ公式の使い方講座「はてなブログ アカデミー」とはてなブログヘルプを読み進める。 その中で、気になったところ・メモっておきたいところを本記事に記す。

hatenablog.com

help.hatenablog.com

内容

はてなブログアカデミー

  • ドメイン選択

    • ドメイン（hatenablog.com 部分）は、どれを選んでも差はありません。こだわりがなければ変更しなくても大丈夫です。

  • 今週のお題

    • さあ、何を書こうか……と悩む時間も楽しいものですが、迷ったら「今週のお題」に沿って書いてみるのはいかがでしょうか。「今週のお題」で記事を書くと、以下のようなメリットがあります。はてなブログ公式マガジン週刊はてなブログなどで紹介される可能性があります。豪華プレゼントもある特別お題キャンペーンにエントリーできます。キャンペーンの開催は、週刊はてなブログや記事編集画面でお知らせするので、定期的にチェックしてみてください。

    • 気分転換に毎週取り組んでみても良いかもしれない
  • カスタムURL
    • 編集オプションから、name.hatenablog.com/entry以下のurlを任意の文字列に設定できる

    • カスタムURLを記事の内容に沿った文字列に変更すると、読み手や検索エンジンが記事の内容を読み取りやすくなります。

    • 未設定だと投稿日時になる
  • 基本設定
    • ブログ名やアイコンなどを設定できる
  • デザイン編集画面
    • 公式やユーザーが提供しているデザインテーマを設定できる
    • オリジナルテーマを作ることもできる help.hatenablog.com
    • あるいは「デザインCSS」で追加のCSSを記述することもできる
    • ある程度慣れたら弄ってみたい
  • 検索エンジン最適化（SEO）を行う
  • 収益

はてなブログヘルプ

  • ブログのトップページに常に表示させたい記事を固定する
    • 通常は投稿日時順に記事が表示されるが、ある記事トップを固定することもできる help.hatenablog.com
  • 見出し・目次
    • [:contents]で目次を挿入することができる
    • 記事内の見出しとしてh3~h5を想定しているらしい

      はてなブログでは、記事内の見出しとしてh3からh5を想定しているので、上記のうち###から#####を使用して記事を書くとよいでしょう。 help.hatenablog.com

  • API「はてなブログAtomPub」
  • タグとカテゴリー
    • はてなブログ タグ
      • 記事にタグを設定することで記事をその言葉の「タグページ」に紐づきます
      • タグをつけることで、その言葉に関心を持つ人に見てもらいやすくなります
        • なお、記事内のタグボタンを押すとタグページに遷移するため、ブログの中で記事を整理したりするためには不向きです
    • カテゴリー
      • 記事にカテゴリーを設定することでブログの中で記事を整理することができます
      • カテゴリーは「パンくずリスト」として記事ページに表示することができます
        • なお、各カテゴリーページはブログの中に作成されます
      • カテゴリーをつけることで、記事の整理やブログ内の回遊性を高めることができます help.hatenablog.com
  • はてなブログ個人営利利用ガイドライン help.hatenablog.com
  • ブログのデザインを変更する（カスタマイズ） help.hatenablog.com

【TODO】ファイル形式の変換一覧

注：未完記事

概要

png->jpgやらsvg->pngやら変換したいとき、どうやって変換したら良いかまとめる。

指針

ただし、できるだけ以下の順に変換方法がないか調査する。

  1. windows標準機能・標準ソフトで変換
  2. webアプリ自分で作ってブラウザ上で変換
  3. pythonで変換
  4. 無料の信頼できるソフトで変換
  5. 有料の信頼できるソフトで変換

よくフリーのオンライン変換サイトが出てくるが、あれはセキュリティ・情報漏洩の観点から良くない（ことが多い）ので使わない。 信頼できないフリーのソフトももちろん使わない。

ドラッグ＆ドロップで複数ファイルを同時に変換できると嬉しいので、windows標準機能で変換できたとしても、 python等でもっと使いやすくできそうならば実装したい。

ファイル形式

画像系

ラスター: png, jpg, gif, bmp, webp, tiff

ベクター: svg, eps, pdf

音声系

mp3, wav, m4a

動画系

mp4, avi, mkv, webm

chatgptによるファイル形式解説

Q: 画像の拡張子

画像ファイルには様々な形式とそれに対応する拡張子があります。以下に一部をリストアップします：

  1. JPEG: .jpg または .jpeg - 高品質な画像に使用されます。色の深さとディテールを維持するために使用される一方、ファイルサイズが大きいことが特徴です。

  2. PNG: .png - ポータブルネットワークグラフィックス(PNG)形式は透明度（アルファチャネル）をサポートし、色の深さと詳細を維持します。

  3. GIF: .gif - グラフィックス交換形式(GIF)は、色数が少ない画像やアニメーションに最適です。

  4. BMP: .bmp - ビットマップ形式は非常に基本的なピクセル画像形式であり、ファイルサイズが大きいです。

  5. SVG: .svg - スケーラブルベクターグラフィックス(SVG)形式は、拡大や縮小してもクオリティが落ちないベクター画像に使用されます。

  6. WebP: .webp - Googleが開発したWebPは、画質を保ちつつファイルサイズを抑えることが可能な新しい形式です。

  7. TIFF: .tiff - 高解像度の印刷向けによく使われます。ファイルサイズが非常に大きいです。

以上の形式は、ウェブ上で一般的に使用されているものの一部です。それぞれの形式は、その特性に応じて異なる用途に使用されます。

Q: ラスター画像とベクター画像の拡張子

ラスター画像とベクター画像は、それぞれ異なる特性と利点を持ちます。それぞれの画像形式には固有のファイル拡張子があります。

ラスター画像はピクセルベースの画像で、画像の詳細度はピクセルの密度（解像度）によって決まります。ラスター画像を大きくすると、画像がぼやけたりピクセル化したりします。ラスター画像形式の一部を以下に示します：

  1. JPEG (.jpg, .jpeg)
  2. GIF (.gif)
  3. PNG (.png)
  4. BMP (.bmp)
  5. TIFF (.tiff)
  6. WebP (.webp)

一方、ベクター画像は数学的な形状とパスに基づいています。そのため、ベクター画像は拡大・縮小しても画質が落ちません。ベクター画像形式の一部を以下に示します：

  1. SVG (.svg)
  2. EPS (.eps)
  3. PDF (.pdf)
  4. AI (.ai) - Adobe Illustratorの形式

それぞれの画像形式は、その特性と要件に応じて適切に選ぶべきです。

Q: 音声ファイルの拡張子

音声ファイルにはいくつかの形式とそれに対応する拡張子があります。以下に一部をリストアップします：

  1. MP3: .mp3 - これはおそらく最もよく知られている音声ファイル形式で、圧縮された音声データを保存します。ファイルサイズが小さいため、インターネットでの共有に広く使われています。

  2. WAV: .wav - WAVフォーマットは、主にMicrosoftとIBMによって開発されました。無圧縮の音声データを保存します。

  3. AAC: .aac - Advanced Audio Coding (AAC)は、MP3よりも高い音質を持つとされる音声ファイル形式で、AppleのiTunesとiPodで広く採用されています。

  4. OGG: .ogg - OGGファイルは、オープンソースの音声ファイル形式で、高品質な音声を提供します。

  5. FLAC: .flac - Free Lossless Audio Codec (FLAC)は、無損失の音声圧縮を提供するオープンソースの音声ファイル形式です。

  6. WMA: .wma - Windows Media Audio (WMA)は、Microsoftが開発した音声ファイル形式で、Windowsベースのシステムで広く使用されています。

  7. M4A: .m4a - これはAAC音声を含むことが多いファイル形式で、主にAppleデバイスで使用されます。

以上の形式は、一般的に使用されているものの一部です。それぞれの形式は、その特性に応じて異なる用途に使用されます。

Q: 動画ファイルの拡張子

動画ファイルには様々な形式とそれに対応する拡張子があります。以下に一部をリストアップします：

  1. MP4: .mp4 - MP4形式は動画や音声、字幕などを含むマルチメディアコンテンツを格納するための標準的な形式です。広範に互換性があるため、インターネット上で広く利用されています。

  2. AVI: .avi - AVI（Audio Video Interleave）形式は、Microsoftによって開発された動画ファイル形式です。音声と動画データを同時に再生できるという特性を持っています。

  3. MOV: .mov - MOV形式は、AppleのQuickTimeムービーファイル形式で、動画や音声、テキスト、効果などを保存することができます。

  4. WMV: .wmv - WMV（Windows Media Video）形式は、Microsoftが開発した動画ファイル形式で、Windowsベースのシステムで広く使用されています。

  5. FLV: .flv - FLV（Flash Video）形式は、Adobe Flash Playerで再生するための動画ファイル形式でしたが、Flashのサポート終了により現在ではあまり使用されていません。

  6. MKV: .mkv - MKV（Matroska Video）形式はオープンソースの動画ファイル形式で、動画、音声、字幕など、複数のデータストリームを一つのファイルにまとめることができます。

  7. WEBM: .webm - WebM形式は、ウェブ上での動画再生を目的に開発されたオープンソースの動画ファイル形式です。軽量で高品質なため、ウェブ上の動画共有に広く使用されています。

これらの形式は、一般的に使用されているものの一部です。それぞれの形式は、その特性に応じて異なる用途に使用されます。

変換方法

未完

Warning解決策「Warning: Prop `className` did not match. Server: "__className_0ec1f4 vsc-initialized" Client: "__className_0ec1f4"」

結論

chrome拡張機能「Video Speed Controller」の影響。

拡張機能を削除したらWarningは出なくなった。

Warning内容

Next.js 13 (13.4.4) を使ってみたいと思い、 npx create-next-appで作成後、特にコードを弄らずそのままnpm run devしたところ、以下のエラーに遭遇した。

Warning: Prop `className` did not match. Server: "__className_0ec1f4 vsc-initialized" Client: "__className_0ec1f4"
    at body
    at html
    at RootLayout (webpack-internal:///(app-client)/./src/app/layout.tsx:18:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:51:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:59:11)
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11)
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:80:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:106:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:387:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)

何が起きてるのか

「Prop className did not match.」とかで検索を掛けると、 next.jsでstyled-componentを使おうとすると出たりするWarningらしい。

github.com

zenn.dev

ただし今回はstyled-componentを使っていない。

まずもってcreate-next-app後コードを何も弄っていないため、 コードの問題ではなくそれ以外の問題である可能性が高い。

エラー内容を読んでみると、 「classNameがマッチしてないよ。serverは"className_0ec1f4 vsc-initialized"で、Clientは"className_0ec1f4"になってるよ。」 つまり、「vsc-initialized」が何か悪さしていそう。

ググってみると、chrome拡張機能「Video Speed Controller」によって追加されているらしい。

stackoverflow.com

確かに拡張機能入れてた。動画のスピードを任意に変更できる拡張機能で時々使っている。

拡張機能を削除したらWarningは出なくなった。

削除せずにWarningを消す方法は見つけられてない。 （というか試してみたところdev環境でのみしかこのWarningは出なかったのでスルーしても良いかもしれない。）

余談

さっきのstackoverflowにて。

Nice detective work! I thought vsc means Visual Studio Code.

確かに笑