<p>date-fnsを使用する際のメモです。<br>関連記事：<a href="https://tukkytech.com/blog/dayjs/" target="_blank" rel="noopener noreferrer">Day.jsを使用する</a><br></p><h3 id="heeb2a1e476">npm install</h3><pre><code>npm install date-fns</code></pre><p><br></p><h3 id="h01865f3755">日付のフォーマット例</h3><pre><code>// ES5以前
// const { format, startOfMonth } = require("date-fns");
// ES2015(ES6)以降
import { format, startOfMonth, add } from "date-fns";

const month = format(new Date(), "yyyyMM");
const monthStart = format(startOfMonth(new Date()), "yyyy-MM-dd");
const today = format(new Date(), "yyyy-MM-dd");
const now = format(new Date(), "yyyyMMddHHmmss");

// 本日の日付が2024/06/02の場合
console.log(month); // 202406
console.log(monthStart); // 2024-06-01
console.log(today); // 2024-06-02
console.log(now); // 20240602101000</code></pre><p><br></p><h3 id="h49001ddcb0">主な使用例</h3><pre><code>import {
  format,
  fromUnixTime,
  add,
  sub,
  isBefore,
  isEqual,
  isAfter,
  getYear,
  getMonth,
  getDate,
  getDay,
  getHours,
  getMinutes,
  getSeconds,
  getMilliseconds,
  startOfDay,
  endOfDay,
} from "date-fns";

// 現在の日時を取得
const now = new Date();

// タイムスタンプから日時を取得
const timestamp = 1622505600;
const dateFromTimestamp = fromUnixTime(timestamp);
console.log("dateFromTimestamp:", dateFromTimestamp); // 2021-06-01T00:00:00.000Z

// 日時をフォーマット
const formatString = "yyyy-MM-dd";
const formattedDate = format(now, formatString);
console.log("formattedDate:", formattedDate); // 2021-06-01

// 年を取得
const year = getYear(now);
console.log("year:", year); // 2021

// 月を取得
const month = getMonth(now);
console.log("month:", month); // 5

// 日を取得
const dayOfMonth = getDate(now);
console.log("dayOfMonth:", dayOfMonth); // 1

// 曜日を取得
const dayOfWeek = getDay(now);
console.log("dayOfWeek:", dayOfWeek); // 2

// 時を取得
const hour = getHours(now);
console.log("hour:", hour); // 10

// 分を取得
const minute = getMinutes(now);
console.log("minute:", minute); // 10

// 秒を取得
const second = getSeconds(now);
console.log("second:", second); // 10

// ミリ秒を取得
const millisecond = getMilliseconds(now);
console.log("millisecond:", millisecond); // 0

// 日付の加算・減算
const amount = 5;
const unit = "days";
const newDateAdd = add(now, { [unit]: amount });
console.log("newDateAdd:", newDateAdd); // 2021-06-06T10:10:10.000Z
const newDateSub = sub(now, { [unit]: amount });
console.log("newDateSub:", newDateSub); // 2021-05-27T10:10:10.000Z

// 月初の取得
const unitStart = "month";
const startDate = startOfDay(now, unitStart);
console.log("startDate:", startDate); // 2021-06-01T00:00:00.000Z

// 月末の取得
const unitEnd = "month";
const endDate = endOfDay(now, unitEnd);
console.log("endDate:", endDate); // 2021-06-30T23:59:59.999Z

// 本日日付：2024/06/01
// 比較対象日付：2024/06/02
const date = "2024-06-02";
const isBeforeDate = isBefore(now, date);
console.log("isBeforeDate:", isBeforeDate); // true

const isSameDate = isEqual(now, date);
console.log("isSameDate:", isSameDate); // false

const isAfterDate = isAfter(now, date);
console.log("isAfterDate:", isAfterDate); // false

</code></pre><p><br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://date-fns.org/docs/Getting-Started" target="_blank" rel="noopener noreferrer">date-fns</a><br></p>

date-fnsを使用する

<p>個人的にGitでよく使う操作たちです。<br></p><h3 id="h2c40c9f93a">直前のコミットの取り消し</h3><pre><code>git reset --soft HEAD^</code></pre><p><br>↓Windowsのコマンドプロンプトの場合</p><pre><code>git reset --soft "HEAD^"</code></pre><p><br></p><h3 id="h1d452c2fdb">リモートリポジトリのurlを変更</h3><pre><code># リモートリポジトリURLの確認
git remote -v

# 新しいリモートリポジトリURLの設定
git remote set-url origin {new url (https://xxxxxxxx.git)}</code></pre><p><br></p><h3 id="h67b7df5ba8">大文字と小文字の変更を検出できるよう設定</h3><p>core.ignorecaseがtrueになっていると大文字と小文字が識別されない。（デフォルト設定）</p><pre><code># 設定
git config --global core.ignorecase false

# 確認
git config -l --local | grep core.ignorecase</code></pre><p><br></p><h3 id="h14a0169745">不要なリモートの追跡ブランチを削除</h3><p>リモートからブランチを削除したが、ローカルに追跡ブランチとして残っている場合に削除する方法。</p><pre><code>・リモートの確認
git remote show origin
※「tracked」：使用中 / 「stale」：使用していない古いブランチ

・削除（「stale」のブランチをまとめて削除する）
git remote prune origin</code></pre><p>※削除されるものを事前確認したい場合「git remote prune origin --dry-run」を実行する<br><br></p><h3 id="h3945f2f2f8">Macでリモートリポジトリに保存された.DS_STOREファイルを削除する</h3><p>.gitignoreに記載</p><pre><code># Mac
.DS_Store</code></pre><p><br>カレントディレクトリのキャッシュを削除し、リモートにプッシュ</p><pre><code>git rm -r --cached .</code></pre><p><br><br></p>

個人的にGitでよく使う操作

<p>Next.jsでCtrlキー(or Commandキー)を押下している時だけ数字を表示し、数字キーをクリックすると、ページ遷移する処理を実装したいときのサンプルソースです。<br><br>以下画像のように、サイドバーにCtrlキー(or Commandキー)を押下時のみ数字が表示され、数字を押下するとその画面に遷移する処理です。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/9e3dc93b68e741b59ea7cbd121c5adee/nextjs-key-routing_1.jpg" alt=""><br><br></p><h3 id="h6afa1b1366">オブジェクト配列定義</h3><p>オブジェクト配列を用意します。<br>keyはCtrl(Command)キーと一緒に押したいキー、hrefは遷移先のパスを定義しています。<br>以下はdata/sidebar.tsxというファイルを用意する想定です。</p><pre><code>export const SIDEBAR_OPTIONS = [
    {
        key: '1',
        href: '/house',
        label: '住居',
        icon: &lt;FaHome /&gt;,
    },
    {
        key: '2',
        href: '/shopping',
        label: '買物',
        icon: &lt;FaCartShopping /&gt;,
    },
    {
        key: '3',
        href: '/cooking',
        label: '料理',
        icon: &lt;GiCookingPot /&gt;,
    },
    {
        key: '4',
        href: '/childcare',
        label: '育児',
        icon: &lt;MdChildCare /&gt;,
    },
    {
        key: '5',
        href: '/money',
        label: 'お金',
        icon: &lt;FaMoneyCheckAlt /&gt;,
    },
    {
        key: '6',
        href: '/gift',
        label: 'ギフト',
        icon: &lt;FaGift /&gt;,
    },
];</code></pre><p><br></p><h3 id="hc9246d538e">数字キー押下時の共通処理</h3><p>キー押下時に画面遷移する、共通処理を作成します。<br>以下はhooks/use-keydown.tsxというファイルを作成する想定です。<br>event.metaKeyでMacのCommandキーを指定しています。<br>event.preventDefault();部分でブラウザが持っているショートカットキーのイベントをキャンセルしています。</p><pre><code>import { useEffect } from 'react';
import { SIDEBAR_OPTIONS } from '@/data/sidebar';

const useKeydown = () =&gt; {
&nbsp; &nbsp; useEffect(() =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; /**
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;* キーボードのキーが押されたときの処理
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;* @param event
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;*/
&nbsp; &nbsp; &nbsp; &nbsp; const handleKeyDown = (event: KeyboardEvent) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // CtrlキーまたはCmdキーが押されているとき
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (event.ctrlKey || event.metaKey) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 押されたキーの番号に対応するページを取得
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const page = SIDEBAR_OPTIONS.find((option) =&gt; option.key === event.key)?.href;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (page) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // デフォルトのイベントをキャンセル
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // ページ遷移
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const pageLink: HTMLElement | null = document.querySelector(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `a[href="${page}"]`
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (pageLink) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageLink.click();
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; };

&nbsp; &nbsp; &nbsp; &nbsp; // イベントリスナーを追加
&nbsp; &nbsp; &nbsp; &nbsp; window.addEventListener('keydown', handleKeyDown);

&nbsp; &nbsp; &nbsp; &nbsp; return () =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.removeEventListener('keydown', handleKeyDown);
&nbsp; &nbsp; &nbsp; &nbsp; };
&nbsp; &nbsp; }, []);
};

export default useKeydown;</code></pre><p><br></p><h3 id="h9fb1bfd441">Ctrlキー(Commandキー)押下時の処理</h3><p>キーが押下されているときだけ数字が表示される実装をします。<br>components/sidebar.tsxというファイルを作成する想定です。<br>useKeydown();が前述の手順で作成した共通処理を使用している部分です。</p><pre><code>'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';

import { SIDEBAR_OPTIONS } from '@/data/sidebar';
import useKeydown from '@/hooks/use-keydown';
import { useSidebar } from '@/hooks/use-sidebar';

const Sidebar = () =&gt; {
    const { sidebarOption } = useSidebar();

    // キーボードのキーが押されたときの共通処理
    useKeydown();

    // CtrlキーまたはCmdキーが押されているかどうかの状態
    const [isCtrlOrCmdPressed, setIsCtrlOrCmdPressed] = useState(false);

    useEffect(() =&gt; {
        /**
         * キーボードのキーが押されたときの処理
         * @param event
         */
        const handleKeyDown = (event: KeyboardEvent) =&gt; {
            if (event.ctrlKey || event.metaKey) {
                setIsCtrlOrCmdPressed(true);
            }
        };

        /**
         * キーボードのキーが離されたときの処理
         * @param event
         */
        const handleKeyUp = (event: KeyboardEvent) =&gt; {
            if (!event.ctrlKey || !event.metaKey) {
                setIsCtrlOrCmdPressed(false);
            }
        };

        // イベントリスナーを追加
        window.addEventListener('keydown', handleKeyDown);
        window.addEventListener('keyup', handleKeyUp);

        return () =&gt; {
            window.removeEventListener('keydown', handleKeyDown);
            window.removeEventListener('keyup', handleKeyUp);
        };
    }, []);

    return (
        &lt;aside className="relative hidden w-48 bg-sidebar py-4 sm:block"&gt;
            &lt;h3 className="mb-5 px-4 py-1"&gt;
                &lt;Link href="/"&gt;LifeHub Links&lt;/Link&gt;
            &lt;/h3&gt;
            {SIDEBAR_OPTIONS.map((option) =&gt; (
                &lt;Link
                    key={option.href}
                    href={option.href}
                    className={`block w-full px-4 py-2 duration-200 hover:bg-gray-600 ${
                        sidebarOption === option ? 'bg-gray-600' : ''
                    }`}
                &gt;
                    &lt;div className="flex justify-between"&gt;
                        &lt;div className="flex items-center gap-1"&gt;
                            {option.icon}
                            &lt;p&gt;{option.label}&lt;/p&gt;
                        &lt;/div&gt;
                        {isCtrlOrCmdPressed &amp;&amp; &lt;div&gt;{option.key}&lt;/div&gt;}
                    &lt;/div&gt;
                &lt;/Link&gt;
            ))}
            &lt;small className="absolute bottom-2 left-4"&gt;© tukky 2024&lt;/small&gt;
        &lt;/aside&gt;
    );
};

