【コーダー必見】効率化のためのChatGPTフル活用戦術+便利ツール集
はじめに
今回は、個人的によく活用させて頂いている、
コーディングが捗る便利ツールをご紹介します！
よく見るものから、ちょっとニッチなものまで
活用方法も踏まえてまとめたいと思います。
また、弊社QUOITWORKS.Incは2024年1月末締切で、ディレクター、デザイナー、エンジニア職を応募しておりますので
下記よりぜひご応募ください！
ChatGPT
まずは王道、ChatGPT。
いろんな活用方法があるかと思いますが、今回ご紹介するものは
非課金ユーザーでも全く問題ないものです。
なぜなら、私が非課金だからです。
基本プロンプト
ChatGPTに命令を出す際に、言い方で返答の「質」が変わるのは有名な話です。
精度が高い返答が欲しい時には活用しているプロンプトとして、
noteの深津さんが考案された「深津式プロンプト・システム」が効果的です。
その内容としては、
・命令書
・制約文
・入力文
・出力文
上記を明記し、ChatGPTの出力に制限を設けることで
制度の高い回答を得ることができます。
詳細は以下記事をご覧ください。
【活用例①】コンポーネントへの原稿反映
コーディングをしていて、困ったこととして
共通パーツをコンポーネント化して管理しやすいようにしたにも関わらず
原稿が後から手配されたり、変更になった際に
コンポーネントパーツの中に一つ一つコピペして組み込んでいく作業が発生してしまうことです。
原稿は一つのテキストの塊として用意されますが、
コードコンポーネントはそうではありません。
DOM構造の都合でタグごとに分割されています。
そのため、丸々コピペできるわけではありません。
<dt>タグの中身の原稿をコピーしてペースト。<dd>タグの中身をコピーしてペースト。
<p>タグの中身をコピーしてペースト。。。
なかなかしんどい作業です。
ですが、ChatGPTを活用することで解決できます。
例えば、以下のようなコンポーネントがあったとします。
「私たちの強み」というセクションのコンポーネントです。
コードは以下です。
<div class="item">
<picture class="item__img">
<source type="image/avif" media="(max-width:1023px)" srcset="/assets/imgs/strength_1_sp.avif" width="345" height="213">
<source media="(max-width:1023px)" srcset="/assets/imgs/strength_1_sp.webp" width="345" height="213">
<source type="image/avif" srcset="/assets/imgs/strength_1.avif" width="266" height="266">
<img src="/assets/imgs/strength_1.webp" width="266" height="266" alt="" loading="lazy">
</picture>
<div class="item__txt">
<h3 class="item__ttl">私たちの強みです</h3>
<p>
私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。
</p>
</div>
</div>
こちらで原稿を当てはめる必要がある箇所は、「.item__ttl」の強みのタイトル部分と
<p>タグの中身の部分です。
このコンポーネントが数個しかないならば、そこまで大きな手間ではないかもしれませんが
数十個にもなると、かなり手間になることが想像できるかと思います。
そこで、ChatGPTの出番です。
<手順1>コードコンポーネントを覚えさせる
まずは、HTMLのコードコンポーネントを覚えてもらいます。
せっかくなので、丁寧に「深津式プロンプト・システム」を活用してみます。
⚫️プロンプト(分かりやすいようにエディタ形式で記載しています)
# 命令書:
あなたは{プロのマークアップエンジニア}です。
以下の制約条件と入力文をもとに{HTMLコンポーネント}を出力してください。
# 制約条件:
・与えたHTMLコンポーネントを覚えてください。
・コードは許可した箇所以外変更しないでください。
・エディタ形式で出力してください。
・説明文は不要です。
# 入力文：
<div class="item">
<picture class="item__img">
<source type="image/avif" media="(max-width:1023px)" srcset="/assets/imgs/strength_1_sp.avif" width="345" height="213">
<source media="(max-width:1023px)" srcset="/assets/imgs/strength_1_sp.webp" width="345" height="213">
<source type="image/avif" srcset="/assets/imgs/strength_1.avif" width="266" height="266">
<img src="/assets/imgs/strength_1.webp" width="266" height="266" alt="" loading="lazy">
</picture>
<div class="item__txt">
<h3 class="item__ttl">私たちの強みです</h3>
<p>
私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。私たちの強みダミーテキストです。
</p>
</div>
</div>
⚫️回答
ChatGPTが与えたコンポーネントを把握したことがわかります。
プロンプトの制約文に関して、
・コードは許可した箇所以外変更しないでください。
GPTはよく、コード内に数字があると変更してきます。
特に画像のパスは結構勝手に変更されたりするので、
それを避けるために記載しています。
・エディタ形式で出力してください。
こちらを指定しないと、エディタ形式ではなく通常のテキストとして出力する場合があります。
めちゃくちゃ見にくいので制約します。
・説明文は不要です
ご存じの通り、ChatGPTは説明が長ったらしいので
少しでも作業効率を高めるために記載しています。
また、同じチャット内で色んなコンポーネントを覚えさせると、ChatGPTが把握しきれないため
チャットはコンポーネントごとに分けた方が良いです。
分かりやすいように、チャットタイトルも変更しておきましょう。
今回は、「私たちの強み」に変更しました。
<手順2>原稿を与える
コンポーネントを覚えてもらったところで、原稿を与えて当てはめてもらいます。
⚫️プロンプト
# 命令書:
あなたは{プロのマークアップエンジニア}です。
以下の制約条件と入力文をもとに{原稿を当てはめたHTMLコンポーネント}を出力してください。
# 制約条件:
・先ほどのHTMLコンポーネントに入力分の原稿を当てはめてください。
・コードは許可した箇所以外変更しないでください。
・エディタ形式で出力してください。
・説明文は不要です。
# 入力文：
プロデュース、プランニング、ディレクション
私たちは、お客様の要望を丁寧にヒアリングし、目標と解決策を一緒に明確化します。
要件を素早く整理し、優先度と作業工程を定義することが強みです。
⚫️回答
思ったような当てはめ方ではありませんね。
「プロデュース、プランニング、ディレクション」を強みのタイトルに設定して欲しいです。
修正をしていきます。
<手順3>任意の回答ではない場合修正する
修正の時のプロンプトは深津式ではなくても問題ありません。
より回答の正確性を高めたい場合は、活用してみてください。
⚫️プロンプト
.item__ttlの中身とpタグの中身に原稿から適切なものを当てはめて、再度出力してください。
⚫️回答
任意の回答が得られました。
<手順4>次の原稿を与える
ここまできたら、あとは原稿を与えるのみです。
⚫️プロンプト & 回答
ご覧のように、原稿を投げるだけで適切にコンポーネントへ当てはめてくれています。
超便利です。
補足
原稿を丸っと投げても以下の通り、ちゃんと当てはめてくれます。
⚫️プロンプト
⚫️回答
また、個人的に感動したのは
テーブルのコンポーネントにもちゃんと原稿を当てはめてくれるところです。
手動でやると結構手間なので、ぜひChatGPTを活用してみてください。
【活用例②】構造化マークアップ
構造化マークアップとは、簡単にいうと
Googleのクローラーに正しく情報を伝えるためのマークアップ方法です。
FAQやパンクズ、求人データなどが一例です。
これらを正しく記載すると、検索結果のリッチリザルトに反映されます。
通常、構造化マークアップを行う場合
全て手打ちで行う人はあまりいないかと思います。
上記のようなツールを使用する場合、
FAQを例にとると、
質問を入力。回答を入力。質問を入力。回答を入力。。
これの繰り返しです。
かなりの手間が発生してしまいます。
これも、コンポーネントの原稿反映の方法と同様に
ChatGPTに任せると、丸っと原稿を渡すだけで構造化マークアップができちゃいます。
<手順1>構造化マークアップの型を覚えさせる
まずは、活用例①と同様に型を覚えさせます。
⚫️プロンプト
# 命令書:
あなたは{プロのマークアップエンジニア}です。
以下の制約条件と入力文をもとに{FAQ構造化マークアップの型}を出力してください。
# 制約条件:
・与えたFAQ構造化マークアップコードを覚えてください。
・許可した箇所以外のコードは変更しないでください。
・説明文は不要です。
# 入力文：
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": {
"@type": "Question",
"name": "質問",
"acceptedAnswer": {
"@type": "Answer",
"text": "回答"
}
}
}
⚫️回答
ちょっと質問と回答の内容は変えられていますが、ここは影響がないのでスルーします。
<手順2>質問と回答を与える
まずは一つ、試しに質問と回答を与えてみます。
⚫️プロンプト
# 命令書:
あなたは{プロのマークアップエンジニア}です。
以下の制約条件と入力文をもとに{適切に原稿を当てはめたFAQ構造化マークアップのコード}を出力してください。
# 制約条件:
・先ほど与えたFAQ構造化マークアップコードに質問と回答の原稿を当てはめてください。
・許可した箇所以外のコードは変更しないでください。
・説明文は不要です。
# 入力文：
リモート勤務ですか？
経験者の場合は可能です。柔軟に対応できますのでご相談下さい。
⚫️回答
無事当てはまっているようですね。
それでは、まとめて一気にいきます。
<手順③>丸っと原稿を与える
今回は、弊社QUOITWORKSの採用サイトのFAQを
サイトから丸っとコピペして投げてみました。
⚫️プロンプト
**リモート勤務ですか？**
<aside>
👉🏻 A.回答
経験者の場合は可能です。柔軟に対応できますのでご相談下さい。
</aside>
**Q.オンライン面接は可能ですか？**
<aside>
👉🏻 A.回答
遠方の方など、状況に応じて可能です。選考が進むと、人柄を重要視しているため直接お話しさせて頂くことをお願いする場合もございます。
</aside>
**Q.すぐに転職を考えているわけではないですが、応募は可能ですか？**
<aside>
👉🏻 A.回答
もちろん、可能です。カジュアル面談も受け付けておりますので、
お気軽に[こちらのフォームより](https://quoitworks.com/contact/)ご応募ください！
</aside>
**Q.選考期間はどのくらいかかりますか？**
<aside>
👉🏻 A.回答
おおよそ応募から内定まで1ヶ月程度です。もしお急ぎの場合などは事前にお知らせいただければ柔軟に対応可能ですので、状況に応じてご相談ください。
</aside>
**Q.選考フローにある課題とは何ですか？**
<aside>
👉🏻 A.回答
ポートフォリオ等で、実力を測りかねる場合は、架空サイトリニューアルなどをして頂く場合が多いです。
</aside>
**Q.過去に応募したことがありますが、再応募は可能ですか？**
<aside>
👉🏻 A.回答
もちろん可能です。何度でもご応募ください。
前回のご応募時からさほど期間が経過していない場合は時期を改めていただくようにお願いする場合がございます。
</aside>
**Q.面接の服装に指定はありますか？**
<aside>
👉🏻 A.回答
指定はありません。スーツやジャケットなどは不要です。
あなたの好きな洋服でお越しください。
</aside>
**Q.履歴書と職務経歴書を用意する必要はありますか？**
<aside>
👉🏻 A.回答
主に面接時の情報密度の向上を目的として、提出をお願いしています。これまでのご経歴と、ご経験の詳細がわかる形であれば、履歴書と職務経歴書のフォーマットを分ける必要はありません。
</aside>
**Q.新卒、未経験での応募は可能ですか**
<aside>
👉🏻 A.回答
どちらの場合も可能です。一定の職種で3年以上の経験がある方は、
未経験だったとしても、大歓迎です！
</aside>
⚫️回答
<中略>
サイトからそのままコピペしたので、絵文字とか謎のタグとかがプロンプトに入ってしまっていますが
ちゃんと構造化マークアップできています。
Responsive Samples by unshift
こちらは、unshift Inc.のTakumi HASEGAWAさんが作成されたものです。
(tweet)
レスポンシブ実装の方法を、「固定値」「相対値」「固定・相対値複合」「スマホ特化」
の4つに分けて、サンプル実装されたサイトとなっています。
コーダーだけでなく、デザイナーさんも活用でき
コーダー・デザイナー間のコミュニケーションが活発になること間違いなしです。
Smooth Shadow
コーディングで、box-shadowをそのまま実装してしまうと
滑らかさに欠けてしまうため、よく複数の影を重ねて
より滑らかになるような実装方法を取るかと思います。
.box {
box-shadow:
0 1.9px 2.5px rgba(0, 0, 0, 0.057),
0 5px 6.1px rgba(0, 0, 0, 0.076),
0 10.1px 11.4px rgba(0, 0, 0, 0.086),
0 19.2px 19.8px rgba(0, 0, 0, 0.092),
0 38.4px 34.8px rgba(0, 0, 0, 0.1),
0 101px 74px rgba(0, 0, 0, 0.13);
}
しかし、これを手動で考えるのは手間なので
以下のツールを活用できます。
任意のレイヤー数、濃さ、サイズの影を生成してくれます。
グラデーションジェネレーター
任意のグラデーションコードを生成してくれます。
SVGPathEditor
これは、パスを一から作成するというよりも
既存のSVGを微調整したい時に便利です。
イラレでもできると思いますが、直感的にできるところが魅力です。
イージングジェネレーター
直感的にcubic-bezierを生成できるジェネレーターです。
コントラストチェッカー
2色のコントラストを確認できるツールです。
cdnjs
様々なライブラリのCDNコードを教えてくれるサイトです。
公式サイトの中から探すのが面倒な時や、見つけにくい時などは便利です。
Tint & Shade Generator
名前のまま、任意の色の明るい色と暗い色を生成してくれます。
グラデーション背景生成ツール
グラデーションのカラーが変化する背景を生成してくれるサイトです。
キーフレームも含めて以下のようなコードを生成してくれます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.background--custom {
background-color: #FFFFFF;
width: 100vw;
height: 100vh;
position: absolute;
overflow: hidden;
z-index: -2;
top: 0;
left: 0;
}
canvas#canvas {
z-index: -1;
position: absolute;
width: 100%;
height: 60%;
transform: rotate(0deg) scale(2) translateY(0%);
--gradient-color-1: #6305ff;
--gradient-color-2: #ebaf6b;
--gradient-color-3: #f5907e;
--gradient-color-4: #b0e27c;
--gradient-speed: 0.000009999999999999999;
}
</style>
</head>
<body>
<div class="background--custom">
<canvas id="canvas" />
</div>
<script src="https://cdn.jsdelivr.net/gh/greentfrapp/pocoloco@minigl/minigl.js"></script>
<script>
var gradient = new Gradient();
gradient.initGradient("#canvas");
</script>
</body>
</html>
EffectTextureMaker
様々なテクスチャを生成してくれるサイトです。
WebGLで何かしらするときに、使えるかも知れません。
ニューモーフィズムジェネレーター
以前、デザイントレンドにもなったニューモーフィズムのコードを直感的に生成してくれます。
一筆書きSVGジェネレーター
任意のテキストの一筆書きのSVGパス情報を生成してくれるツールです
使用できるフォントには限りがありますが、サンプルとして作るくらいなら活用できるかと思います。
カラーコード変換
任意のカラーコードを入れたらRGB、HSV、HSL、CMK、CMYKに変換してくれます。
地味に便利です。
Basic認証自動生成ツール
.htaccessによるBASIC認証用コードを生成してくれます。
statcounter
様々なデバイスや、ビューポート、OSなど別のシェア率を教えてくれます。
どこまでサポートすべきかの基準にすることができます。
Poly Haven
HDRI画像を無料ダウンロードできます。(一部有料)
WebGLやBlenderを使うときに便利です。
HDRI to CubeMap
HDRI画像をキューブマップに変換してくれます。
gltf Viewer
gktfファイルをプレビューしてくれます。
わざわざエディターを開くのが面倒な時に便利です。
差分チェッカー
GitHubでコード管理してる時はあんまり使わないかも知れませんが、
コンフリクトがひどすぎてどうにもならないときや、GitHubを使っていない時
原稿が合っているか確認したい時などに活用できます。
改行・空白・タブ削除ツール
差分チェッカーは、インデントや改行の違いも差分として検知してしまうため
こちらのツールでインデントや改行をなくすことができて、便利です。
終わりに
書いていたら意外と量が多くなってしまいました。
この中にはない便利なツールもたくさんあると思うので、
皆さんが使っている便利ツールも、コメントで教えて頂けると嬉しいです！
お読み頂き、ありがとうございました。
Discussion