【2025年版】コーダーの作業時間を半分にする！Claude活用術10選～後半～👉💻⏳⚡️🤖✨
後半の記事の執筆がようやく完了しました！その間に、当サイトには「サイトマップ」と「お問い合わせページ」も新たに追加いたしました。
コメントを残すのは少しハードルが高いと感じる方もいらっしゃるかと思います。そんな時は、ぜひお気軽に「お問い合わせページ」からご連絡ください。私にできる範囲ではありますが、精一杯サポートさせていただきます。
「ここでつまずいてしまって先に進めない」「どうしていいのか分からない」――学習を進める中で、誰しもが一度はぶつかる壁だと思います。そんな時こそ、微力ながらもお力になれたら嬉しいです。
また、私自身にとっても「教える」ということは今後必要なスキルであり、誰かの役に立てることはとても意義のあることだと感じています。コーダーとしての仲間が増えれば、より楽しく、やりがいを持って継続できる方もきっと増えるはずです。
小さなことでも構いませんので、どうぞお気軽にお問い合わせください。一緒に頑張っていきましょう！
お問い合わせページはこちら🔗
路線がだいぶズレました笑😂
前回Claude活用術10選～前半～の記事を執筆した後すごい早さで閲覧数が伸びました！
やっぱりAIってすごいですね！
では本題の後半6～10まで記載していきましたのでどうぞ！
- 1. 6. 正規表現パターンの生成 {#6}
- 1.1. 使用シーン
- 1.2. プロンプト例
- 1.3. 実際の出力例
- 1.4. よく使う正規表現プロンプト
- 1.5. 💡 時短ポイント
- 1.6. お問い合わせフォームを自作する際に必要になる正規表現パターンの生成について。
- 2. 7. CSS Grid/Flexboxレイアウトの作成 {#7}
- 3. 8. エラーメッセージの解決 {#8}
- 4. 9. コードレビューとリファクタリング {#9}
- 5. 10. 制作見積もりの工数計算 {#10}
- 6. まとめ：AIは、正しく指示を出せば言葉選びを間違えることもなく、本当に最高のパートナーになります！
- 7. ✉️ あなたのリクエスト教えてください！
6. 正規表現パターンの生成 {#6}
使用シーン
バリデーションやテキスト処理で複雑な正規表現が必要なとき。
プロンプト例
以下の条件を満たす正規表現を作成してください：
1. 日本の電話番号（携帯・固定両方）
- 090-1234-5678
- 03-1234-5678
- 0120-123-456
ハイフンありなし両方対応
2. 使用例も教えてください
実際の出力例
// 日本の電話番号の正規表現
const phoneRegex = /^(0[5-9]0[-(]?\d{4}[-)]?\d{4}|0[1-9]{1,4}[-(]?\d{1,4}[-)]?\d{4})$/;
// 使用例
function validatePhone(phone) {
// ハイフンを除去してから検証する方法
const cleaned = phone.replace(/[-() ]/g, '');
const simpleRegex = /^(0[5-9]0\d{8}|0[1-9]{1,4}\d{4,8})$/;
if (!simpleRegex.test(cleaned)) {
return false;
}
// 桁数チェック
if (cleaned.length < 10 || cleaned.length > 11) {
return false;
}
return true;
}
// テストケース
console.log(validatePhone('090-1234-5678')); // true
console.log(validatePhone('09012345678')); // true
console.log(validatePhone('03-1234-5678')); // true
console.log(validatePhone('0120-123-456')); // true
よく使う正規表現プロンプト
// メールアドレス（日本で使われる形式に対応）
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
// 郵便番号
const zipRegex = /^\d{3}-?\d{4}$/;
// 全角カタカナのみ
const katakanaRegex = /^[ァ-ヶー]+$/;
// URLの検証
const urlRegex = /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
💡 時短ポイント
- 複雑な正規表現を1から書く必要なし
- テストケース付きで動作確認も簡単
- 日本特有のフォーマットにも対応
お問い合わせフォームを自作する際に必要になる正規表現パターンの生成について。
実務では「自分で正規表現を書く → バグ発生 → 緊急修正」というトラブルが頻発しがちですが、「最初からAIに聞く → 一発で完成」の方が圧倒的に効率的です。
お問い合わせフォームの自作はバリデーション処理が複雑になるため、通常はバックエンド開発の領域になります。一方、WordPressでよく使われる『Contact Form 7』などのプラグインを使っている場合は、こうした正規表現の知識は全く必要ありませんでした。
しかし、カスタムフィールドとお問い合わせフォームを連携させたい案件では、Contact Form 7でも複雑なPHPコーディングが必要になります SenowebTechMemo。例えば、ACF（Advanced Custom Fields）の値をフォームに引き継いだり、フォーム送信後にカスタムフィールドを更新する Contact Form 7 タイトルやカスタムフィールド値をPOSTで渡す – とくしよネットといった高度な要件です。
そうした案件では結局、自作フォームを開発せざるを得なくなり、そこで正規表現の壁にぶつかることが多いのです。実際に自作フォームを開発したことで、バリデーション処理の重要性と正規表現の複雑さを知ることができました。
この経験から今では『Contact Form 7』を使わなくなりました！かえって自作する方が圧倒的にカスタマイズしやすいのがわかったからです。
7. CSS Grid/Flexboxレイアウトの作成 {#7}
使用シーン
複雑なレイアウトを効率的に実装したいとき。
プロンプト例
以下のレイアウトをCSS Gridで実装してください：
【デスクトップ】
header header header
sidebar main main
sidebar main main
footer footer footer
【モバイル】
header
main
sidebar
footer
- headerは高さ80px固定
- sidebarは幅300px固定（PCのみ）
- footerは高さ200px固定
- mainは残りの領域を埋める
実際の出力例
/* Grid レイアウト */
.layout {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-rows: 80px 1fr auto 200px;
min-height: 100vh;
}
.layout__header {
grid-area: header;
background: #333;
color: white;
}
.layout__main {
grid-area: main;
padding: 20px;
}
.layout__sidebar {
grid-area: sidebar;
background: #f5f5f5;
padding: 20px;
}
.layout__footer {
grid-area: footer;
background: #333;
color: white;
}
/* デスクトップ */
@media (min-width: 768px) {
.layout {
grid-template-areas:
"header header header"
"sidebar main main"
"sidebar main main"
"footer footer footer";
grid-template-columns: 300px 1fr 1fr;
grid-template-rows: 80px 1fr auto 200px;
}
}
/* Flexboxバージョンも提供 */
.flex-layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.flex-layout__header {
height: 80px;
flex-shrink: 0;
}
.flex-layout__content {
flex: 1;
display: flex;
flex-direction: column;
}
.flex-layout__main {
flex: 1;
padding: 20px;
}
.flex-layout__sidebar {
order: 1;
padding: 20px;
}
.flex-layout__footer {
height: 200px;
flex-shrink: 0;
}
@media (min-width: 768px) {
.flex-layout__content {
flex-direction: row;
}
.flex-layout__sidebar {
order: 0;
width: 300px;
flex-shrink: 0;
}
}
💡 レイアウト選択のコツ
- Grid: 2次元レイアウト、複雑な配置
- Flexbox: 1次元レイアウト、要素の整列
一番皆もよく使うであろうdisplay: flex;、display: grid;ですが、AIに任せるとき、基本的には画像とともに「この画像のようなレイアウトをHTMLとCSSで作成してください。クラスはBEM記法で」といった感じで頼むと思います。
でも実は、細かく指定してあげると意外にもその通りに作成してくれるんです（笑）
例えば： 「ヘッダー80px固定、3カラムレイアウト、サイドバー200px、フッター100px、 BEM記法でクラス名、IE11対応不要、レスポンシブでスマホは縦並び」 みたいに細かく指定すると、本当にその通りのコードが出てきます！
8. エラーメッセージの解決 {#8}
使用シーン
謎のエラーメッセージに遭遇したとき。
プロンプト例
以下のエラーが出ています。原因と解決方法を教えてください：
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at script.js:5:12
該当コード：
const button = document.querySelector('.submit-btn');
button.addEventListener('click', handleSubmit);
Claudeの回答例
// エラーの原因
// .submit-btnが存在しない、またはDOMの読み込み前に実行されている
// 解決方法1: DOMContentLoadedを使用
document.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('.submit-btn');
if (button) {
button.addEventListener('click', handleSubmit);
} else {
console.error('.submit-btnが見つかりません');
}
});
// 解決方法2: スクリプトの配置を変更
// HTMLの</body>タグの直前に配置
// 解決方法3: 要素の存在確認を追加
const button = document.querySelector('.submit-btn');
if (button) {
button.addEventListener('click', handleSubmit);
}
// デバッグ用：要素の確認
console.log('Button element:', document.querySelector('.submit-btn'));
console.log('All buttons:', document.querySelectorAll('button'));
よくあるエラーと解決法
// 1. WordPress jQuery競合エラー
// エラー: $ is not defined
// 解決法:
jQuery(document).ready(function($) {
// ここで$が使える
});
// 2. CORSエラー
// エラー: Access to fetch at 'xxx' from origin 'yyy' has been blocked by CORS policy
// 解決法: サーバー側でCORSヘッダーを設定、またはプロキシを使用
// 3. モジュールインポートエラー
// エラー: Unexpected token 'export'
// 解決法: <script type="module">を使用、またはバンドラーを導入私の迷走デバッグ（約1時間）：
他のページでテスト → 同じエラー
HTML確認 → .submit-btnクラスは存在
コンソールで要素確認 → nullが返ってくる
スペルチェック → 間違いなし
「なんで要素が取得できないんだ…」と一人で格闘。
Claudeに助けを求める・・・
たった30秒後： 「DOMの読み込み前にスクリプトが実行されている可能性があります」
この経験から：
- エラーメッセージをそのままコピペするだけで的確な解答
- 複数の解決策を提示してくれるのが助かる
- デバッグ用のコードまで教えてくれる
AIのおかげで、今ではコーディング中のエラーも当たり前って思えるようになった。本当に感謝しかない！
あの1時間の格闘が、今では2分で解決。AIに感謝しかありません！
9. コードレビューとリファクタリング {#9}
使用シーン
自分の書いたコードをより良くしたいとき。
プロンプト例
以下のコードをレビューして、改善点を教えてください：
// ハンバーガーメニューの実装
var menuOpen = false;
var menuBtn = document.getElementById('menuBtn');
var menu = document.getElementById('menu');
menuBtn.onclick = function() {
if (menuOpen == false) {
menu.style.display = 'block';
menuOpen = true;
} else {
menu.style.display = 'none';
menuOpen = false;
}
}
Claudeのレビュー結果
// 改善されたコード
// 1. constを使用（再代入不要）
// 2. querySelectorでより柔軟に
// 3. classによる状態管理
// 4. アクセシビリティ対応
// 5. イベントリスナーの使用
const menuBtn = document.querySelector('#menuBtn');
const menu = document.querySelector('#menu');
if (menuBtn && menu) {
// 初期状態をaria属性で管理
menuBtn.setAttribute('aria-expanded', 'false');
menuBtn.setAttribute('aria-controls', 'menu');
menuBtn.addEventListener('click', () => {
const isOpen = menuBtn.getAttribute('aria-expanded') === 'true';
// 状態を反転
menuBtn.setAttribute('aria-expanded', !isOpen);
menu.classList.toggle('is-open');
// フォーカス管理
if (!isOpen) {
menu.querySelector('a, button')?.focus();
}
});
// ESCキーで閉じる
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && menu.classList.contains('is-open')) {
menu.classList.remove('is-open');
menuBtn.setAttribute('aria-expanded', 'false');
menuBtn.focus();
}
});
}
/* 対応するCSS */
#menu {
position: fixed;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
#menu.is-open {
transform: translateX(0);
}
リファクタリングのポイント
- 命名規則の統一（キャメルケース、スネークケース）
- DRY原則（重複コードの削除）
- 単一責任の原則（関数の分割）
- エラーハンドリングの追加
- パフォーマンス最適化
- AIは批判せずに建設的な改善案を提示
- 最新のベストプラクティスを教えてくれる
- アクセシビリティまで考慮してくれる
今の私のコードレビュー習慣：
- 書いたコードをAIにレビュー依頼
- 「もっと良い書き方ありませんか？」と追加質問
- パフォーマンスやアクセシビリティも確認してもらう
こうすることでアクセシビリティって学習当初は思っていましたがClaudeのおかげでより良いコードを書いてもらうことで自分も再度コードを見直しが出来てこのコードでこうなってるんだ！と再認識出来るから違うとで時間を作れる！
10. 制作見積もりの工数計算 {#10}
使用シーン
クライアントへの見積もり作成時に、適切な工数を算出したいとき。
プロンプト例
以下の要件でWebサイト制作の工数を計算してください：
【サイト概要】
- コーポレートサイト
- 全10ページ（トップ、会社概要、事業内容×3、採用情報、お知らせ一覧・詳細、プライバシーポリシー、お問い合わせ）
- レスポンシブ対応
- WordPress実装
- お問い合わせフォーム（確認画面あり）
- お知らせ投稿機能
【その他要件】
- デザインデータあり（Figma）
- 基本的なSEO対策
- Google Analytics設定
- 納期1.5ヶ月
コーディング工数を詳細に教えてください。
Claudeの工数計算例
## 工数内訳（コーディングのみ）
### 1. 環境構築・初期設定（4h）
- ローカル開発環境構築: 1h
- WordPress初期設定: 1h
- 必要プラグインインストール・設定: 1h
- Git設定: 1h
### 2. 共通パーツ作成（8h）
- ヘッダー: 2h
- フッター: 2h
- グローバルナビ（ハンバーガー含む）: 3h
- パンくずリスト: 1h
### 3. 各ページコーディング（32h）
- トップページ: 8h
- メインビジュアル: 2h
- 各セクション: 4h
- アニメーション: 2h
- 会社概要: 3h
- 事業内容（3ページ）: 9h（3h×3）
- 採用情報: 3h
- お知らせ一覧: 3h
- お知らせ詳細: 2h
- プライバシーポリシー: 1h
- お問い合わせ: 3h
### 4. WordPress実装（16h）
- テーマ作成・基本設定: 3h
- カスタム投稿タイプ（お知らせ）: 2h
- 各ページテンプレート作成: 6h
- お問い合わせフォーム実装: 3h
- 管理画面カスタマイズ: 2h
### 5. 調整・最適化（12h）
- ブラウザチェック・調整: 4h
- スマホ最適化: 3h
- 表示速度最適化: 2h
- SEO対策（基本）: 2h
- アクセシビリティ確認: 1h
### 6. テスト・納品準備（8h）
- 動作テスト: 3h
- クライアントレビュー対応: 3h
- 本番環境移行: 2h
---
### 合計工数: 80時間（10営業日）
### バッファ（20%）: 16時間
### 総工数: 96時間（12営業日）
### 見積もりのポイント
- 修正対応: 各フェーズ20%のバッファ
- デザインの複雑さによって変動
- CMSカスタマイズの程度で工数追加
💡 見積もり精度を上げるコツ
- 過去の類似案件と比較
- リスク要因を明確に（例：IE対応、特殊な動き）
- クライアントの修正傾向を考慮
- 段階的な見積もり提示も検討
フリーランスではクライアントと打ち合わせ時見積もりを出すことがありますがこのようにAIに聞くことである程度の算出は可能です。
まぁ自分はあまり出くわさないんですが他所から聞いた内容です…
悲しいことにそもそも自分は制作会社からの業務委託でお仕事をもらうことが殆どです😂
ほんのたまに制作会社様からこの案件いくらぐらいになりますか？と質問があるので金額の出し方がわからないのでAIに聞いて答えた感じです。
まとめ：AIは、正しく指示を出せば言葉選びを間違えることもなく、本当に最高のパートナーになります！
最近では、ClaudeもWeb検索ができるようになり、作業効率がさらに飛躍的にアップしています。
自分としては、Claudeを開発してくれたAnthropicには感謝しかありません。本当に光栄です！
これからもずっとClaudeを使っていく予定です。
Claudeには2025年5月現在では
- Proプラン：月額20ドル
- Maxプラン：最低100ドル〜最大200ドル（利用量に応じて変動）
どちらを選ぶかによって月額が変わりますが、最初は月20ドルのProプランを選ぶのが賢明だと思います。
月に約3,000円の投資で、コーディングや他の作業時間が大幅に短縮されるので、かなりおすすめです！
ちなみにProプランには年間契約もあり、年間払いの場合は月額17ドルと、毎月約400円ほどお得になります。
Claudeの公式サイトも以下に貼っておくので、興味がある方はぜひチェックしてみてください！
こちら🔗
✉️ あなたのリクエスト教えてください！
この記事を読んでいるあなたと一緒に成長していければ嬉しいです。質問や相談があれば、
X(Twitter)の @TumaLOVE0127 までDMください！😊📩
またはお問い合わせページからお問い合わせください！
コメントを残す