export default Sidebar;</code></pre><p><br></p><h3 id="h44e51f96ce">参考資料</h3><p>以下の自作サイトで実装しています。<br><a href="https://life-hub-links.vercel.app/" target="_blank" rel="noopener noreferrer">LifeHubLlinks</a><br></p>

Next.jsでCtrl(Command)キと数字キークリックでページ遷移する処理

<p>以下のようにLambda関数とLINE Notifyを使用してAWSの月間コストをLINEに通知する方法です。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/af089d1f2e5c472b8fa2a9ed8488e723/nodejs-lambda-aws-cost_1.png" alt=""><br></p><h3 id="hdbf98b940f">前提条件</h3><p><a href="https://notify-bot.line.me/ja/" target="_blank" rel="noopener noreferrer">LINE Notify</a>アカウントが作成されていること<br>LINE Notify通知用のTOKENを取得していること<br><br></p><h3 id="h8483c00c74">Node.jsでソースを作成する</h3><p><strong>npmインストール</strong></p><pre><code>npm i aws-sdk axios</code></pre><p><br><strong>index.mjsを作成</strong></p><pre><code>import AWS from 'aws-sdk';
import axios from 'axios';
const costExplorer = new AWS.CostExplorer({ region: 'ap-northeast-1' });

const BASE_URL = 'https://notify-api.line.me/api/notify';
const LINE_TOKEN = process.env.LINE_TOKEN;

export const handler = async (event) =&gt; {
    // 今月の初日を計算
    const startDate = new Date();
    startDate.setDate(1); // 月の初日に設定
    const formattedStartDate = startDate.toISOString().split('T')[0];

    // 今日の日付を取得
    const endDate = new Date().toISOString().split('T')[0];

    const params = {
        TimePeriod: {
            Start: formattedStartDate,
            End: endDate,
        },
        Granularity: 'MONTHLY',
        Metrics: ['UnblendedCost'],
        GroupBy: [
            {
                Type: 'DIMENSION',
                Key: 'SERVICE',
            },
        ],
    };

    try {
        // AWS Cost Explorer からコストデータを取得
        const data = await costExplorer.getCostAndUsage(params).promise();

        // サービス別コストを整形して出力
        let totalCost = 0;
        const outputMessage = [];
        outputMessage.push('\n【AWS Cost Report】');
        data.ResultsByTime.forEach((result) =&gt; {
            outputMessage.push(`${result.TimePeriod.Start} ~ ${result.TimePeriod.End}\n`);

            result.Groups.forEach((group) =&gt; {
                const serviceName = group.Keys[0];
                const amount = group.Metrics.UnblendedCost.Amount;
                const unit = group.Metrics.UnblendedCost.Unit;
                totalCost += parseFloat(amount);

                // 0.01 USD 未満の場合は表示しない
                if (amount &lt; 0.01) return;

                outputMessage.push(`${serviceName}: $${parseFloat(amount).toFixed(2)}`);
            });
            if (result.Groups.length === 0) {
                console.log('No cost data available for this period.');
            }
        });

        // 合計金額を追加
        outputMessage.push(`\n💰Total Cost: $${totalCost.toFixed(2)} USD`);

        // コンソールに出力
        console.log(outputMessage.join('\n'));

        // LINE Notify に送信するメッセージを整形
        const sendParams = new URLSearchParams({
            message: outputMessage.join('\n'),
        });

        // LINE Notify に通知を送信するための設定
        const config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                Authorization: `Bearer ${LINE_TOKEN}`,
            },
        };

        // LINE Notify に通知を送信
        const res = await axios.post(BASE_URL, sendParams.toString(), config);
        console.log(res.status);

        return {
            statusCode: 200,
            body: JSON.stringify({
                message: 'Cost data retrieved successfully',
                data: data.ResultsByTime,
            }),
        };
    } catch (error) {
        console.error('Error fetching cost data:', error);
        return {
            statusCode: 500,
            body: JSON.stringify({
                message: 'Error fetching cost data',
                error: error.message,
            }),
        };
    }
};</code></pre><p><br>Lambda関数デプロイ用にzip圧縮する。以下はコマンドの例です。</p><pre><code># linux/mac
zip -r function_name.zip .

# windows command prompt
powershell Compress-Archive -Path * -DestinationPath function_name.zip

# windows powershell
Compress-Archive -Path * -DestinationPath function_name.zip</code></pre><p><br></p><h3 id="h7de00c7406">Lambda関数を作成し、デプロイする</h3><p>Lambda関数を作成する。<br>・ランタイム：Node.js 20.x<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/64a783cd2f2947fbad5247ca3679f151/nodejs-lambda-aws-cost_2.png" alt=""><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/7c6cba7987ec4549805df18e9667e880/nodejs-lambda-aws-cost_3.png" alt=""><br><br>環境変数を設定する。<br>・キー：<span style="color:#16191f">LINE_TOKEN</span><br><span style="color:#16191f">・値　：トークン値</span><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/51dad33f289549eeaffc57eb782d4f24/nodejs-lambda-aws-cost_4.png" alt=""><br><br>Testを実行してLINEに出力されたら成功です。<br><br>以下の記事などを使用して定期的に実行可能です。<br><a href="https://docs.aws.amazon.com/ja_jp/eventbridge/latest/userguide/eb-run-lambda-schedule.html" target="_blank" rel="noopener noreferrer">チュートリアル: EventBridge を使用した AWS Lambda 関数のスケジュール</a><br><br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://github.com/tukky-14/nodejs-send-aws-cost" target="_blank" rel="noopener noreferrer">nodejs-send-aws-cost</a><br><br></p>

Lambda関数(Node.js)を使用してAWSの月間コストをLINEに通知する

<p>AWS Command Line Interface (AWS CLI)を使用してLambda関数を操作する方法です。<br></p><h3 id="hdbf98b940f">前提条件</h3><p><a href="https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-install.html" target="_blank" rel="noopener noreferrer">AWS CLI</a>がインストールされていること<br>AWS CLIからAWS Lambda関数を接続するための<a href="https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-configure-files.html" target="_blank" rel="noopener noreferrer">認証情報が設定</a>されていること<br><br></p><h3 id="h7a038a4660">Lambda関数の情報を取得する</h3><p><strong>指定した関数の情報を取得</strong></p><pre><code>aws lambda get-function --function-name [関数名]</code></pre><p><br><strong>指定した関数の情報を取得しテーブルで表示</strong><br>（関数名 / ランタイム / タイムアウト / メモリサイズ）</p><pre><code>aws lambda get-function --function-name [関数名] --query 'Configuration.{FunctionName:FunctionName, Runtime:Runtime, Timeout:Timeout, MemorySize:MemorySize}' --output table</code></pre><p><br></p><h3 id="hed0798510a">Lambda関数一覧の情報を取得する</h3><p><strong>Lambda関数の一覧を取得</strong></p><pre><code>aws lambda list-functions</code></pre><p><br><strong>Lambda関数の一覧を取得しテーブルで表示</strong><br>（関数名 / ランタイム / タイムアウト / メモリサイズ）</p><pre><code>aws lambda list-functions --query "Functions[].{Function_Name: FunctionName, Runtime: Runtime, Memory_Size: MemorySize, Timeout: Timeout}" --output table</code></pre><p><br></p><h3 id="hdbb5a2c22c">Lambda関数を作成する</h3><p><strong>Lambda関数を作成</strong><br>【事前準備】<br>・Lambdaに設定するIAMロールの作成<br>・デプロイする関数のファイルをzipファイルに圧縮し、カレントディレクトリに配置</p><pre><code># Lambda関数の作成
aws lambda create-function --function-name [関数名] \
--zip-file fileb://[ファイル名].zip --handler index.handler --runtime nodejs20.x \
--role arn:aws:iam::[アカウントID]:role/[Lambdaに設定するIAMロール]</code></pre><p><br></p><h3 id="h4257916e73">Lambda関数を更新する</h3><p><strong>Lambda関数の更新</strong></p><pre><code>aws lambda update-function-configuration \
--function-name my-function \
--memory-size [メモリサイズ] \
--timeout [タイムアウト]

# 環境変数
--environment "Variables={[変数名]=[値],[変数名]=[値]}" 
例) --environment "Variables={KEY1=value1,KEY2=value2}" \

# VPCの設定
--vpc-config SubnetIds=[サブネットID],[サブネットID],SecurityGroupIds=[セキュリティグループID] \
例) --vpc-config SubnetIds=subnet-xxxxxx,subnet-yyyyyy,SecurityGroupIds=sg-xxxxxx \

# Lambdaレイヤーの設定
 --layers "arn:aws:lambda:region:[アカウントID]:layer:[Lambdaレイヤー名]:[バージョン]"
例) --layers "arn:aws:lambda:region:account-id:layer:layer-name:version"</code></pre><p><br></p><h3 id="h3a8c153613">Lambda関数を削除する</h3><p><strong>Lambda関数の削除</strong></p><pre><code>aws lambda delete-function --function-name [関数名]</code></pre><p><br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://docs.aws.amazon.com/cli/latest/reference/lambda/" target="_blank" rel="noopener noreferrer">AWS CLI Lambda</a><br><br><br><br><br></p>

AWS CLIを使用してLambda関数を操作する

