ウェブ制作 React Native Expo 環境で GraphQL 型の自動生成を設定する方法
はる React Native Expo プロジェクトが既にセットアップしていて、@apollo/client を使って、useQuery や gql を使用してGraphQLのデータを取得するコードが動作していました。そこからGraphQ...
ウェブ制作 
ウェブ制作 Expo環境にReact Native Paperを導入する初期設定の方法
はる ExpoとReact Native Paperを組み合わせて、カスタマイズ可能なテーマを設定し、アプリ全体に適用する方法をご紹介します。React Native Paperは、GoogleのMaterial Designをベースにした...
ウェブ制作 簡単にできる！React Native + ExpoでESLintとPrettierを設定してコードの一貫性を保つ方法
はる 今回は、npx create-expo-app でReact Native + Expoプロジェクトを作成し、npm run reset-project で環境を整えた状態からスタートし、コードの品質を保つためのESLintとコード整...
ウェブ制作 WordPressでカスタム投稿タイプに合わせて『抜粋』のラベルを変更する方法
1. はじめに WordPressのカスタム投稿タイプを使っていると、「抜粋」フィールドのラベルがわかりにくいと感じることがあります。特にこのフィールドを description として利用している場合、その関連性をユーザーに伝えるためにラ...
ライフスタイル FLACをMP3に簡単変換！ffmpegを使った音声ファイル変換手順
はる FLAC形式は音質が優れているため、オーディオファイルの保存に人気がありますが、デバイスによってはMP3形式の方が扱いやすい場合があります。今回は、FLACファイルをMP3形式に変換するシンプルな方法を紹介します。コマンドラインツール...
ウェブ制作 X(Twitter)でシェアー時の記事画像が表示されない時のチェックリスト
はる Twitter（現X）で記事をシェアした際、画像が正しく表示されない問題に遭遇することがあります。この問題を解決するために、いくつかの確認ポイントがあります。本記事では、画像が表示されない場合に確認すべき手順を紹介します。 1. キャ...
ウェブ制作 Next.js SSGビルドサイトで遷移の検知方法とエラーの回避策
Next.js で SSG (静的サイト生成) を使用する際、クライアントサイドでのページ遷移や URL のクエリパラメータの変更を検知するために、useSearchParams や usePathname フックを使うことができます。ただ...
ウェブ制作 次世代のコーディング体験！Haystack Editorの導入方法
はる 新しいタブ地獄の悩みが解決かもしれない新しいエディターのHaystack Editorを使ってみました。VSCodeをすでに利用している方はすぐに移行できるのでインストールから設定までの手順を紹介します！ Haystack Edito...
ウェブ制作 無料でAIがコードを生成！CodeiumのVSCode拡張機能インストール＆活用法
はる 今回は、Visual Studio Code（VSCode）にCodeiumの拡張機能を導入し、無料でコード生成AIを活用する手順をご紹介します。個人開発では無料とのことなので使ったことない人はぜひ使ってみてください。 Codeium...
ウェブ制作 Next.jsとJestの設定と実践テストの手順
はる Next.jsプロジェクトにJestを導入し、Reactコンポーネントをテストする方法を説明します。Jestを設定し、簡単なテストを実行できるところまでやってみましょう。 以前、Next.jsの環境を作り自動整形機能とSotryboo...
ウェブ制作 初心者でも安心！Next.js・Storybook・Prettierで作るモダン開発環境
はる 今回は最新のNext.jsとStorybookを活用した開発環境の構築方法を紹介します。この環境では、モダンなフロントエンド開発を効率的に進めるためのツールと構成を整えます。 開発環境の構成 Next.js: バージョン14を使用し、...
ウェブ制作 Next.js (AppRouter) で環境(env)の値をSCSSの変数に渡す方法
Next.jsのenvに設定された値をSCSSの変数に渡して利用する方法を紹介します。 next.config.js の設定 // next.config.js module.exports = { sassOptions: { addit...