ウェブ制作Next.jsでPrettierを使ってコード整形を行う方法
前提条件Prettierの設定は既にしておく↓Next.jsの場合はこの記事を参考必要モジュールのインストールyarnadd-Dstylelintstylelint-config-prettierstylelint-config-reces...
ウェブ制作ウェブ制作Next.jsでprettierの設定
Next.jsでprettierを設定する最低限の設定をまとめます。モジュールのインストールyarnadd-Deslint-config-prettierprettier@typescript-eslint/parser.eslintrc....
ウェブ制作CSS Modulesで本格的に業務で使って思ったことのメモ
CSSModulesは、React.jsをはじめとするフロントエンドのフレームワークでのスタイル適用において、非常に人気のある方法となっています。しかし、実際に業務で使用する際には、いくつかの注意点やベストプラクティスが存在します。本記事で...
ウェブ制作Astro × React.js: useContextの問題とnanostoresを使った解決策
はるAstroは、モダンなフロントエンド開発のための新しい静的サイトジェネレータです。しかし、AstroとReact.jsを組み合わせて使用する際に、ReactのuseContextが期待通りに動作しないことがあります。この記事では、その問...
ウェブ制作Astro環境【scss】Stylelint設定 CSSプロパティーの自動設定まで
はるAstro環境で、Stylelintの設定をして自動でCSSのプロパティーを整列してくれるようにする設定をメモメモ！Astro環境以外も同じですが私がよくAstroを使うのでその設定に一部なってますがよしなに調整してください。前提条件P...
ウェブ制作フロントエンド開発者のための一般的な変数命名規則
はるフロントエンジニアが使う言語で変数名を作るときに一般的な命名規則をまとめました。言語と使用時の例JavaScript/TypeScript変数名キャメルケース(camelCase)JavaScriptおよびTypeScriptでは、キャ...
ウェブ制作Google スプレッドシートのデータを複数タブ対応で JSON 形式でダウンロードする方法
はるGoogleスプレッドシートのデータをJSON形式でダウンロードしたいと思ったことはありますか？この記事では、Googleスプレッドシートのデータを複数シート対応でJSON形式でダウンロードする方法を紹介します。シートの用意まず、スプレ...
ウェブ制作AstroプロジェクトでPrettierを使ってコード整形を行う方法
はるAstroプロジェクトでPrettierを使って、コード整形を行う方法について解説します。Prettierは、コードの書式を自動で整えるツールであり、コードの読みやすさや一貫性を向上させます。Prettierとprettier-plug...
ウェブ制作Astroプロジェクトでエイリアスを設定する方法
はるAstroは、高速な静的サイトジェネレーターで、モダンなWeb開発のためのツールです。今回は、Astroプロジェクトでエイリアスを設定する方法を解説します。エイリアス設定するとなにがいいのかエイリアスを使うことで、相対パスを使わずにモジ...
ウェブ制作Astroビルド先の変更方法！手順とポイントを解説
はるAstroをメインの開発環境に移行していってるはるです。いろんな環境でAstroを使っています。ビルド先を変更したい時の設定を紹介します。今回のやりたいことAstroのフォルダはresourceフォルダ（resource/bar/）に入...
ウェブ制作Rancher Desktopでパソコンの容量を圧迫するバグの対処法
はる使用していたMacが急に動作が重くなり、調べたらRancherDesktopのバグで1TBの容量がログファイルでパンパンになっていた時の対処法メモです。原因の発覚MacBookProの1TBを使っていたが、急にその１TBの容量がほぼパン...
ウェブ制作Rancher Desktop に切り替えたけど ポート80と433が使えなくて困った時の対処法
はるDockerDesktopを使用していたが、有料化に伴いRancherDesktopへ切り替えることにしました。そこで、デフォルトで80と443ポートが使用されておりそれの解除方法を紹介します。現象DockerDesktopをアンインス...