<p>TailwindCSSで使用しているクラス名を自動で並び替えする方法です。<br></p><h3 id="hdbf98b940f">前提条件</h3><p>Prettierが設定されていること。<br>VSCodeのファイル保存時にPrettierの並び替えが自動設定されていること。<br>設定方法は以下の記事で紹介しています。<br><a href="https://tukkytech.com/blog/prettier-setting/" target="_blank" rel="noopener noreferrer">VSCodeにPrettierを設定する</a><br></p><h3 id="h58a6675258">パッケージのインストール</h3><p>以下のパッケージをインストールします。</p><pre><code>npm install -D prettier prettier-plugin-tailwindcss</code></pre><p><br></p><h3 id="h68274e4c2b">Prettier設定ファイルの更新</h3><p>Prettier設定ファイル（.prettierrc.jsonなど）に以下"plugins"の記述を追加します。</p><pre><code>{
    "printWidth": 100,
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "endOfLine": "lf",
    "plugins": ["prettier-plugin-tailwindcss"]  ← 追加
}</code></pre><p><br></p><h3 id="h84c03f94ef">実行確認</h3><p>ファイル保存時に自動でクラス名が並び替えされます。<br>※すぐに反映されない場合、VSCodeの再起動が必要になる可能性があります</p><pre><code>{/* 並び替えの例 */}
&lt;div class="pt-2 p-4"&gt;
↓
&lt;div class="p-4 pt-2"&gt;</code></pre><p><br></p><h3 id="he45680f0bc">参考記事</h3><p><a href="https://tailwindcss.com/blog/automatic-class-sorting-with-prettier" target="_blank" rel="noopener noreferrer">Automatic Class Sorting with Prettier</a><br><a href="https://www.npmjs.com/package/prettier-plugin-tailwindcss" target="_blank" rel="noopener noreferrer">prettier-plugin-tailwindcss</a><br></p>

TailwindCSSのクラス名をVSCodeのファイル保存時に自動で並び替えする

<p>VSCodeの拡張機能「Project Manager」が非常に便利だったため使い方をメモします。<br>よく使うプロジェクトやワークスペースを保存し、サイドバーアイコンから素早く切り替えることができます。<br></p><h3 id="h68c0018014">拡張機能「Project Manger」のインストール</h3><p>VSCodeの拡張機能検索で「Project Manger」を検索し、インストールします。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/007b2ba554734f058482df0e51a7c41c/vscode-project-manager_1.png" alt=""><br></p><h3 id="h5e0bec2340">プロジェクト（ワークスペース）の保存</h3><p>サイドバーに追加されたフォルダのアイコンをクリックし、左上の保存ボタンをクリックします。<br>そうすると、現在のプロジェクトが追加されます。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/276effc1291f4363bdadeb43479ff174/vscode-project-manager_2.png" alt=""><br></p><h3 id="hb8ca9c2430">タグの設定</h3><p>左上の３点リーダから「Open Settings」をクリックし、設定の中のTagsで好きなタグを設定します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/48a024bc6bcd4825985dbb684b77a860/vscode-project-manager_3.png" alt=""><br><br>プロジェクトを右クリック &gt; 「Edit Tags」を選択し、設定したいタグをチェックして「OK」 を押下します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/fb4b8e6e650d4f58a0ae671ce5282c09/vscode-project-manager_4.png" alt=""><br><br>左上のタグのアイコンをクリックし、表示したいタグをチェックして「OK」を押下します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/f7a0d528358b47a3b6df6cea35172a15/vscode-project-manager_5.png" alt=""><br><br>左上のタグの左にあるアイコンをクリックすると、タグ別でプロジェクトを表示できます。また、鉛筆アイコンをクリックするとjsonで設定を編集することもできます。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/7dc077ee40fb432186a39f8c4413a8b6/vscode-project-manager_6.png" alt=""><br><br><br><br><br><br><br></p>

VSCodeの拡張機能「Project Manager」を設定する

<p>ESLintのチェックを無視したいときありますよね。<br>ESLintのチェックエラーを無効にしたいときに使う記法をまとめました。<br></p><h3 id="h5895528691">フォルダ・ファイル単位で無効</h3><p>全てのルールを無効：.eslintignoreをルートに作成してファイルやフォルダを指定する</p><pre><code>node_modules
out</code></pre><p><br>全てのルールを無効：ファイルの先頭に以下を記述する</p><pre><code>/* eslint-disable */</code></pre><p><br>特定のルールを無効：ファイルの先頭に以下を記述する<br>off：無効<br>warn：警告（黄下線）<br>error：エラー（赤下線）</p><pre><code>/* eslint @typescript-eslint/no-explicit-any: off */
/* eslint @typescript-eslint/no-explicit-any: warn */
/* eslint @typescript-eslint/no-explicit-any: error */

off,warn,errorは0,1,2でも表現可能

/* eslint @typescript-eslint/no-explicit-any: 0 */
/* eslint @typescript-eslint/no-explicit-any: 1 */
/* eslint @typescript-eslint/no-explicit-any: 2 */</code></pre><p><br></p><h3 id="h3da29b0aa5">ブロック単位で無効</h3><p>特定のルールを無効：対象行の上下に記述</p><pre><code>/* eslint-disable [ルール名] */
hoge;
fuga;
/* eslint-enable [ルール名] */

例：
/* eslint-disable @typescript-eslint/no-explicit-any */
hoge;
fuga;
/* eslint-enable @typescript-eslint/no-explicit-any */</code></pre><p><br></p><h3 id="ha8fc487742">行単位で無効</h3><p>特定のルールを無効：対象行の上に記述</p><pre><code>// eslint-disable-next-line [ルール名]

例：
// eslint-disable-next-line @typescript-eslint/no-explicit-any</code></pre><p><br>全てのルールを無効：同じ行に記述</p><pre><code>// eslint-disable-line

例：
const hoge = "fuga" // eslint-disable-line</code></pre><p><br><br></p>

ESLintのチェックエラーを無効にしたいときに使う記法まとめ

<p>ExpressはNode.js 上で動作する Web アプリケーションフレームワークです。<br>ExpressとSQLiteを使用したサンプルソースです。<br></p><h3 id="hdadc0eaacf">特徴</h3><p>・非常に軽量なフレームワークであり、高速なパフォーマンスを実現できる<br>・Express はシンプルな API を提供しており、初心者でも簡単に使い始めることができる<br>・ルーティング、ミドルウェア、テンプレートエンジン、エラーハンドリングなど、Web アプリケーション開発に必要な機能が揃っている<br></p><h3 id="h43471f3275">用途</h3><p>・静的ファイル配信や簡単な API エンドポイントを提供するような、シンプルな Web サイトの開発<br>・REST API サーバーの開発<br>・WebSockets などを用いたリアルタイムアプリケーションの開発<br></p><h3 id="heeb2a1e476">npm install</h3><p>以下コマンドでパッケージをインストールします。</p><pre><code>npm init -y
npm i express
npm i sqlite3</code></pre><p><br></p><h3 id="hb2f6b78d84">サンプルソース</h3><p>db.js</p><pre><code>const sqlite3 = require('sqlite3').verbose();

const db = new sqlite3.Database('./database.sqlite3');

// テーブル作成
db.run(`CREATE TABLE IF NOT EXISTS users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  email TEXT NOT NULL
)`);

module.exports = db;</code></pre><p><br>app.js</p><pre><code>const express = require('express');
const app = express();
app.use(express.json());

const sqlite3 = require('sqlite3').verbose();
const db = new sqlite3.Database('./database.sqlite3');


// GET /users エンドポイント
app.get('/users', (req, res) =&gt; {
&nbsp; &nbsp; db.all('SELECT * FROM users', (err, rows) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; if (err) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; res.status(500).send('An error occurred.');
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;
&nbsp; &nbsp; &nbsp; &nbsp; }

&nbsp; &nbsp; &nbsp; &nbsp; res.json(rows);
&nbsp; &nbsp; });
});

// POST /users エンドポイント
app.post('/users', (req, res) =&gt; {
&nbsp; &nbsp; const { name, email } = req.body;

&nbsp; &nbsp; db.run('INSERT INTO users (name, email) VALUES (?, ?)', [name, email], (err) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; if (err) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Error:', err);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; res.status(500).send('An error occurred.');
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;
&nbsp; &nbsp; &nbsp; &nbsp; }

&nbsp; &nbsp; &nbsp; &nbsp; res.status(201).send('User created successfully.');
&nbsp; &nbsp; });
});

// DELETE /users エンドポイント
app.delete('/users/:id', (req, res) =&gt; {
&nbsp; &nbsp; const { id } = req.params;

&nbsp; &nbsp; db.run('DELETE FROM users WHERE id = ?', id, (err) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; if (err) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; res.status(500).send('An error occurred.');
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;
&nbsp; &nbsp; &nbsp; &nbsp; }

&nbsp; &nbsp; &nbsp; &nbsp; res.status(200).send('User deleted successfully.');
&nbsp; &nbsp; });
});

// サーバーの起動
app.listen(3000, () =&gt; {
&nbsp; &nbsp; console.log('Server is listening on port 3000');
});</code></pre><p><br></p><h3 id="h4d6fdb4d08">利用方法</h3><p>テーブルの作成</p><pre><code>node db.js</code></pre><p><br>サーバの起動</p><pre><code>node app.js</code></pre><p><br>リクエスト</p><pre><code># GET
curl -X GET localhost:3000/users

# POST
curl -X POST -H "Content-Type: application/json" -d '{"name":"Tom", "email":"test@test.jp"}' localhost:3000/users

# DELETE
curl -X DELETE localhost:3000/users/1</code></pre><p><br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://expressjs.com/" target="_blank" rel="noopener noreferrer">Express公式サイト</a><br><a href="https://expressjs.com/ja/guide/routing.html" target="_blank" rel="noopener noreferrer">Expressチュートリアル</a><br></p>

Node.jsのフレームワークExpressの利用

<p>カスタムフックを利用して、Next.jsの各ページで共通の初期処理を行う方法です。<br><br>以下の例ではカスタムフック useCommonInitialization を作成し、その中で何らかの初期化処理（例えば、ユーザー情報のロードや状態の設定）を行っています。このフックを各ページコンポーネントで呼び出すことで、共通の処理を実行します。<br></p><h3 id="h975f20dae5">カスタムフックの作成</h3><p>hooksフォルダに共通処理を定義します。</p><pre><code>// hooks/useCommonInitialization.js
import { useEffect } from 'react';

const useCommonInitialization = () =&gt; {
&nbsp; &nbsp; useEffect(() =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; // ここに共通の初期処理を記述します。
&nbsp; &nbsp; &nbsp; &nbsp; console.log('共通の初期処理を実行');

&nbsp; &nbsp; &nbsp; &nbsp; // 例: ユーザーデータのロードや状態の設定など
&nbsp; &nbsp; &nbsp; &nbsp; // fetchData();
&nbsp; &nbsp; &nbsp; &nbsp; // initializeState();
&nbsp; &nbsp; }, []);


&nbsp; &nbsp; // 必要に応じて何かを返すこともできます（例: 状態、関数など）
};

