Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

VSCodeのworkspaceごとにeslint対象ディレクトリを設定する

解決したかった問題

リポジトリのrootディレクトリをVSCodeワークスペースとして開きたいけど、VSCodeのデフォルト設定ではワークスペースを基点としてimportパスをlintしてしまうので、ずっと以下のようなeslintエラーが出てしまっていました。

Missing file extension for "@/src/components/GlobalFooter "eslintimport/extensions
Unable to resolve path to module '@/src/components/GlobalFooter '.eslintimport/no-unresolved

ちなみにeslintのエラーが出ていますが、import自体はできていてアプリケーションは動いている状態です。

eslint.workingDirectoriesを設定して解決する

VSCodeのsettings.jsoneslint.workingDirectories の項目を設定することで解決できました。

{
  〜略〜
  "eslint.workingDirectories": [{ "pattern": "./frontend" }],
  〜略〜
}

.vscode/settings.json をプロジェクトごとに作成している場合はそっちに書くと良いと思います。

以下のようにglobパターンも使えます。

{
  〜略〜
  "eslint.workingDirectories": [{ "pattern": "./frontend/*/" }],
  〜略〜
}

もう一度Next.jsのlearn courseをやりながら要点をまとめる | Next.js 12.x その0004

ページ遷移にnext/linkコンポーネントを使う

import Link from 'next/link';

Assets, Metadata, and CSS (アセット、メタデータCSS) について

画像の表示にnext/imageコンポーネントを使う

import Image from 'next/image';

headタグをページごとにカスタマイズするときにnext/headコンポーネントを使う

import Head from 'next/head';

scriptタグを挿入したい場合はnext/scriptコンポーネントを使う

import Script from 'next/script';

SCSSについて

Next.jsはデフォルトで.scss拡張子をサポートしている

Layoutコンポーネントの作り方

components/layoutsディレクトリを作成して、その中にchildrenを受け取るコンポーネントを普通に作るだけ

グローバルCSSについて

pages/_app.tsxで以下のようにcssをインポートする。

import '../styles/global.css';

PostCSS 構成のカスタマイズについて

PostCSS 構成をカスタマイズするには、postcss.config.js を使用する。

これは Tailwind CSS などのライブラリを使用している場合に便利です。

create-next-appするときに色々オプションなどがあるので調べる | Next.js 12.x その0003

参考にさせていただいたページ

TypeScript

公式ページに書いてありました。

npxとyarnとでハイフンがあったり無かったりします。

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

ディレクトリ名(プロジェクト名を指定するとき)

yarn create next-app --ts hoge-dir

have_contentの引数に正規表現を渡す | RSpec+Capybaraその0006

サンプルコード

以下のように書けた

expect(tr_element).to have_content /^[0-9]+$/

tr_elementとなっている箇所は何か適当にfindした要素を入れてください。

以下のように括弧で括る方がrubocopの Lint/AmbiguousRegexpLiteral ルールに引っかからないかもしれない。

expect(tr_element).to have_content(/^[0-9]+$/)

Lint/AmbiguousRegexpLiteralに引っかかったときのメッセージ

Lint/AmbiguousRegexpLiteral: Ambiguous regexp literal. Parenthesize the method arguments if it's surely a regexp literal, or add a whitespace to the right of the / if it should be a division.

macのchromeでオレオレ証明書のHTTPSサイトにアクセスできない場合の対処法

参考にさせていただいたページ

今日の環境

問題

最近はChromeだと「〜〜 にアクセスする(安全ではありません)」というリンクがデフォルトでは表示されなくなり、警告を無視してページを閲覧することができなくなりましたので、開発時には不便です。

やりたいこと

httpsプロトコルを使って、開発中のページをMacChromeで閲覧したい。

基本的な手順

1. 開発中のページにSafariでアクセスする

まず開発中のページをSafariで閲覧しようとすると以下のような警告ページが表示されます。

「詳細を表示」ボタンをクリックすると以下のようになります。

「証明書を見る」をクリックすると以下のようになります。

「> 信頼」をクリックしてアコーディオンを開くと以下のようになっているので、「この証明書を使用するとき」という項目のプルダウンから「常に信頼」を選択しておきます。

