コーディングアシスタントChatGPT：コードスニペットを瞬時に生成するプロンプト

SHARE

ChatGPTを使ってプログラミングのコーディングをアシストしてもらうプロンプトを紹介します。

実装したい機能をChatGPTに伝え、基本的なコードスニペットを爆速で生成してもらうという試みです。

コピペで使える具体的な指示書と例文を記載しているのでぜひ色々お試しください。実用的な場面で利用できるか検討する際の参考になれば幸いです。

目次

使用するプロンプト

ChatGPTにコードスニペットを作ってもらうためのプロンプトテンプレートは以下です。

_______言語を使用して、_______を実装する基本的なコードスニペットを教えてください。
_______で_______機能を実現するための基本的なコードを提供してください。
_______を使用して_______を行うシンプルなプログラムのコードスニペットを示してください。
_______言語で_______アクションをトリガーする基本的な関数の書き方を教えてください。
私は_______を_______言語でプログラミングしようとしています。基本的なコードスニペットを提供してもらえますか？

最初の空白には、使用したいプログラミング言語（例：JavaScript, PHP）やCMS名（例：WordPress）を入れます。

２番目の空白には、実装したい具体的な機能やタスク（例: モーダルウィンドウの作成、タイマー処理、記事詳細ページの出力）を入れます

以下、実際のプロンプト例です。

JavaScriptを使用して、モーダルウィンドウを実装する基本的なコードスニペットを教えてください。
HTMLとCSSでグローバルナビゲーションを作る基本的なコードを提供してください。
CSSでレスポンシブデザインを実現するための基本的なスタイルルールを教えてください。
私はスライドショーをJavaScriptでプログラミングしようとしています。基本的なコードスニペットを提供してもらえますか？
WordPressでカスタム投稿タイプを作成する基本的なコードスニペットを教えてください。
WordPressで独自のショートコードを作成するための基本的なコードを提供してください。
WordPressのテーマ内でカスタムフィールドの値を取得するシンプルなプログラムのコードスニペットを示してください。
WordPressでプラグインを作成する基本的なステップやコードを教えてください。
私はWordPressで独自のウィジェットエリアを作成しようとしています。基本的なコードスニペットを提供してもらえますか？

ChatGPTによる回答

上記のテンプレートでコードスニペット生成についてお願いすると、ChatGPTから以下の回答が返ってきました。

JavaScriptでモーダルを実装するコードスニペット

以下、ChatGPTの回答です。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Simple Modal</title>
</head>
<body>
    <!-- Trigger/Open The Modal -->
    <button id="openModalBtn">Open Modal</button>

    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
            <span id="closeModalBtn" class="close">&times;</span>
            <p>Some text in the Modal..</p>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

CSS

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 60px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

JS

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("openModalBtn");

// Get the <span> element that closes the modal
var span = document.getElementById("closeModalBtn");

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

HTML・CSSでグロナビを作るコードスニペット

以下、ChatGPTの回答です。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Global Navigation</title>
</head>
<body>
    <nav class="global-nav">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.global-nav {
    background-color: #333;
}

.global-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.global-nav li {
    float: left;
}

.global-nav a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.global-nav a:hover {
    background-color: #ddd;
    color: black;
}
ChatGPT
ChatGPT

カスタマイズや拡張が必要な場合、さらにJavaScriptを組み込んでドロップダウンメニーやモバイルレスポンシブなハンバーガーメニーを実装することもできます。もし追加の質問や特定のニーズがありましたら、どうぞお知らせください！

WordPressで独自のショートコードを作成するコードスニペット

以下、ChatGPTの回答です。

function your_custom_shortcode( $atts, $content = null ) {
    // ショートコードのロジックをここに記述
    return "<p>これはカスタムショートコードの例です。</p>";
}
add_shortcode( 'your_shortcode', 'your_custom_shortcode' );
ChatGPT
ChatGPT

上記のコードをfunctions.phpに追加して、記事やページで[your_shortcode]を使用すると、”これはカスタムショートコードの例です。”と表示されます。

前の記事

秘密のメッセージ作り！ChatGPTを使って言葉をモールス信号…

次の記事

【プロンプト紹介】ChatGPTで手軽にアスキーアートを作ろう…