export default useCommonInitialization;</code></pre><p><br></p><h3 id="ha04beec18d">カスタムフックを使用</h3><p>各ページで関数を呼び出し、ページがロードされるたびに共通の初期処理を実行できるようにします。</p><pre><code>// pages/index.js
import useCommonInitialization from '../hooks/useCommonInitialization';

const HomePage = () =&gt; {
&nbsp; &nbsp; useCommonInitialization(); // フックを呼び出し

&nbsp; &nbsp; return (
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;ホームページ&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {/* ページの内容 */}
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; );
};

export default HomePage;</code></pre><p><br></p><pre><code>// pages/about.js
import useCommonInitialization from '../hooks/useCommonInitialization';

const AboutPage = () =&gt; {
&nbsp; &nbsp; useCommonInitialization(); // フックを呼び出し

&nbsp; &nbsp; return (
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;アバウトページ&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {/* ページの内容 */}
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; );
};

export default AboutPage;</code></pre><p><br><br><br></p>

Next.jsで共通の初期処理を作成する

<p>Next.jsで作成したWebアプリをスマホ端末やタブレット端末で表示したとき、アドレスバーを非表示にしたくなりましたので調査しました。<br></p><h3 id="ha060265140">App Routerを使用する場合</h3><p>layout.tsxのmetadataオブジェクトに以下のプロパティと値を追加します。</p><pre><code>import type { Metadata } from 'next'
&nbsp;
export const metadata: Metadata = {
&nbsp; title: '...',
&nbsp; description: '...',
  appleWebApp: true, // 追加
}
&nbsp;
export default function Page() {}</code></pre><p><br></p><h3 id="hc89dfa2c3b">App Routerを使用しない場合</h3><p>_document.tsxなどのHeadタグ内に以下の記述を追加します。</p><pre><code>&lt;Head&gt;
&nbsp; &nbsp; &lt;title&gt;Tukky Tech Blog&lt;/title&gt;
&nbsp; &nbsp; &lt;meta name="description" content="Jam Stackで作成した技術ブログです。" /&gt;
&nbsp; &nbsp; &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; {/* 追加 iOS */}
&nbsp; &nbsp; &lt;meta name="mobile-web-app-capable" content="yes" /&gt; {/* 追加 AndroidOS */}
&nbsp; &nbsp; &lt;link rel="icon" href="/icon_16.png" /&gt;
&nbsp; &nbsp; &lt;link rel="apple-touch-icon" sizes="192x192" href="/icon_192.png" /&gt;
&lt;/Head&gt;</code></pre><p><br></p><h3 id="h27adfe924a">端末での操作</h3><p>アドレスバーを非表示にするため、対象のWebアプリを起動したら、共有ボタンからページを「ホーム画面に追加」します。<br>ホーム画面に追加されたWebアプリを起動するとアドレスバーが非表示になります。<br><br>↓変更前<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/5c08643073e04db49cc7195bfa9425d8/nextjs-applewebapp_1.jpeg" alt=""><br><br>↓変更後<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/f79caa4b45914c66b71ea43789bb8519/nextjs-applewebapp_2.jpeg" alt=""><br><br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://blog.katsubemakito.net/html5/fullscreen" target="_blank" rel="noopener noreferrer">[HTML5] フルスクリーンの開始と解除</a></p>

Next.js製Webアプリをモバイル端末で表示するときアドレスバーを非表示にする

<p>Google Apps ScriptでChatGPT APIを利用する方法です。<br></p><h3 id="hdbf98b940f">前提条件</h3><p>・ChatGPTのAPIキーを持っていること<br></p><h3 id="h00bb0fe926">Googleスプレッドシート</h3><p>Googleスプレッドシートで以下のように、以下の目的で4つのセルを準備します。<br>・モデル<br>・プロンプト<br>・入力する文章（今回は「用語」としています）<br>・出力される回答<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/82dc5e7fdb754094aeb4cb3fe058a9de/chatgpt-gas_1.png" alt=""><br><br></p><h3 id="heaf91b6008">関数の記述</h3><p>メニューの拡張機能 &gt; Apps Scriptを選択し、<br>以下のソースを貼り付けます。</p><pre><code>const apikey = PropertiesService.getScriptProperties().getProperty('OPENAI_API_KEY');;
// const model = "gpt-3.5-turbo";
// const model = "gpt-4";
const temperature = 0.5;
const url = "https://api.openai.com/v1/chat/completions";

function GPT(model, content, maxTokens=2048) {
&nbsp; if(content){
&nbsp; &nbsp; const requestBody = {
&nbsp; &nbsp; &nbsp; "model": model,
&nbsp; &nbsp; &nbsp; "messages": [{'role': 'user', 'content': content}],
&nbsp; &nbsp; &nbsp; "temperature": temperature,
&nbsp; &nbsp; &nbsp; "max_tokens": maxTokens
&nbsp; &nbsp; };

&nbsp; &nbsp; const requestOptions = {
&nbsp; &nbsp; &nbsp; "method": "POST",
&nbsp; &nbsp; &nbsp; "headers": {
&nbsp; &nbsp; &nbsp; &nbsp; "Content-Type": "application/json",
&nbsp; &nbsp; &nbsp; &nbsp; "Authorization": "Bearer " + apikey
&nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; "payload": JSON.stringify(requestBody)
&nbsp; &nbsp; };

&nbsp; &nbsp; const response = JSON.parse(UrlFetchApp.fetch(url, requestOptions).getContentText());

&nbsp; &nbsp; return response.choices[0].message.content.trim();

&nbsp; }　else　{
&nbsp; &nbsp; return "no result";
&nbsp; }
}</code></pre><p><br></p><h3 id="hbb2c37dd28">スクリプトプロパティの設定</h3><p>ソース内で使用するAPIキーをスクリプトプロパティに設定します。<br>Apps Scriptの設定 &gt;「スクリプトプロパティ」を選択し、以下を入力して保存します。<br>プロパティ：OPENAI_API<em>_</em>KEY<br>値　　　　：自分が持っているOPEN AIのAPIキー<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/862efb94895447969e2a378dfeb58bbd/chatgpt-gas_2.png" alt=""> <br><br></p><h3 id="ha4b52e0541">作成した関数の利用</h3><p>上記で作成した関数（GPT()）はセルの中で利用可能です。<br>B4のセルに以下のような関数を入れて利用します。<br>「A4に何か入力されていたら、入力された内容に基づいてChatGPT APIを呼び出して回答をB4に出力する」といった内容です。<br>※関数の引数として、第一引数に"モデル"、第二引数に"固定のプロンプト+入力された用語"としています。</p><pre><code>=if(A4&lt;&gt;"",GPT(B1,B2&amp;A4),"")</code></pre><p><br></p><h3 id="h4569858a1d">実際の動き</h3><p><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/211c30a2da33483483b3af3eb206d993/chatgpt-gas_3.png" alt=""><br><br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://openai.com/blog/openai-api" target="_blank" rel="noopener noreferrer">OpenAI API</a><br><br><br></p>

Google Apps ScriptでChatGPT APIを利用する

<p>Reactで開発したサイトをGithubにデプロイする手順です。<br>npmのgh-pagesを利用しています。<br></p><h3 id="h2d478d977d">gh-pagesのインストール</h3><pre><code>npm install gh-pages --save-dev</code></pre><p><br></p><h3 id="hdbc74f5437">package.jsonの編集</h3><p>homepageフィールドを追加し、<br>scriptsフィールドにdeployを追加します。</p><pre><code>{
    "name": "react",
    "version": "0.1.0",
~省略〜
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "deploy": "npm run build &amp;&amp; gh-pages -d build" ← ★追加★
    },
~省略~
    },
    "homepage": "http://[Your GitHub Username].github.io/[Your Repository Name]"&nbsp; ← ★追加★
}</code></pre><p><br></p><h3 id="h8084dd1a54">コマンド実行</h3><pre><code>npm run deploy</code></pre><p><br></p><h3 id="h4887df67ed">GitHub設定</h3><p>GitHubにアクセスし、以下を設定します。<br>GitHub &gt; Settings &gt; PagesでBranchを「gh-pages」<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/c20d90546d5b4f90a26901cd2a97ce5c/react-github-deploy-1.png" alt=""><br><br>設定が完了したら、上記のpackage.jsonに設定したhomepageのアドレスにアクセスすると作成したサイトがインターネット上で見れるようになります。<br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site" target="_blank" rel="noopener noreferrer">GitHub Pages サイトを作成する</a><br><a href="https://www.npmjs.com/package/gh-pages" target="_blank" rel="noopener noreferrer">gh-pages</a></p>

Reactで開発したWebサイトをgithub pagesを使用してデプロイする

<p>TailwindCSSを使用したUI<span style="color:#1f1f1f">コンポーネントライブラリ</span>サイトをまとめました。<br>以下のサイトのテンプレートを使用してコピペ → 編集すれば、おしゃれなUIを楽に実装できます。</p><h3 id="h81dfeea90d"><br>Flowbite</h3><p><a href="https://flowbite.com/docs/getting-started/introduction/" target="_blank" rel="noopener noreferrer">Flowbite</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/22ead945df2a490182ee8375e99e29d6/tailwind-flowbite.png" alt=""><br></p><h3 id="h149614873f">Flowrift</h3><p><a href="https://flowrift.com/c/banner" target="_blank" rel="noopener noreferrer">Flowrift</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/b98ef04b65b641c1ba5f9f60000a8d4a/tailwind-flowrift.png" alt=""><br></p><h3 id="h2632af6362">Tailblocks</h3><p><a href="https://tailblocks.cc/" target="_blank" rel="noopener noreferrer">Tailblocks</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/492ceb1779b5404696da6eda8a3a5cc5/tailwind-tailblocks.png" alt=""><br></p><h3 id="hda0fd0522d">Kitwind</h3><p><a href="https://kitwind.io/products/kometa/components/" target="_blank" rel="noopener noreferrer">Kitwind</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/301ce72c8ac64f0d89a2a5bff9744a74/tailwind-kitwind.png" alt=""><br></p><h3 id="h45ff821a0b">Tailwind UI KIT</h3><p><a href="https://www.tailwind-kit.com/components" target="_blank" rel="noopener noreferrer">Tailwind UI KIT</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/89b4bd1f3fc94885979a3f21f079500d/tailwind-UIkit.png" alt=""><br></p><h3 id="hb10c390584">Meraki UI Components</h3><p><a href="https://merakiui.com/components/" target="_blank" rel="noopener noreferrer">Meraki UI Components</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/07a342f5e0044ef9815a181f00096662/tailwind-merakiui.png" alt=""><br></p><h3 id="h84427c2ebe">Tail-kit</h3><p><a href="https://www.tailwind-kit.com/" target="_blank" rel="noopener noreferrer">Tail-kit</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/b34f60dee67c49c2a3515e57a8def045/tailwind-kit.png" alt=""><br></p><h3 id="h13d9cbbb4b">Wickedblocks</h3><p><a href="https://wickedblocks.dev/" target="_blank" rel="noopener noreferrer">Wickedblocks</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/b85545df4474403bb76e301fb44a3825/tailwind-wickedblocks.png" alt=""><br></p>