後でキーチェーンアクセスを見たときにどの証明書が追加されたのかわかるように、「> 詳細な情報」をクリックして証明書の詳細を確認したり、キーチェーンアクセスアプリケーションを起動して既に追加済の証明書を確認しておくと良いと思います。

「OK」ボタンを押して警告ページに戻り、「このWebサイトを閲覧」のリンクをクリックして、開発中のページを閲覧します。

これでキーチェーンアクセスに証明書が追加されるらしい。されるはず。されてほしい。

2. キーチェーンアクセスを開いて、証明書が追加されたか確認する

  • キーチェーンアクセスを開いて、目当ての証明書が追加されているか確認しますが、これがなぜか追加されるときもあるような、されないときもあるような。よくわからなくてしばらくハマっていました。以下に貼った画像には、example.comとか書いてありますが、ご自身の環境に合わせて読み替えてください。

しばらくハマっていましたが、以下のようなことを色々試しているうちに、いつの間にか証明書が追加されていました...。

  • キーチェーンアクセスを一度終了して、開きなおす
  • Macを再起動する
  • 解放されている別ポートにSafariを使って再度アクセスし、警告を無視して進んでみる
  • 開発中のページにFirefoxを使ってアクセスし「証明書を確認」をクリックしたり、pemファイルをダウンロードしてみる

3. Chromeの警告ページに「〜〜 にアクセスする(安全ではありません)」を表示させる

  • 手順2で貼った画像のように、目当ての証明書が追加されればもうこっちのものです。
  • 手順2で貼った画像でいうところの青くなっている「example.com | 証明書 | 2121/10/02 17:21:08 | ログイン」のところをダブルクリックします。
  • 証明書の詳細が表示されるので、「> 信頼」をクリックして、アコーディオンを開き、「この証明書を使用するとき」という項目のプルダウンから「常に信頼」を選択します。
  • 変更には管理者権限が必要なので、パスワードを入力します。
  • 開発中のページをChromeで閲覧しようとすると警告ページが表示されますが、「詳細設定」をクリックすれば「〜〜 にアクセスする(安全ではありません)」が表示されるようになって、以下の画像のようになっています。あとは「〜〜 にアクセスする(安全ではありません)」をクリックするだけです。

なぜかキーチェーンアクセスに証明書が追加されないとき試すとよさそうなこと

Firefoxでアクセスして、pemファイルをダウンロードしてみると良いかもしれないです。

Firefoxでアクセスしたときに、以下のようなページが表示されます。この画像の「証明書を確認」をクリックします。

証明書の詳細な内容が表示され、以下のように「PEM(証明書)」「PEM(チェーン)」というリンクがあるのでクリックすると、pemファイルがダウンロードできます。

その後「Macでキーチェーンアクセスを使用してキーチェーンに証明書を追加する - Apple サポート (日本)」にあるように、ドラッグすると追加できるかもしれません。

試したわけではないので上手くいくかはわかりませんが、今日の私と同じくお困りのどなたかのお役に立てば幸いです。

Next.jsのlearn courseをやってみる | Next.js 12.x その0002

参考にさせていただいたページ

Create a Next.js App (Next.jsアプリを作成する)

以下のコマンドでcreateしました。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Navigate Between Pages (ページ間を移動する)

前のレッスンのコードを継続して使用します。

以下のようにnextの組み込みコンポーネントが使えます。

import Link from "next/link";

Assets, Metadata, and CSS (アセット, メタデータ, CSS)

概要

このレッスンでは、次のことを学びます。

  • Next.jsに静的ファイル(画像など)を追加する方法。
  • 各ページの <head> 内部にあるものをカスタマイズする方法。
  • CSSモジュールを使用してスタイル設定された再利用可能なReactコンポーネントを作成する方法。
  • pages/_app.js にグローバルCSSを追加する方法。
  • Next.jsでスタイリングするためのいくつかの便利なヒント。

前のレッスンのコードを継続して使用します。

next/image

以下のようにnextの組み込みコンポーネントが使えます。

import Image from "next/image";

next/head

以下のようにnextの組み込みコンポーネントが使えます。

import Head from "next/head";

next/script

以下のようにnextの組み込みコンポーネントが使えます。

