ウェブ制作 Next.js App Routerとカスタムメタデータの追加方法
Next.jsのApp Routerを使ってサイト運営を始めたら、SEO効果を高めるためにさまざまなメタタグの追加にチャレンジすることになるでしょう。特に、TypeScriptを駆使してMetadataの型定義を活用する場面では、gener...
東條 はる
ウェブ制作 ウェブ制作 Next.jsでPrettierを使ってコード整形を行う方法
前提条件 Prettier の設定は既にしておく ↓Next.jsの場合はこの記事を参考 必要モジュールのインストール yarn add -D stylelint stylelint-config-prettier stylelint-co...
ウェブ制作 Next.jsでprettierの設定
Next.jsでprettierを設定する最低限の設定をまとめます。 モジュールのインストール yarn add -D eslint-config-prettier prettier @typescript-eslint/parser .e...
ウェブ制作 CSS Modulesで本格的に業務で使って思ったことのメモ
CSS Modulesは、React.jsをはじめとするフロントエンドのフレームワークでのスタイル適用において、非常に人気のある方法となっています。しかし、実際に業務で使用する際には、いくつかの注意点やベストプラクティスが存在します。本記事...
ウェブ制作 Astro × React.js: useContextの問題とnanostoresを使った解決策
はる Astroは、モダンなフロントエンド開発のための新しい静的サイトジェネレータです。しかし、AstroとReact.jsを組み合わせて使用する際に、ReactのuseContextが期待通りに動作しないことがあります。この記事では、その...
ウェブ制作 Astro環境【scss】Stylelint設定 CSSプロパティーの自動設定まで
はる Astro環境で、Stylelintの設定をして自動でCSSのプロパティーを整列してくれるようにする設定をメモメモ！Astro環境以外も同じですが私がよくAstroを使うのでその設定に一部なってますがよしなに調整してください。 前提条...
ウェブ制作 フロントエンド開発者のための一般的な変数命名規則
はる フロントエンジニアが使う言語で変数名を作るときに一般的な命名規則をまとめました。 言語と使用時の例 JavaScript / TypeScript 変数名 キャメルケース (camelCase) JavaScript および Type...
ウェブ制作 Google スプレッドシートのデータを複数タブ対応で JSON 形式でダウンロードする方法
はる Google スプレッドシートのデータを JSON 形式でダウンロードしたいと思ったことはありますか？ この記事では、Google スプレッドシートのデータを複数シート対応で JSON 形式でダウンロードする方法を紹介します。 シート...
ウェブ制作 AstroプロジェクトでPrettierを使ってコード整形を行う方法
はる AstroプロジェクトでPrettierを使って、コード整形を行う方法について解説します。Prettierは、コードの書式を自動で整えるツールであり、コードの読みやすさや一貫性を向上させます。 Prettierとprettier-pl...
ウェブ制作 Astroプロジェクトでエイリアスを設定する方法
はる Astroは、高速な静的サイトジェネレーターで、モダンなWeb開発のためのツールです。今回は、Astroプロジェクトでエイリアスを設定する方法を解説します。 エイリアス設定するとなにがいいのか エイリアスを使うことで、相対パスを使わず...
ウェブ制作 Astroビルド先の変更方法！手順とポイントを解説
はる Astroをメインの開発環境に移行していってるはるです。いろんな環境でAstroを使っています。ビルド先を変更したい時の設定を紹介します。 今回のやりたいこと Astroのフォルダはresourceフォルダ（resource/bar/...
ウェブ制作 Rancher Desktopでパソコンの容量を圧迫するバグの対処法
はる 使用していたMacが急に動作が重くなり、調べたらRancher Desktopのバグで1TBの容量がログファイルでパンパンになっていた時の対処法メモです。 原因の発覚 Mac Book Proの1TBを使っていたが、急にその１TBの容...