TailwindCSSのUIコンポーネントライブラリを使用する

<p>Next.js × microCMSで作成したブログをS3 × CloudFrontでデプロイしたところ、トップページ以外のページを別タブや直接URLを指定してアクセスするとAccess Deniedのエラーが発生する問題が発生しました。<br></p><h3 id="h9c1f22bd6d">原因</h3><p>CloudFrontのディストリビューション作成時にデフォルトルートオブジェクトを「index.html」に設定することでトップページにはアクセスできますが、それ以外のページのURL直接アクセスに関しては問題が起きるようです。<br><br>S3にデプロイしているフォルダ構成は以下のようになっており、CloudFrontからS3へのリクエスト時に各フォルダの下にあるindex.htmlファイルを参照する必要があるといった内容でした。<br>（例えば、https://tukkytech.com/blog/dayjs/のURLは以下フォルダのblog/dayjs/index.htmlを表示する必要があります。）<br><br>※なお、ビルド&amp;エクスポート処理後に「ディレクトリ/index.html」の形にするには、next.config.jsに<code>trailingSlash: true </code>を設定しておく必要があります。</p><pre><code>├── 404
│&nbsp; &nbsp;└── index.html
├── 404.html
├── _next
│&nbsp; &nbsp;├── aUtxxxxxxxx
│&nbsp; &nbsp;└── static
│&nbsp; &nbsp; &nbsp; &nbsp;├── aUtxxxxxxxx
│&nbsp; &nbsp; &nbsp; &nbsp;├── xxxxxx
│&nbsp; &nbsp; &nbsp; &nbsp;....
├── blog
│&nbsp; &nbsp;├── aws-acm
│&nbsp; &nbsp;│&nbsp; &nbsp;└── index.html
│&nbsp; &nbsp;├── dayjs
│&nbsp; &nbsp;│&nbsp; &nbsp;└── index.html
│&nbsp; &nbsp;....
│
├── components
│&nbsp; &nbsp;├── Container
│&nbsp; &nbsp;│&nbsp; &nbsp;└── index.html
│&nbsp; &nbsp;├── Footer
│&nbsp; &nbsp;│&nbsp; &nbsp;└── index.html
│&nbsp; &nbsp;├── Header
│&nbsp; &nbsp;│&nbsp; &nbsp;└── index.html
│&nbsp; &nbsp;└── TableOfContents
│&nbsp; &nbsp; &nbsp; &nbsp;└── index.html
├── favicon.ico
├── index.html
├── next.svg
├── robots.txt
├── sitemap-0.xml
├── sitemap.xml
├── thirteen.svg
├── tukkytech.png
└── vercel.svg</code></pre><p><br></p><h3 id="hab1857546b">CloudFront Functionsで対応する</h3><p>上記の原因を解決するために、CloudFront Functionsを設定します。<br><br>AWSのコンソールからCloudFront &gt; 「関数」にアクセスし、「関数を作成」をクリックして適当な関数名を設定して関数を作成します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/3fe2d0c30a7a4bf29920c9dba7459a68/nextjs-cloudfront-functions_1.png" alt=""><br><br>「構築」タブでコードを書きます。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/eb9be85c69234a41933b1b8d7b315aee/nextjs-cloudfront-functions_2.png" alt=""><br><br>コードが書けたら「発行」タブで「関数を発行」をクリックします。<br>その後、下部の設定からディストリビューションに関連付けします。（ディストリビューションの設定画面からも関連付け可能です。）<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/23d6983e2c254776b323c2e261b175b8/nextjs-cloudfront-functions_3.png" alt=""><br><br>以下が書いたコードです。</p><pre><code>function handler(event) {
&nbsp; &nbsp; var request = event.request;
&nbsp; &nbsp; var uri = request.uri;

&nbsp; &nbsp; if (uri.startsWith('/')) {
&nbsp; &nbsp; &nbsp; &nbsp; request.uri = uri + 'index.html';
&nbsp; &nbsp; }

&nbsp; &nbsp; return request;
}</code></pre><p>上記の設定は、クライアントからリクエストが来たら'index.html'を追加することにしました。<br><br>・CloudFrontにhttps://tukkytech.com/blog/dayjs/とリクエストが来る<br>↓<br>・uriは「blog/dayjs/」になるため、S3の「blog/dayjs/index.html」を参照するようuriを書き換え<br><br>といった具合です。<br>これでS3にデプロイしている各ディレクトリのindex.htmlを参照してくれるようになりました。<br>（コードはかなり簡単に書いたので想定漏れがあることはご了承ください）<br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/cloudfront-functions.html" target="_blank" rel="noopener noreferrer">CloudFront Functions を使用したエッジでのカスタマイズ</a><br><a href="https://susisu.hatenablog.com/entry/2023/01/29/210811" target="_blank" rel="noopener noreferrer">CloudFront Functions で Next.js のパス解決の真似をする</a><br><a href="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/function-code-choose-purpose.html" target="_blank" rel="noopener noreferrer">Determine your function's purpose</a></p>

S3 × CloudFrontでNext.jsの特定のページにアクセスできない問題の解決

<p>npmパッケージ「Cheerio」を使用してWebスクレイピングを行う方法です。<br>このサイトtukkyteck.comを対象として操作してみます。<br></p><h3 id="hdbf98b940f">前提条件</h3><p>・node.jsがインストールされていること<br></p><h3 id="heeb2a1e476">npm install</h3><p>任意のフォルダを作成し、cheerioとWebサイトのhtml情報を取得するためにaxiosをインストールします。</p><pre><code>npm install cheerio
npm install axios</code></pre><p><br></p><h3 id="hfef04364c2">記事取得</h3><p>index.jsに以下のように記述します。<br><a href="https://github.com/tukky-14/nodejs_cheerio" target="_blank" rel="noopener noreferrer">GitHub</a>にソースあります。<br>index.js</p><pre><code>const axios = require("axios");
const cheerio = require("cheerio");

const fetchData = async () =&gt; {
&nbsp; const URL = "https://tukkytech.com/";
&nbsp; const result = await axios(URL);
&nbsp; const htmlParser = result.data;
&nbsp; const $ = cheerio.load(htmlParser);

&nbsp; // id="articles"の中のliタグを取得し、その中のh5タグとaタグのテキストを取得して出力する処理を繰り返す
&nbsp; $("#articles")
&nbsp; &nbsp; .find("li")
&nbsp; &nbsp; .each(function (i) {
&nbsp; &nbsp; &nbsp; const title = $(this).find("h5").text();
&nbsp; &nbsp; &nbsp; const url = $(this).find("a").attr("href");

&nbsp; &nbsp; &nbsp; console.log(`${title}\nhttps://tukkytech/${url}\n`);
&nbsp; &nbsp; });
};

fetchData();</code></pre><p><br><strong>出力結果</strong></p><pre><code>Cheerioを使用してWebスクレイピング
https://tukkytech.com/blog/nodejs-cheerio/

ACMにドメインを設定する
https://tukkytech.com/blog/aws-acm/

Next.js × microCMSで記事を全件取得する
https://tukkytech.com/blog/microcms-all-articles/

VSCodeにPrettierを設定する
https://tukkytech.com/blog/prettier-setting/

TypeScriptの学習に使用したいサイト
https://tukkytech.com/blog/typescript-learning/

~省略</code></pre><p><br></p><h3 id="h1784159259">要素の取得方法の例</h3><p><strong>$(selector)</strong><br>指定されたCSSセレクターに一致する最初の要素を返します。<br><br><strong>$(selector, context)</strong><br>指定されたCSSセレクターに一致する最初の要素を、指定されたコンテキスト内から検索して返します。<br><br><strong>$(selector, element)</strong><br>指定されたCSSセレクターに一致する最初の要素を、指定された要素内から検索して返します。<br><br><strong>$(element)</strong><br>指定されたHTML要素をCheerioオブジェクトに変換します。<br><br><strong>$(html)</strong><br>指定されたHTML文字列をCheerioオブジェクトに変換します。<br><br><strong>$(selector).attr(attributeName)</strong><br>指定された属性名の値を取得します。<br><br><strong>$(selector).text()</strong><br>指定された要素のテキストを取得します。<br><br><strong>$(selector).each(function)</strong><br>要素の集合を反復処理します。<br><br><strong>$(selector).find(selector)</strong><br>指定されたCSSセレクターに一致する要素を、指定された要素の子孫から検索して返します。<br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://cheerio.js.org/docs/intro" target="_blank" rel="noopener noreferrer">Cheerio Tutorial</a><br><br><br></p>

Cheerioを使用してWebスクレイピング

<p>AWS Certificate Managerで証明書を取得する手順です。<br></p><h3 id="hdbf98b940f">前提条件</h3><p>・独自ドメインを入手していること<br>・Route53に取得したドメインのホストゾーンが作成されていること<br></p><h3 id="hd506107865">証明書をリクエスト</h3><p>AWSマネジメントコンソールでAWS Certificate Managerにアクセスし、「証明書をリクエスト」をクリックします。<br>その後、「パブリック証明書をリクエスト」をクリックします。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/5e32c7d64b00401d883c9af0f4721cdc/aws-acm_1.png" alt=""><br><br>完全修飾ドメイン名に取得したドメイン名を入力します。<br>今後のためにサブドメインも使用したいため、以下では「*.[ドメイン名]」も設定します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/357533ea2aa64fc098a86d61f5a51a6d/aws-acm_2.png" alt=""><br></p><h3 id="h04045158a7">Route53にCNAMEレコードを追加</h3><p>証明書をリクエストすると、以下のように追加のアクションを求められますので、「証明書を表示」をクリックします。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/e15a6c4119aa4af68481072ed1b9f0e6/aws-acm_3.png" alt=""><br><br>「Route53でレコードを作成」をクリックします。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/2dac7735ac5b49c2a181c569c2ae778f/aws-acm_4.png" alt=""><br><br>以下のような表示なっていることを確認し、「レコードを作成」をクリックします。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/17df66daa19c4b8184c6cced3915f5a1/aws-acm_5.png" alt=""><br><br>証明書の一覧画面でステータスが「発行済み」となっていれば完了です。CloudFrontなどと組み合わせて使用できます。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/f7913a2aa5d84d6ea5ff41f7c1267b3c/aws-acm_6.png" alt=""><br><br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://aws.amazon.com/jp/certificate-manager/" target="_blank" rel="noopener noreferrer">AWS Certificate Manager</a><br><a href="https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/acm-overview.html" target="_blank" rel="noopener noreferrer">AWS Certificate Manager ユーザーガイド</a><br><br><br></p>

ACMにドメインを設定する