import Script from "next/script";

Layout Component

普通にchildrenをpropsとして受け取って入れるコンポーネントです。

Global Styles

Global Stylesは以下のページに倣って設定します。

Polishing Layout

以下のページに倣ってLayoutを編集して、pages/index.jsを編集します。

Styling Tips

以下のページを読むだけです。コードの編集などはしません。

以下のようなことについて触れられています。

  • classnamesというライブラリを使用して、簡潔な記述でクラスを切り替える
  • PostCSS構成のカスタマイズ
    • tailwindcss の導入
    • autoprefixer の導入
  • Sassを使用する

Pre-rendering and Data Fetching (事前レンダリングとデータフェッチ)

概要

このレッスンでは、以下について学習します。

  • Next.jsの事前レンダリング機能。
  • 事前レンダリングの2つの形式:静的生成(SSG)とサーバー側レンダリング(SSR)。
  • データありとデータなしの静的生成。
  • getStaticPropsを使って外部のブログデータをインデックスページにインポートする方法。
  • getStaticPropsに関するいくつかの有用な情報。

getStaticProps()について

  • いわゆるSSGです。
  • getStaticProps()をpages/*.jsに定義します。
  • getStaticProps()はビルド時にデータを取得します。ブラウザからのリクエストでデータを取得する必要の無いページを事前にレンダリングする場合にgetStaticProps()を使用します。

getServerSideProps()について

  • いわゆるSSRです。
  • getServerSideProps()をpages/*.jsに定義します。
  • getServerSideProps()はリクエスト時にデータをフェッチする必要があるページを事前にレンダリングする必要がある場合にのみ使用します。

Dynamic Routes (動的ルート)

概要

このレッスンでは、次のことを学びます。

  • getStaticPathsを使用して、動的ルートでページを静的に生成する方法。
  • getStaticPropsを使用して、各ブログ投稿のデータを取得するための記述方法。
  • remarkを使用してマークダウンをレンダリングする方法。
  • 日付文字列をきれいに表示する方法。
  • 動的ルートを使用して、ページにリンクする方法。
  • 動的ルートに関するいくつかの有用な情報。

API Routes (APIルート)

概要

このレッスンでは、次のことを学びます。

  • APIルートを作成する方法。
  • APIルートに関するいくつかの有用な情報。

Deploying Your Next.js App (Next.jsアプリのデプロイ)

概要

このレッスンでは、次のことを学びます。

  • Next.jsアプリをVercelにデプロイする方法。
  • DPSワークフロー:開発、Pレビュー、およびヒップ。
  • Next.jsアプリを独自のホスティングプロバイダーにデプロイする方法。

Next.jsをTypeScriptで始めてみる | Next.js 12.x その0001

参考にさせていただいたページ

create next-appする

作業ディレクトリを作成します。

mkdir next-js-sample

公式の「Getting Started」の「Automatic Setup」の通りに以下のコマンドを実行してみます。

yarn create next-app --typescript

プロジェクト名を聞かれるので、デフォルトのままmy-appでエンターしてみます。

以下のようなディレクトリ構造でNext.jsのアプリケーションが生成されました。

next-js-sample/my-app/*

devで起動する

移動します。

cd my-app/

yarn devします。

yarn dev

ブラウザで http://localhost:3000/ にアクセスするとNext.jsのスタートページが表示されました。

バージョンなど

生成されたpackage.jsonを見ると以下のバージョンでした。

  • "next": "12.1.6",
  • "react": "18.2.0",
  • "react-dom": "18.2.0"

learn course について

公式ドキュメントの冒頭に以下のようにあるので、とりあえず learn course というのをやってみようと思います。

英語

Welcome to the Next.js documentation!

If you're new to Next.js, we recommend starting with the learn course.

The interactive course with quizzes will guide you through everything you need to know to use Next.js.

If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions.

日本語

Next.jsドキュメントへようこそ!

Next.jsを初めて使用する場合は、学習コースから始めることをお勧めします。

クイズ付きのインタラクティブコースでは、Next.jsを使用するために知っておく必要のあるすべてのことをガイドします。

Next.jsに関連する質問がある場合は、GitHubディスカッションでいつでもコミュニティに質問してください。