制作の久保田です。
今回は、絶賛流行中の「ChatGPT」は、エンジニアにとってどこまで実務に使えるのかを検証をしてみます。
実際にいくつかのコード生成して掲載しているので、使い所の参考になればと思います。
目次
はじめに
ChatGPTがリリースされて以降、各社ai関連ツールのリリースラッシュが続いています。
学生論文生成の問題や、人の仕事を奪うなど、ネガティブな点も指摘されていますが、現時点では技術者や専門家のサポート、効率的な学習など、使い方を間違えなければ非常に強力なツールだと考えています。
今後、aiを有効活用できるかできないかで、生産性が大きく変わっていく気もするので、どういったケースで利用できるかを検証します。
注意事項
今回の記事に関して、以下の注意事項を確認の上、読み進めてください。
- 検証で生成したコードは、動作検証をしたコードではありません。
コピペで実装しないでください。 - ChatGPTで生成されたコードは、バグが含まれるケースがあります。
あくまで、自己責任で使用してください。 - 生成コードを使用してのトラブルは負いかねます。
上記にご了承ください。
では、実際にコード生成の事例を見ていきます。
.htaccessリダイレクト
まずは簡単に、.htaccessのリダイレクトコードを生成してみます。
.htaccessはたまにしか触らないので忘れがちで、毎回書くたびに調べてる人も多いと思います。
短い文章で教えてもらえると便利そうです。
httpをhttpsにリダイレクト
まずは、一番頻繁に設定する、SSLのリダイレクトコードを生成してみます。
httpをhttpsにリダイレクトするhtaccessのコードを書いて
で生成します。
次のコードは、.htaccessファイルを使用してHTTPからHTTPSへのリダイレクトを行うための基本的な設定です。
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
これにより、すべてのHTTPリクエストがHTTPSにリダイレクトされます。.htaccessファイルをWebサーバーのルートディレクトリに配置し、上記のコードを追加して保存してください。この設定により、HTTPリクエストがHTTPSに自動的にリダイレクトされます。
注意: .htaccessファイルを使用するには、サーバーがmod_rewriteモジュールを有効にしている必要があります。また、Webサーバーの設定ファイルで.htaccessの使用を許可する必要がある場合もあります。必要な権限がない場合は、サーバー管理者に相談してください。
コードを返した上で、注意点も教えてくれました。
生成コードも普段書いてるものと若干違いますが問題なさそうです。
ディレクトリのリダイレクト
次に、これも使用頻度の多い、ディレクトリのリダイレクトも生成してみます。
https://ecco.co.jp/old/ 配下のファイルを
https://ecco.co.jp/new/ に転送するhtaccessリダイレクトコードを書いて
上記のプロンプトで実行します。
次のコードは、https://ecco.co.jp/old/配下のファイルをhttps://ecco.co.jp/new/にリダイレクトするための.htaccess設定です。
RewriteEngine On RewriteRule ^old/(.*)$ https://ecco.co.jp/new/$1 [R=301,L]
このコードを.htaccessファイルに追加し、https://ecco.co.jp/old/以下のすべてのファイルやディレクトリにアクセスされた場合、https://ecco.co.jp/new/にリダイレクトされます。
例えば、https://ecco.co.jp/old/example.htmlにアクセスすると、https://ecco.co.jp/new/example.htmlにリダイレクトされます。
このコードを適用する前に、Webサーバーの設定で.htaccessの使用を許可しておく必要があります。また、必要に応じてmod_rewriteモジュールを有効にする必要があります。サーバー管理者に相談して、必要な設定を行ってください。
こちらも問題なく記述されてるようです。
htaccessは以前ブログ記事でまとめてましたが、チャットに聞いた方が手っ取り早い、てことになりそうです。
上記記事では、正規表現の記述方法にも少し触れてますが、ChatGPTは正規表現のわからな部分の質問にも使えそうです。
javascript
続いて、少し難易度を上げてjavascriptのコードを生成してみます。
同日のアクセスの場合、メッセージを非表示にする
サイトに訪れた際、毎回メッセージを表示するのではなく、同日の1回だけ表示したい、というケースを見てみます。
実装はできそうですが、少しコードが長くなりそうなので生成してもらえると便利です。
同日のアクセスの場合、メッセージを非表示にするjavascriptのコードを書いて
のプロンプトで生成してみました。
以下は、JavaScriptを使用して同じ日のアクセスの場合にメッセージを非表示にするコードの例です。
// メッセージを非表示にするための関数
function hideMessageOnSameDay() {
// クッキーから直近のアクセス日を取得
var lastAccess = getCookie("lastAccess");
// 現在の日付を取得
var currentDate = new Date().toDateString();
// 直近のアクセス日が現在の日付と一致する場合、メッセージを非表示にする
if (lastAccess === currentDate) {
document.getElementById("message").style.display = "none";
}
// クッキーに現在の日付を設定
setCookie("lastAccess", currentDate);
}
// クッキーから値を取得する関数
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) {
return parts.pop().split(";").shift();
}
}
// クッキーに値を設定する関数
function setCookie(name, value) {
var date = new Date();
date.setDate(date.getDate() + 1);
var expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
// ページ読み込み時にメッセージを非表示にするかチェック
window.onload = hideMessageOnSameDay;
上記のコードでは、クッキーを使用して直近のアクセス日を保存し、現在の日付と比較してメッセージを非表示にするロジックを実装しています。messageというIDを持つ要素が存在し、その要素を非表示にすることでメッセージが非表示になります。
コードを適用するには、HTMLの適切な場所にメッセージを表示する要素を追加し、その要素のIDをmessageとして設定してください。また、このコードをHTMLファイルに組み込むか、外部のJavaScriptファイルとして読み込む必要があります。
なお、クッキーを使用するため、このコードはクライアントサイドでの動作となります。クッキーが無効になっている場合や、異なるデバイスやブラウザを使用してアクセスした場合は、メッセージが表示される可能性があります。
Cookieを使用して、サイトに訪れた日付を比較しています。
これもぱっと見問題なく動作しそうです。
思ってたより結構長めのコードだったため、これが数秒で書き出されるのは助かります。
朝、昼、夜で別々のcssを適応させる
通常あまりやらない処理は、ゼロから考えるのは少し大変です。
アクセスする時間帯でカラーを変更するコードが生成できるか見てみます。
朝、昼、夜で別々のcssを適応させるjavascriptコードを書いて
のプロンプトで実行してみます。
以下は、朝、昼、夜の時間帯に応じて異なるCSSを適用するためのJavaScriptコードの例です。
// CSSファイルのパスを定義
var morningCSS = "morning.css";
var afternoonCSS = "afternoon.css";
var eveningCSS = "evening.css";
// 時間帯に応じてCSSを切り替える関数
function switchCSSByTime() {
var currentTime = new Date().getHours();
var linkElement = document.getElementById("customCSS");
// 朝（5時〜11時）の時間帯
if (currentTime >= 5 && currentTime < 12) {
linkElement.href = morningCSS;
}
// 昼（12時〜17時）の時間帯
else if (currentTime >= 12 && currentTime < 18) {
linkElement.href = afternoonCSS;
}
// 夜（18時〜4時）の時間帯
else {
linkElement.href = eveningCSS;
}
}
// ページ読み込み時と1分ごとにCSSを切り替える関数を呼び出す
window.onload = switchCSSByTime;
setInterval(switchCSSByTime, 60000);
上記のコードでは、morning.css、afternoon.css、evening.cssというそれぞれの時間帯に対応するCSSファイルのパスを定義しています。switchCSSByTime関数は現在の時間を取得し、時間帯に応じてCSSファイルのパスを切り替えます。
HTMLファイル内でCSSを読み込むためのlink要素を以下のように追加してください：
<link id="customCSS" rel="stylesheet" type="text/css" href="">
このlink要素のidをcustomCSSとして設定しています。
このコードをHTMLファイルに組み込むことで、ページの読み込み時に適切なCSSが適用され、1分ごとに時間帯に応じてCSSが切り替わります。
各時間帯に対応するCSSファイルは適切なパスに配置しておく必要があります。また、朝、昼、夜の時間帯の定義は簡易的なものであり、実際の要件に合わせて調整する必要があります。
時間を取得し、<link>タグの属性を切り替える処理が生成されました。
htmlも別枠に表示されてわかりやすいです。
setInterval(switchCSSByTime, 60000);
の箇所で、1分ごとに実行してますが、リロードなしでリフレッシュされるかが怪しいです。
動作に問題があった場合は、その点を指摘するとコードを書き換えてくれるので、何度か繰り返せば想定のコードが得られそうです。
PHP
続いて、PHPコードに関しても試してみます。
個人的には、PHPのコードをゼロから書く機会はあまり多くないため、調べる手間が省けると助かります。
2024年になったらコンテンツを表示させる
年始に切り替わったら、初売りのバナーを表示させたいといったケースは、結構あると思います。
手動でやるとしたら年越しの間、じっと見守ってないといけません。
これを、自動で切り替わるようにPHPで設定しておきます。
2024年になったらコンテンツを表示させるPHPコードを書いて
上記のプロンプトを実行してみます。
以下は、2024年になった場合にコンテンツを表示するためのPHPコードの例です。
<?php
$currentYear = date("Y");
if ($currentYear >= 2024) {
// 2024年になった場合に表示するコンテンツ
echo "Welcome to the year 2024!";
} else {
// 2024年になっていない場合に表示するコンテンツ
echo "Stay tuned for exciting updates in 2024!";
}
?>
このコードでは、date(“Y”)を使用して現在の年を取得し、その値を比較しています。もし現在の年が2024年以上であれば、特定のメッセージやコンテンツを表示します。それ以外の場合、別のメッセージやコンテンツを表示します。
このコードを適用するには、PHPが実行可能な環境で利用する必要があります。また、表示するコンテンツの具体的な内容に合わせて、echo文の中身を適切に変更してください。
このコードは、年のみを基準に判断しています。必要に応じて月、日、時間などの詳細な条件を追加することもできます。条件の範囲や条件式は要件に合わせて調整してください。
こちらのコードも問題なさそうです。
コメントや出力テキストも内容に合っているため、わかりやすいコードが生成されています。
パラメータに応じて表示コンテンツを切り替える
urlのパラメータに応じて、表示コンテンツを切り替えるコードを生成してみます。
パラメータに応じて、表示コンテンツを切り替るPHPコードを書いてください。
条件は以下です。
・https://ecco.co.jp/blog/?id=news にアクセスするとニュース記事を表示
・https://ecco.co.jp/blog/?id=column にアクセスするとコラム記事を表示
今回は少し条件を細かく指定して、上記のプロンプトを実行します。
以下は、パラメータに応じて表示コンテンツを切り替えるためのPHPコードの例です。
<?php
// パラメータからidを取得
$id = $_GET['id'];
// idの値によって表示するコンテンツを切り替える
if ($id === 'news') {
// ニュース記事の表示
echo "Welcome to the news section!";
} elseif ($id === 'column') {
// コラム記事の表示
echo "Welcome to the column section!";
} else {
// それ以外の場合の処理（デフォルトコンテンツなど）
echo "Welcome to our blog!";
}
?>
例えば、URLが「https://ecco.co.jp/blog/?id=news」の場合、`id`の値が「news」となり、ニュース記事の表示が行われます。同様に、「https://ecco.co.jp/blog/?id=column」の場合は、`id`の値が「column」となり、コラム記事の表示が行われます。
このコードを適用するには、PHPが実行可能な環境で利用する必要があります。また、表示するコンテンツの具体的な内容に合わせて、echo文の中身を適切に変更してください。さらに、セキュリティ上の考慮やエラーハンドリングなど、必要に応じて追加の処理を行ってください。
こちらも問題なさそうなコードが生成されました。
news、columnのパラメータがついていない、デフォルトの出力も記述されています。
WordPress
続いてWordPressのテーマファイルのコードを生成してみます。
1週間以内に公開された投稿にNEWマークをつける
これも依頼されるケースが多い方だと思いますが、最新記事に「NEW」マークをつけるコードです。
以下の条件で、コードを書いてください。
・WordPressの投稿一覧を表示
・1週間以内に公開された投稿にNEWマークをつける。
上記のプロンプトで実行してみます。
以下は、WordPressの投稿一覧を表示し、1週間以内に公開された投稿にNEWマークを付けるためのコードの例です。この例では、WordPressのループと投稿データのメタ情報を使用して、条件に応じてマークを表示しています。
<?php
// WordPressのループ開始
if (have_posts()) :
while (have_posts()) : the_post();
// 投稿の公開日を取得
$postDate = get_the_date('Y-m-d');
// 現在の日時を取得
$currentDate = date('Y-m-d');
// 公開日から1週間以内の投稿にはNEWマークを付ける
$isNew = (strtotime($currentDate) - strtotime($postDate)) < (7 * 24 * 60 * 60);
// NEWマークを表示するためのHTMLを生成
$newMark = $isNew ? '<span class="new-mark">NEW</span>' : '';
// 投稿のタイトルとNEWマークを表示
echo '<h2>' . get_the_title() . $newMark . '</h2>';
endwhile;
else:
echo '投稿がありません';
endif;
// WordPressのループ終了
?>
上記のコードでは、WordPressのループを開始し、投稿データの公開日を取得します。その後、現在の日付との差を計算し、1週間以内に公開された投稿には$isNewフラグを立てます。最後に、$isNewフラグに基づいてNEWマークを生成して、投稿のタイトルと共に表示します。
このコードを使用するには、WordPressのテンプレートファイル（例：single.phpやarchive.phpなど）に組み込んで使用する必要があります。また、NEWマークを表示するためのCSSクラス（new-mark）も適切に定義してください。
さらに、WordPressのテーマやプラグインによって異なる部分もあるため、実際のテンプレートファイルに合わせて適宜調整してください。
WordPressのwhileループも問題なく生成されました。
公開時間を評価している部分のコードは、
$isNew = (strtotime($currentDate) – strtotime($postDate)) < (7 * 24 * 60 * 60);
60秒 x 60分 x 24時間 x 7日
と、人が見てもわかりやすいコードになってます。
管理画面の投稿一覧ページにアイキャッチ画像を表示する
続いて、管理画面のカスタマイズです。
個人的には管理画面のカスタムは難易度が高いので、ちょっとしたカスタムを任せられるのであればかなり便利です。
今回は、管理画面の投稿一覧にサムネイルを表示させるコードを生成してみます。
管理画面の投稿一覧ページにアイキャッチ画像を表示するためのコードを作成してください。
上記のプロンプトを実行してみます。
以下は、WordPressの管理画面の投稿一覧ページにアイキャッチ画像を表示するためのコードの例です。このコードをfunctions.phpなどのテーマのfunctions.phpファイルに追加してください。
// 投稿一覧にアイキャッチ画像を表示する
function custom_add_thumbnail_column($columns) {
$columns['custom_thumbnail'] = __('アイキャッチ画像');
return $columns;
}
add_filter('manage_posts_columns', 'custom_add_thumbnail_column');
function custom_display_thumbnail_column($column, $post_id) {
if ('custom_thumbnail' === $column) {
$thumbnail = get_the_post_thumbnail($post_id, array(50, 50));
echo $thumbnail;
}
}
add_action('manage_posts_custom_column', 'custom_display_thumbnail_column', 10, 2);
このコードでは、custom_add_thumbnail_columnとcustom_display_thumbnail_columnという2つの関数を定義しています。custom_add_thumbnail_column関数は、投稿一覧のカラムに「アイキャッチ画像」という新しいカラムを追加します。custom_display_thumbnail_column関数は、新しく追加したカラムにアイキャッチ画像を表示するための処理を行います。
追加したコードをテーマのfunctions.phpファイルに追記した後、WordPressの管理画面にアクセスすると、投稿一覧のカラムに「アイキャッチ画像」というカラムが表示され、各投稿のアイキャッチ画像がサムネイルとして表示されるはずです。
なお、このコードは投稿タイプが「投稿」の場合に適用されます。カスタム投稿タイプにも同様の処理を適用したい場合は、manage_posts_columnsフィルターとmanage_posts_custom_columnアクションを対象の投稿タイプに合わせて調整してください。
また、このコードは管理画面の投稿一覧ページでの表示に関するものであり、フロントエンドのテンプレートには影響を与えません。
こちらも問題なさそうなコードが生成されました。
特に指定していないのに、functions.phpに記述するように書かれています。
また、「投稿」にしか適用されないので、「カスタム投稿タイプ」に適用させる場合は書き換える必要があると、間違えやすい部分を予め説明してくれています。
WordPressのテンプレート構造や、関数などを理解しているように見えるので、ちょっとしたカスタマイズは任せてみても良さそうです。
まとめ
ここまで、いくつかの生成コードをみて、現時点でもかなり強力なツールだと感じています。
ゼロからサイト制作は難しくとも、「万能エンジニアを味方につける」くらいのインパクトがあります。
ai関連の技術は、まだまだこれから発展が見込めるため、デザインデータから自動でコードを生成するツールが生まれてもおかしくないと感じています。
仕事が無くなるかも、といったネガティブな意見もありますが、個人的には単純作業をaiに任せて、面白い仕事ができないかってとこに興味があります。
画像生成aiのAdobe Fireflyなども非常に気になるツールなので、言語モデル同様、随時情報を追っていきたいと思います。