<p>Next.js × microCMSで記事を全件取得する方法です。<br>microCMSのデフォルトでは10件までしか記事を取得することができません。<br></p><h3 id="he5b38c3b93">記事の取得数を指定するメソッドの作成</h3><p>GETメソッドの引数の中にlimitを設定します。以下では100件取得できるようにしています。<br>件数の上限値はないようですが、<a href="https://document.microcms.io/content-api/get-list-contents#h4cd61f9fa1" target="_blank" rel="noopener noreferrer">公式サイト</a>によるとレスポンスサイズが5MBを超えるとエラーになるようです。<br>libs/client.js</p><pre><code>import { createClient } from 'microcms-js-sdk';

export const client = createClient({
&nbsp; &nbsp; serviceDomain: process.env.NEXT_PUBLIC_SERVICE_DOMAIN,
&nbsp; &nbsp; apiKey: process.env.NEXT_PUBLIC_API_KEY,
});

export const getAllContents = async (limit = 100, offset = 0) =&gt; {
&nbsp; &nbsp; const data = await client.get({
&nbsp; &nbsp; &nbsp; &nbsp; endpoint: 'blog',
&nbsp; &nbsp; &nbsp; &nbsp; queries: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; offset,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; limit,
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; });

&nbsp; &nbsp; return data.contents;
};</code></pre><p><br></p><h3 id="h2053feb3b8">作成したメソッドを適用</h3><p>上記で作成したメソッドを一覧画面と、記事詳細画面で使用します。<br>index.tsx</p><pre><code>〜省略
export const getStaticProps = async () =&gt; {
&nbsp; &nbsp; const contents = await getAllContents();

&nbsp; &nbsp; return {
&nbsp; &nbsp; &nbsp; &nbsp; props: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; blog: contents,
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; };
};</code></pre><p><br>blog/[id].tsx</p><pre><code>〜省略
export const getStaticPaths = async () =&gt; {
&nbsp; &nbsp; const contents = await getAllContents();

&nbsp; &nbsp; const paths = contents.map((content: { id: string }) =&gt; `/blog/${content.id}`);
&nbsp; &nbsp; return { paths, fallback: false };
};

export const getStaticProps = async (context: { params: { id: string } }) =&gt; {
&nbsp; &nbsp; const id = context.params.id;
&nbsp; &nbsp; const data = await client.get({ endpoint: 'blog', contentId: id });

&nbsp; &nbsp; return {
&nbsp; &nbsp; &nbsp; &nbsp; props: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; blog: data,
&nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; };
};</code></pre><p><br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://help.microcms.io/ja/knowledge/only-10contents-from-get-api" target="_blank" rel="noopener noreferrer">リスト形式のAPIでGET APIから10件しかコンテンツを取得できません</a><br><a href="https://waml.dev/blog/nextjs-4" target="_blank" rel="noopener noreferrer">【2023】microCMSでAPI GET request数が10件だったのを100件に変更した</a><br><br></p>

Next.js × microCMSで記事を全件取得する

<p>自動コードフォーマッター「Prettier」（プリティア）をVSCodeに設定する方法です。<br></p><h3 id="h99c2cec637">Prettierのインストール</h3><p>VSCodeの拡張機能からPrettierをインストールします。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/44703c0b143447a79235a572501af9b9/prettier-setting_1.png" alt=""><br></p><h3 id="hec540a8f29">ファイル保存時に自動でPrettierを発動</h3><p>設定の「Format On Save」にチェックします。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/32aa2519b0af4a1f916c38801cc51e91/prettier-setting_2.png" alt=""><br><br>設定の「Default Formatter」をPrettierに設定に設定します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/03c97195e3e949fa9a18dacd02cc2273/prettier-setting_3.png" alt=""><br><br>※setting.jsonに以下のように記述を追加してもOKです。</p><pre><code>{
&nbsp; &nbsp; "editor.formatOnSave": true,
&nbsp; &nbsp; "editor.defaultFormatter": "esbenp.prettier-vscode"
}</code></pre><p><br></p><h3 id="h7cb296e785">Prettierの詳細設定を変更する</h3><p>プロジェクトのルートディレクトリに.prettierrc.jsonを作成します。<br>以下は設定の例です。</p><pre><code>{
&nbsp; &nbsp; "printWidth": 100,
&nbsp; &nbsp; "trailingComma": "es5",
&nbsp; &nbsp; "tabWidth": 4,
&nbsp; &nbsp; "semi": true,
&nbsp; &nbsp; "singleQuote": true,
&nbsp; &nbsp; "endOfLine": "lf"
}</code></pre><p><strong>printWidth</strong><br>折り返す行の長さを指定<br><br><strong>trailingComma</strong><br>末尾のカンマの設定（”es5”はES5で有効な末尾のカンマ）<br><br><strong>tabWidth</strong><br>インデントのスペースの数を指定<br><br><strong>useTabs</strong><br>スペースではなくタブで行をインデント<br><br><strong>semi</strong><br>ステートメントの最後にセミコロンを追加<br><br><strong>singleQuote</strong><br>ダブルクォートの代わりにシングルクォートを使用<br><br><strong>endOfLine</strong><br>改行の文字コードを指定<br></p><h3 id="h6fef67aa09">Prettierのフォーマットから除外する</h3><p>ファイルごと除外したい場合、.prettierignoreファイルを作成して以下のようにファイルを記述します。</p><pre><code>package.json
package-lock.json</code></pre><p><br>対象の行だけprettierを効かせたくない場合は以下のように記述します。<br>（「この1行だけは長くなるけど自動改行させたくない！」といった時に使います）</p><pre><code>// prettier-ignore
const longlongArray = 'aaaaaaaaaaabbbbbbbbbbccccccccccddddddddddeeeeeeeeeeffffffffffggggggggggg'</code></pre><p><br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://prettier.io/docs/en/index.html" target="_blank" rel="noopener noreferrer">Prettier Docs</a></p>

VSCodeにPrettierを設定する

<p>TypeScriptの学習に使用したいサイトまとめです。<br></p><h3 id="h153b9d68d3">サバイバルTypeScript</h3><p><a href="https://typescriptbook.jp/" target="_blank" rel="noopener noreferrer">サバイバルTypeScript</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/27340fac462648e9b3553da1a7cab121/typescriptbook.png" alt=""><br></p><h3 id="hc4967e7a67">TypeScript Deep Dive</h3><p><a href="https://typescript-jp.gitbook.io/deep-dive/" target="_blank" rel="noopener noreferrer">TypeScript Deep Dive</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/c3e4068720dd44a5afd7087eab30587b/typescript-deep-dive.png" alt=""><br></p><h3 id="heb475bdc42">仕事ですぐに使えるTypeScript</h3><p><a href="https://future-architect.github.io/typescript-guide/" target="_blank" rel="noopener noreferrer">仕事ですぐに使えるTypeScript</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/2869f48710694d6b8156fac99defe307/typescript-guide.png" alt=""><br></p><h3 id="h56293771ff">TypeScript CheetSheet</h3><p><a href="https://www.typescriptlang.org/cheatsheets" target="_blank" rel="noopener noreferrer">TypeScript CheetSheet</a><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/23971969584f40059cb1539e0638a362/typescript_cheatsheets.png" alt=""></p>

TypeScriptの学習に使用したいサイト

<p>Day.jsを使用する際のメモです。<br>関連記事：<a href="https://tukkytech.com/blog/date-fns/" target="_blank" rel="noopener noreferrer">date-fnsを使用する</a><br></p><h3 id="heeb2a1e476">npm install</h3><pre><code>npm install dayjs</code></pre><p><br></p><h3 id="h01865f3755">日付のフォーマット例</h3><pre><code>// ES5以前
const dayjs = require('dayjs');
// ES2015(ES6)以降
import dayjs from 'dayjs';

const month = dayjs().format('YYYYMM');
const monthStart = dayjs().startOf('month').format('YYYY-MM-DD');
const today = dayjs().format('YYYY-MM-DD');
const now = dayjs().format('YYYYMMDDHHmmss');&nbsp;</code></pre><p><br></p><h3 id="h49001ddcb0">主な使用例</h3><p><strong>dayjs()</strong><br>現在の日時を取得<br><br><strong>dayjs(dateString)</strong><br>引数で指定した日時を取得<br><br><strong>dayjs.unix(timestamp)</strong><br>Unixタイムスタンプを指定して日時を取得<br><br><strong>dayjs().format(formatString)</strong><br>日時を指定したフォーマットの文字列に変換<br><br><strong>dayjs().year()</strong><br>年を取得<br><br><strong>dayjs().month()</strong><br>月を取得(0から11)<br><br><strong>dayjs().date()</strong><br>日を取得<br><br><strong>dayjs().day()</strong><br>曜日を取得(0から6、0が日曜日)<br><br><strong>dayjs().hour()</strong><br>時を取得<br><br><strong>dayjs().minute()</strong><br>分を取得<br><br><strong>dayjs().second()</strong><br>秒を取得<br><br><strong>dayjs().millisecond()</strong><br>ミリ秒を取得<br><br><strong>dayjs().add(amount,unit)</strong><br>指定した時間だけ加算<br><br><strong>dayjs().subtract(amount,unit)</strong><br>指定した時間だけ減算<br><br><strong>dayjs().startOf(unit)</strong><br>指定した単位での開始日時を取得<br><br><strong>dayjs().endOf(unit)</strong><br>指定した単位での終了日時を取得<br><br><strong>dayjs().isBefore(date)</strong><br>引数で指定した日時よりも前かどうか判定<br><br><strong>dayjs().isSame(date)</strong><br>引数で指定した日時と同じかどうか判定<br><br><strong>dayjs().isAfter(date)</strong><br>引数で指定した日時よりも後かどうか判定<br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://day.js.org/docs/en/installation/installation" target="_blank" rel="noopener noreferrer">day.js</a><br></p>

Day.jsを使用する

<h3 id="he3f04f1337">Playwrightとは</h3><p>Node.js 上で動作するブラウザ自動化ツールです。ブラウザを自動化することで、Web スクレイピング、Web テスト、Web アプリケーションの UI テストなどに利用可能です。<br>簡単なコードで Web スクレイピングや Web テストなどを実現できます。<br></p><h3 id="h5d3b8c3d80">npmインストール</h3><pre><code># playwright用のブラウザのインストール
npx playwright install

# npm install
npm install playwright</code></pre><p><br></p><h3 id="he84373408d">Google検索結果の取得</h3><p>以下はGoogle検索結果の検索結果を出力するサンプルソースです。</p><pre><code>import { chromium } from 'playwright';

(async () =&gt; {
&nbsp; &nbsp; const browser = await chromium.launch();
&nbsp; &nbsp; const page = await browser.newPage();
&nbsp; &nbsp; await page.goto('https://www.google.com/');
&nbsp; &nbsp; await page.type('input[name="q"]', 'Playwright');
&nbsp; &nbsp; await page.press('input[name="q"]', 'Enter');
&nbsp; &nbsp; await page.waitForSelector('#search');
&nbsp; &nbsp; const searchResults = await page.$$eval('#search .g', (results) =&gt;
&nbsp; &nbsp; &nbsp; &nbsp; results.map((result) =&gt; ({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: result.querySelector('h3').textContent,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: result.querySelector('a').href,
&nbsp; &nbsp; &nbsp; &nbsp; }))
&nbsp; &nbsp; );
&nbsp; &nbsp; console.log(searchResults);
&nbsp; &nbsp; await browser.close();
})();</code></pre><p><br></p><h3 id="hc916f67d13">操作した内容の記録</h3><p>以下を実行することで操作した内容を記録することができます。記録内容からPlaywrightの使用方法を研究できます。</p><pre><code>npx playwright codegen https://tukkytech.com</code></pre><p><br></p><h3 id="h44e51f96ce">参考資料</h3><p><a href="https://playwright.dev/docs/intro" target="_blank" rel="noopener noreferrer">Playwright Docs</a><br><a href="https://zenn.dev/optimisuke/articles/f38ea76006d3a6" target="_blank" rel="noopener noreferrer">Playwright 入門</a><br><br></p>

Playwrightを使用する

<p>使用したいパッケージのnpm install前後に確認しておきたい内容です。<br></p><h3 id="h0fbd80352e">npm公式サイト</h3><p><a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">npm</a><br>公式サイトで以下の情報は確認しておきたいです。<br>・ライセンス<br>・週間インストール数<br>・更新頻度と最終更新日<br></p><h3 id="ha421048148">npm trends</h3><p><a href="https://npmtrends.com/" target="_blank" rel="noopener noreferrer">npm trends</a><br>検索すれば、直近のインストール数の繊維を確認できます。<br>似たパッケージと比較することもできるため、本当にそのパッケージの使用でよいか確認したいときにも使用できます。<br></p><h3 id="hc7c2bb6860">公式ドキュメントの確認</h3><p>インストール後に以下のコマンドをターミナルで実行すると、公式ドキュメントが存在する場合は表示してくれます。</p><pre><code>npm docs [パッケージ名]</code></pre><p><br></p><h3 id="h02d0ce40cd">バグの確認</h3><p>インストール後に以下のコマンドをターミナルで実行すると、バグの確認ができます。</p><pre><code>npm bugs [パッケージ名]</code></pre><p><br><br><br></p>

npmインストール前後でチェックしておきたいこと

<p>お名前.comで取得したドメインをRoute53に設定する方法です。<br></p><h3 id="hdbf98b940f">前提条件</h3><p>・AWSアカウントを持っていること<br>・お名前.comでドメインを取得していること<br></p><h3 id="h0b1e0ac4e6">Route53にホストゾーンを設定</h3><p>AWSにログインし、「Rout53」 &gt; 「ホストゾーンの作成」とし、お名前.comで取得したドメインでホストゾーンを作成します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/a9643b00f5824d8b860d5ba4e0fd1bb9/onamae-domain_1.png" alt=""><br><br>作成できたら、以下4種類のNSレコードの値を控えます。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/fe4e6bee7e514fca900a33bf7f3a8435/onamae-domain_2.png" alt=""><br></p><h3 id="h8c40aaee1b">お名前.comでネームサーバーを変更</h3><p><a href="https://www.onamae.com/" target="_blank" rel="noopener noreferrer">お名前.com</a>にログインし、タブメニューから「ネームサーバーの設定」にアクセスします。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/1f0e13f1c0254d4692faec8e37600518/onamae-domain_3.png" alt=""><br><br>「ドメイン設定」で対象のドメインをチェックし、下部のタブで「他のネームサーバーを利用」を選択します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/3f64b307395a4a7bbd56450885bab824/onamae-domain_4.png" alt=""><br><br>1~4のネームサーバーに、Route53で控えたNSレコードをコピペし、「確認画面へ進む」をクリックします。<br>※このとき、各項目の最後に「.」（ピリオド）が入らないように気をつけます<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/a176a06ec328403d8b15bb23b78d73eb/onamae-domain_5.png" alt=""><br><br>内容に問題がなければ、「設定する」をクリックします。<br>反映まで数時間~72時間かかることがあるとのことですが、数分で反映されていることもよくあります。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/1c8f7c4dceb846708d995d087fd36996/onamae-domain_6.png" alt=""><br></p><h3 id="h000506d1de">設定したドメインの使用例</h3><p>以下は事前に作成したCloudFrontディストリビューションにドメインを割り当てる方法です。<br>「ホストゾーン」 &gt; 「レコードを作成」に進み、トラフィックのルーティング先を「CloudFrontディストリビューションへのエイリアス」として設定します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/dda71c8326924184bfa342acfdd7f5ca/onamae-domain_7.png" alt=""><br><br></p>

お名前.comで取得したドメインをRoute53に設定

<p>よく使うトップレベルドメイン（以下TLD）とその意味についての解説です。TLDとは、「.com」や「.jp」など、インターネットで使われるドメイン名の最上位レベル（一番右のやつ）のドメイン名を指します。<br>例えば「test.example.com」の場合、TLDは「.com」となります。<br><br><strong>.com</strong><br>商用目的のウェブサイト向けのTLD。ただし、個人サイトや非営利団体も利用している。<br><br><strong>.net</strong><br>ネットワーク関連の組織向けのTLD。現在は商用ウェブサイトにも使用されている。<br><br><strong>.jp</strong><br>日本の国別コードトップレベルドメイン (ccTLD)。日本国内のウェブサイト向け。<br>※ccTLDとは、「Country Code Top Level Domain」の略称で、国や地域ごとに割り当てられたTLDのこと<br><br><strong>.co.jp</strong><br>日本の企業向けのドメイン。通常、商用ウェブサイトに使用される。<br><br><strong>.inc</strong><br>インコーポレーテッド (株式会社) 企業向けのドメイン。<br><br><strong>.org</strong><br>非営利団体や組織向けのTLD。<br><br><strong>.xyz</strong><br>汎用TLD。個人、企業、団体問わず使用される。<br><br><strong>.shop</strong><br>オンラインショッピングや小売業者向けのドメイン。<br><br><strong>.click</strong><br>汎用TLD。特定の業界や目的に制限されず、広く使用される。<br><br><strong>.site</strong><br>汎用TLD。個人、企業、団体問わず使用される。<br><br><strong>.tokyo</strong><br>東京を対象とした地域トップレベルドメイン (gTLD)。<br><br><strong>.ai</strong><br>アンギラ政府のccTLDだが、人工知能関連のウェブサイトで広く使用されている。<br><br><strong>.blog</strong><br>ブログや個人的なウェブサイト向けのドメイン。<br><br><strong>.online</strong><br>オンラインサービスや活動に関連したウェブサイト向けのドメイン。<br><br><strong>.asia</strong><br>アジア地域に関連するウェブサイト向けのgTLD。<br><br><strong>.mom</strong><br>育児やマタニティ関連のウェブサイト向けのドメイン。<br><br><strong>.art</strong><br>芸術や文化関連のウェブサイト向けのドメイン。<br><br><strong>.life</strong><br>様々なライフスタイルや人生に関連したウェブサイト向けのドメイン。<br><br><strong>.info</strong><br>情報提供やニュースサイト向けのドメイン。<br><br><strong>.work</strong><br>仕事や職業に関連するウェブサイト向けのドメイン。<br><br><strong>.link</strong><br>ウェブリンクやリソースを共有するサイト向けのドメイン。<br><br><strong>.biz</strong><br>ビジネスや商業関連のウェブサイト向けのドメイン。<br><br>.<strong>me</strong><br>個人向けのドメイン。<br></p>

よく使うトップレベルドメインとその意味

<p>JavaScriptで数字とアルファベットのランダムな値を作成する方法です。<br>パスワードの自動生成などに使用できます。<br></p><h3 id="hdd01e40708">ランダムな文字列の作成</h3><pre><code>const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
const STR_LENGTH = 8;

let random_str = "";
for (let i = 0; i &lt; STR_LENGTH; i++) {
&nbsp; random_str += CHARS.charAt(Math.floor(Math.random() * CHARS.length));
}

console.log(random_str);
//6Wt0yz0X</code></pre><p>CHARS：生成するランダム文字列に含めたい文字<br>STR_LENGTH&nbsp;：生成する文字列の長さ</p>

JavaScriptで数字とアルファベットのランダムな値を作成

<p>JavaScriptでは、値が存在しないか、無効な状態を示すためにNullishとFalsyというカテゴリが使用されます。バグや予期しない動きを防止するために理解しておきたい概念です。<br></p><h3 id="h912dc10edb">Nullish</h3><p>Nullishは、値が存在しないことを示すために使用されます。<br>JavaScriptでは、主に以下の2つの値がNullishです。<br><br><strong>1. null</strong><br>明示的に値が存在しないことを示す値。<br><strong>2. undefined</strong><br>値がまだ割り当てられていない変数や、存在しないオブジェクトのプロパティ、引数が渡されなかった関数パラメータなどに自動的に割り当てられる値。<br><br>■例外処理</p><pre><code>// xxxがundefinedまたはnullだった場合は"Nullish"を出力
const hoge = xxx ?? "Nullish";
console.log(hoge);</code></pre><p>※??は、null合体演算子（Nullish Coalescing Operator）と呼ばれ、左がnullishである場合に右の値を返し、nullishでない場合は、左の値がそのまま返されます。<br><br></p><h3 id="h4dcf34c3d0">Falsy</h3><p>Falsyは、真偽値としてfalseと評価される値です。<br>JavaScriptでは、以下の値がFalsyです。<br><br><strong>1. false</strong><br>真偽値のfalseそのもの。<br><strong>2. 0</strong><br>数値のゼロ。<br><strong>3. -0</strong><br>数値のマイナスゼロ。<br><strong>4. NaN</strong><br>"Not a Number"を表す特殊な数値。<br><strong>5. ""</strong><br>空の文字列。<br><strong>6. null</strong><br>値が存在しないことを示す値。<br><strong>7. undefined</strong><br>値がまだ割り当てられていないことを示す値。<br><br>■例外処理</p><pre><code>// xxxがFalsyな値だった場合は"Falsy"を出力
const hoge = xxx || "Falsy";
console.log(hoge);</code></pre><p><br></p>

JavaScriptのNullishとFalsy

<p>Next.jsでOGPタグを設定する方法です。<br></p><h3 id="haceb0c8044">next/head をインポート</h3><p>headタグを設定するためにファイル上部で以下をインポートします。</p><pre><code>import Head from 'next/head';</code></pre><p><br></p><h3 id="ha0969b0407">OGPタグの設定</h3><p>以下は_document.tsxに記述する場合の例です。<br>全画面共有のheadタグとなります。</p><pre><code>import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
    return (
        &lt;Html lang="ja"&gt;
            &lt;Head /&gt;
            &lt;title&gt;Tukky Tech Blog&lt;/title&gt;
            &lt;meta name="description" content="Jam Stackで作成したBlogです。" /&gt;
            &lt;meta property="og:title" content="Tukky Tech Blog" /&gt;
            &lt;meta property="og:description" content="Jam Stackで作成したBlogです。" /&gt;
            &lt;meta property="og:type" content="website" /&gt;
            &lt;meta property="og:url" content="" /&gt;
            &lt;meta property="og:image" content="" /&gt;
            &lt;meta property="og:locale" content="ja_JP" /&gt;
            &lt;meta property="og:site_name" content="Tukky Tech Blog" /&gt;
            &lt;body&gt;
                &lt;Main /&gt;
                &lt;NextScript /&gt;
            &lt;/body&gt;
        &lt;/Html&gt;
    );
}</code></pre><p><br></p><h3 id="h7f674cd7c5">OGP (Open Graph Protocol) タグとは</h3><p>OGP（Open Graph Protocol）は、ウェブページの情報を外部サービスがより適切に解析し、表示できるようにするためのメタデータを提供するプロトコルです。<br>Facebookが開発し、現在ではTwitterやLinkedInなど多くのプラットフォームでサポートされています。<br><br>以下のような情報が設定されることでリンクがシェアされた際、ウェブページのコンテンツがより魅力的な形で表示されるため、ユーザがコンテンツをクリックする可能性が高まります。<br><br>・タイトル (og:title)<br>・説明 (og:description)<br>・タイプ（記事、ビデオ、ウェブサイトなど） (og:type)<br>・URL (og:url)<br>・画像 (og:image)<br>・サイト名 (og:site_name)<br>・言語 (og:locale)<br><br></p>

Next.jsでOGPタグを設定

<p>Next.jsで画像を設定しようとしたとき、以下のエラーが発生する場合の対処方法です。<br><br><span style="color:#eb5757">型 'StaticImageData' を型 'string' に割り当てることはできません。ts(2322)</span><br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/bf0f6e4e4dbb4128881c3dc13eba939a/nextjs-image-error.png" alt=""><br></p><pre><code>import blog from '../../images/blog.png';

&lt;img src={blog} className="h-10 w-10" alt="" /&gt;</code></pre><h2 id="hcf83e1357e"><br></h2><h3 id="had0b1b94af">解決方法</h3><p>xxx.srcと記述します。かんたん。</p><pre><code>import blog from '../../images/blog.png';

&lt;img src={blog.src} className="h-10 w-10" alt="" /&gt;</code></pre><p><br></p>

「型 'StaticImageData' を型 'string' に割り当てることはできません。」エラー対処法

<p>Next.jsでFont Awesomeを使用する方法です。<br></p><h3 id="heeb2a1e476">npm install</h3><p>以下をnpmインストールします。</p><pre><code>npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/react-fontawesome@latest</code></pre><p><br></p><h3 id="h9d7a26589a"> サンプルソース</h3><p>以下のように使用します。<br>「faArrowLeft」部分は適宜<a href="https://fontawesome.com/icons" target="_blank" rel="noopener noreferrer">アイコン検索</a>で探して記述します。</p><pre><code>import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";

export default function FontAwesome() {
&nbsp; return (
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &lt;FontAwesomeIcon icon={faArrowLeft} /&gt;
&nbsp; &nbsp; &nbsp; アイコン表示
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
}</code></pre><p><br></p><h3 id="h5f819494ee">本番環境でアイコンが表示されない場合</h3><p>/pages/_app.jsに以下を記述します。</p><pre><code>import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false</code></pre><p><br></p><h3 id="he45680f0bc">参考記事</h3><p><a href="https://fontawesome.com/docs/web/use-with/react/" target="_blank" rel="noopener noreferrer">Set Up with React（Font Awesome）</a><br><a href="https://fontawesome.com/icons" target="_blank" rel="noopener noreferrer">Find Icons（Font Awesome）</a><br><a href="https://fontawesome.com/v5/docs/web/use-with/react#next-js" target="_blank" rel="noopener noreferrer">Getting Font Awesome CSS to work（Font Awesome）</a></p>

Next.jsでFont Awesomeを使用

<p>TailwindCSS使用中によく使用するリンク集です。<br></p><h3 id="h6b48a688f7">TailwindCSS公式サイト</h3><p><a href="https://tailwindcss.com/docs/installation" target="_blank" rel="noopener noreferrer">TailwindCSS公式サイト</a><br>なんだかんだで公式サイトを一番確認します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/b8682cb4494d45919e3162186ec8fe26/tailwind-doc.png" alt=""><br></p><h3 id="h38a9b0a7aa">Customizing Colors</h3><p><a href="https://tailwindcss.com/docs/customizing-colors" target="_blank" rel="noopener noreferrer">Customizing Colors</a><br>公式サイトの中でもTailwindCSSで「どんな色が使用できたかなー」と確認する際に使用します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/2ec49d30d5114498bc34f7d9ad37293f/tailwind-customizing-colors.png" alt=""><br></p><h3 id="h9807820e77">Flowbite - Tailwind CSS component library</h3><p><a href="https://flowbite.com/docs/getting-started/introduction/" target="_blank" rel="noopener noreferrer">Flowbite - Tailwind CSS component library</a><br>TailwindCSSで作成されたコンポーネントを探すときに使用します。<br>MITライセンスのため無料で使用できます。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/22ead945df2a490182ee8375e99e29d6/tailwind-flowbite.png" alt=""><br></p><h3 id="hd2f565b11f">Tailwind CSS Cheat Sheet</h3><p><a href="https://flowbite.com/tools/tailwind-cheat-sheet/" target="_blank" rel="noopener noreferrer">Tailwind CSS Cheat Sheet</a><br>TailwindCSSのチートシートです。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/3a4f97cfc4924b3285fce55062899894/tailwind-cheat-sheet.png" alt=""><br></p><h3 id="hc53425bd27">Tailanimista</h3><p><a href="https://tail-animista.vercel.app/play/basic/scale-up/scale-up-center" target="_blank" rel="noopener noreferrer">Tailanimista</a><br>TailwindCSSでアニメーションを作成するときに参考にします。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/c1eb7365e75f4a288c0368dcc5870bbe/tailwind-animista.png" alt=""></p>

TailwindCSS使用中に見返すリンク集

<p>microCMSで取得した記事情報のコード部分にシンタックスハイライトを追加する処理です。<br>※シンタックスハイライト...プログラムのソースコードを、視覚的に分かりやすくするために行われる、色分けや文字の太字化などの装飾のこと<br></p><h3 id="h5d3b8c3d80">npmインストール</h3><pre><code>npm i cheerio
npm i highlight.js</code></pre><p><br></p><h3 id="h2f40bccd99">[id].tsxの記述</h3><pre><code>import { load } from 'cheerio';
import hljs from 'highlight.js';
import 'highlight.js/styles/hybrid.css';

export default function BlogId({ blog }: any) {
    return (
    〜省略〜
        &lt;div
            className="mt-5"
            dangerouslySetInnerHTML={{
                __html: `${blog.body}`,
            }}
        /&gt;
    〜省略〜
  );
}

export const getStaticProps = async (context: { params: { id: string } }) =&gt; {
    const id = context.params.id;
    const data = await client.get({ endpoint: 'blog', contentId: id });

    // シンタックスハイライト
    const $ = load(data.body);
    $('pre code').each((_, elm) =&gt; {
        const result = hljs.highlightAuto($(elm).text());
        $(elm).html(result.value);
        $(elm).addClass('hljs');
    });
    data.body = $.html();

    return {
        props: {
            blog: data,
        },
    };
};</code></pre><p><br></p><h3 id="h397e38daae">補足</h3><p>以下の部分は<a href="https://highlightjs.org/static/demo/" target="_blank" rel="noopener noreferrer">デモサイト</a>から好きな色付けを探すことができます。</p><pre><code>import 'highlight.js/styles/hybrid.css';</code></pre><p><br>上記dataの「body」としている部分はmicroCMSでリッチエディタ部分として設定した名前を設定します。<br><img src="https://images.microcms-assets.io/assets/fe77dc645a1f47da866aa45a3b14b5fb/8ba2b078a6264b7cab606cd2c1e9b63d/microcms_body.png" alt=""><br></p><h3 id="h03e7af0d39">参考リンク</h3><p><a href="https://codeseterpie.com/blog/3yejihpoc/" target="_blank" rel="noopener noreferrer">microCMS + Next.jsでシンタックスハイライトを行う</a><br><br></p>

microCMS × Next.jsでシンタックスハイライト

<p>TypeScriptでnew Set[...array]を使用しようとしたとき、<br>以下のエラーが表示されました。<br><br><span style="color:#eb5757">'Set&lt;unknown&gt;' の種類は、'--downlevelIteration' フラグを使用している場合、または 'es2015' 以降の '--target' を使用している場合にのみ反復処理できます。</span><br><br></p><h3 id="had0b1b94af">解決方法</h3><p>tsconfig.jsonに"downlevelIteration": trueを追加します。</p><pre><code>{
&nbsp;"compilerOptions": {
&nbsp;&nbsp;"target": "es2015",
&nbsp;&nbsp;"downlevelIteration": true // 追加
&nbsp;}
}</code></pre><p><br></p><h3 id="h21cfa6eab8">上記設定が必要な理由</h3><p>ChatGPTに質問すると、以下のように説明されました。<br>ES2015以降の<code>for...of</code>ループを使用できるようにするための記述のようです。<br></p><blockquote><code>Set&lt;unknown&gt;</code>型が反復処理できない理由は、TypeScriptがES2015より前のバージョンのJavaScriptに変換する際に、反復処理に使用されるJavaScriptの構文が変更されたためです。<br>具体的には、ES2015以前のJavaScriptでは、反復処理のために<code>for...of</code>ループを使用することができませんでした。代わりに、<code>for...in</code>ループが使用されていました。しかし、<code>for...in</code>ループはオブジェクトのプロパティを列挙するために設計されており、SetやMapなどのコレクションオブジェクトの要素を列挙するために使用すると、望ましくない振る舞いを示す可能性があります。<br>ES2015では、新しい反復プロトコルが導入され、<code>for...of</code>ループが導入されました。<code>for...of</code>ループは、反復可能なオブジェクト（ArrayやSetなど）から要素を順番に取り出して反復するために設計されています。<br><code>--downlevelIteration</code>フラグを使用することで、TypeScriptコンパイラはES2015以降のJavaScriptに変換することができ、<code>for...of</code>ループを使用してSetやMapなどの反復可能なオブジェクトを反復処理できるようになります。</blockquote><p><br></p>