ChatGPTのプログラミングの進歩は凄まじいことを日々実感する。ここでは実用的なプログラミングに関するAIの利用方法を試してみた。
インターネットサイト構築ツールのWordPressを使うとそこでは実際にコーデングすることはほとんど必要ないが、php が有用な言語だと分かる。
WordPressを使っていないサイトでhtmlと組み合わせて使いたいが php の知識が乏しいので、ChatGPTに書いてもらう。
サイトにフォルダー内の複数画像をランダムに表示するため、手作業でjavascript プログラムコードを更新している。
.............................
const imageFiles = [
"imgafx20250131_1.jpg",
"imgafx20250131_10.jpg",
"imgafx20250131_11.jpg",
"imgafx20250131_12.jpg",
"imgafx20250131_13.jpg",
.............................
"imgafx20250131_50.jpg"
];
画像を入れ替える際の作業が煩わしく、画像ファイルの数や名前に関係なく、フォルダー内の画像を入れ替えるだけですむように php が使えそうだと思っていた。 phpは特にファイルに関するハンドリング関数が豊富である。
| 特徴 | 長所 | 短所 |
|---|---|---|
| 学習コスト | シンプルで初心者向き | なし |
| Web開発のしやすさ | HTMLに埋め込める | なし |
| フレームワークとCMS | Laravel, WordPressなど豊富 | なし |
| セキュリティ | 改善されてきたが対策が必要 | 脆弱性リスクがある |
| パフォーマンス | 最適化すれば十分速い | リアルタイム処理は苦手 |
| 型付け | 柔軟にコードが書ける | バグの原因になりやすい |
| モダンな技術との親和性 | 一部対応している | 非同期処理が苦手 |
| 言語の進化 | PHP 8で大幅改善 | 進化が遅い |
*php環境をローカルでテストするにはXAMPPを使いApacheをスタートしておく。
フォルダー内の画像ファイルを取り出し、PHP + JavaScript でランダム画像を5秒ごとに切り替えるコードを作成して
以下のコードを 拡張子.php として保存してください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ランダム画像スライド</title> <style> body { background-color:#b0c4de; } /* ランダム画像のスタイル */ #random-image { max-width: 90%; height: auto; border: 2px solid #ccc; padding: 5px; display: block; margin: 20px auto; transition: opacity 1s ease-in-out; opacity: 1; } </style> </head> <body> <h1>ランダム画像を表示</h1> <?php // 画像フォルダーのパス $image_folder = 'images/'; // 許可する拡張子 $allowed_extensions = ['jpg', 'jpeg', 'png', 'gif', 'webp']; // 画像ファイルを取得 $files = []; foreach ($allowed_extensions as $ext) { $files = array_merge($files, glob($image_folder . '*.' . $ext)); } // 画像リストをJSON形式で出力 $image_list = json_encode($files); // 初回表示用にランダムな画像を選択 $initial_image = count($files) > 0 ? $files[array_rand($files)] : ''; ?> <!-- ランダム画像を表示するエリア --> <img id="random-image" src="<?php echo htmlspecialchars($initial_image) . '?t=' . time(); ?>" alt="Random Image"> <script> // PHPから画像リストを取得 let images = <?php echo $image_list; ?>; let imgElement = document.getElementById("random-image"); // 初回に画像が空でないか確認 if (!imgElement.src || imgElement.src.includes("null")) { showRandomImage(); // 初回画像が空の場合はすぐにランダム画像を設定 } // 画像を変更する関数 function showRandomImage() { if (images.length > 0) { let randomIndex = Math.floor(Math.random() * images.length); let newImageUrl = images[randomIndex] + "?t=" + new Date().getTime(); // キャッシュ防止 // 新しい画像をバックグラウンドでロード let newImage = new Image(); newImage.src = newImageUrl; // 画像が完全に読み込まれたら変更 newImage.onload = function() { imgElement.style.opacity = 0; // フェードアウト setTimeout(() => { imgElement.src = newImageUrl; imgElement.style.opacity = 1; // フェードイン }, 500); }; } } // 5秒ごとに画像を更新 setInterval(showRandomImage, 5000); </script> </body> </html>html内にphpとjavascript が含まれている。画像の入れ替え時にフェードイン、フェードアウトするようになっている。
質問
次のコードを説明して:
// 画像ファイルを取得 $files = []; foreach ($allowed_extensions as $ext) { $files = array_merge($files, glob($image_folder . '*.' . $ext)); }
このコードは 指定したフォルダ内の画像ファイルを拡張子ごとに取得し、配列 `$files` に格納する処理 を行っています。 📌 コードの説明 // 画像ファイルを取得 $files = []; foreach ($allowed_extensions as $ext) { $files = array_merge($files, glob($image_folder . '*.' . $ext)); } 📌 詳細な解説 ① `$files = [];`（空の配列を作成） $files = []; - 画像ファイルのリストを格納するための空の配列を準備 - この後の `foreach` ループでファイルのリストを `$files` に追加していく ② `foreach ($allowed_extensions as $ext) {...}`（拡張子ごとにループ処理） foreach ($allowed_extensions as $ext) { - `$allowed_extensions` は、許可される画像の拡張子リストを格納した配列（例: `['jpg', 'jpeg', 'png', 'gif', 'webp']`） - この `foreach` ループで、各拡張子ごとにフォルダ内の画像を検索する 例 もし `$allowed_extensions = ['jpg', 'png', 'gif'];` なら、ループは以下のように展開される： $files = array_merge($files, glob($image_folder . '*.jpg')); $files = array_merge($files, glob($image_folder . '*.png')); $files = array_merge($files, glob($image_folder . '*.gif')); ③ `glob($image_folder . '*.' . $ext)`（指定フォルダ内の特定の拡張子のファイルを取得） glob($image_folder . '*.' . $ext) - `glob()` は ワイルドカードを使ってファイル一覧を取得する関数 - `*.` は 「任意のファイル名」＋「指定の拡張子」 にマッチする - `$image_folder` に格納されたフォルダ内の `*.ext` ファイルを取得する 例 もし `$image_folder = 'images/';` で `$ext = 'jpg'` の場合： glob('images/*.jpg') これは `images/` フォルダ内の すべての `.jpg` 画像を取得 します。 ✅ `glob('images/*.jpg')` の結果の例： [ "images/photo1.jpg", "images/photo2.jpg", "images/picture.jpg" ] ⚠️ **この時点では `$files` に追加されず、新しく取得した画像の配列を返すだけ！ ④ `array_merge($files, glob(...))`（取得したファイルを `$files` に統合） $files = array_merge($files, glob($image_folder . '*.' . $ext)); - `glob()` の結果は配列として返される - `array_merge()` を使って、既存の `$files` 配列に追加する - これをしないと、ループの最後の `glob()` の結果しか `$files` に残らない 例 $files = []; // 初期化 $files = array_merge($files, ['images/photo1.jpg', 'images/photo2.jpg']); // JPG 追加 $files = array_merge($files, ['images/pic1.png', 'images/pic2.png']); // PNG 追加 $files = array_merge($files, ['images/sample.gif']); // GIF 追加 結果： $files = [ "images/photo1.jpg", "images/photo2.jpg", "images/pic1.png", "images/pic2.png", "images/sample.gif" ]; 📌 まとめ | コード | 説明 | |------------|------------| | `$files = [];` | 画像ファイルリストを格納するための配列を作成 | | `foreach ($allowed_extensions as $ext) {...}` | 許可された拡張子（例: `jpg`, `png`, `gif`）ごとに処理 | | `glob($image_folder . '*.' . $ext)` | 指定フォルダ内の `*.ext` 画像ファイルを取得 | | `array_merge($files, glob(...))` | 取得したファイルリストを `$files` に追加 | 📌 実際の動作 例: `images/` フォルダに以下の画像がある images/photo1.jpg images/photo2.jpg images/image1.png images/sample.gif 処理の流れ 1. `glob('images/*.jpg')` → `["images/photo1.jpg", "images/photo2.jpg"]` 2. `glob('images/*.png')` → `["images/image1.png"]` 3. `glob('images/*.gif')` → `["images/sample.gif"]` 4. `array_merge()` で全ての配列を統合 最終的な `$files` の内容 [ "images/photo1.jpg", "images/photo2.jpg", "images/image1.png", "images/sample.gif" ] 📌 応用 ✅ すべての画像を一度に取得する方法 `GLOB_BRACE` を使うと `glob()` を1回で済ませることが可能： $files = glob($image_folder . '*.{jpg,jpeg,png,gif,webp}', GLOB_BRACE); ⚠️ ただし、環境によって `GLOB_BRACE` が無効な場合がある （Windows の `PHP 5.1.6` 以前ではサポートされていない） 📌 まとめ ✅ このコードはフォルダ内の画像を拡張子ごとに取得し、配列に統合する処理** ✅ 複数の `glob()` の結果を `array_merge()` で結合** ✅ これにより、すべての画像を `$files` に保存してランダム表示などに活用できる** 🚀 *理解できましたか？ もし質問があれば教えてください！ 😊
実例・サーバーでの実行
追記 : 人間のプログラマーは仕事を失うか?
AIによるプログラミングの進歩により、人間のプログラマーは仕事を失うか?
AIによるプログラミング技術の進歩を見ると、「人間のプログラマーは仕事を失ってしまうのでは？」と心配になるかもしれません。しかし、今後数年から中期的な視点では、多くの場合、プログラマーの仕事が完全になくなるというよりは、その役割が変化・進化していく可能性が高いと考えられます。以下に主なポイントをまとめました。 1. AIは「道具」であり「代替」ではない AI搭載のコーディングアシスタント（コード補完や定型コードの生成など）は、反復作業を自動化したり、エラー検出を効率化したりすることで、開発工程の一部をスピードアップします。しかし、それによってすべてのコードを書く必要がなくなるわけではなく、人間による監督・創造性・問題解決のスキルは依然として必要です。 2. プログラマーのスキルセットの進化 AIが導入されることで、プログラマーはより戦略的で上流工程の業務——たとえば、システム設計、アーキテクチャ構築、セキュリティ対策、プロジェクト計画など——に注力する流れが生まれています。低レベルのコードを書く時間が減る一方で、AIツールを活用した効率化や高度な仕様決定といったスキルが重要になります。 3. 人間の創造性の役割 AIがコードを生成・リファクタリングできるとしても、最終的なゴールを設定し、適切な方向へ導くのは人間です。ビジネスや業務特有の要件やドメイン知識が絡む複雑なシステム開発では、依然として経験豊富な開発者の知見や創造性が欠かせません。AIが持つ学習データには限界があり、人間が持つ包括的・直観的な理解力や批判的思考力を完全に代替するのは難しいでしょう。 4. 新たな機会の創出 AIが一部のコーディング作業を代替することで、「AIエンジニア」や「データサイエンティスト」、「AI倫理担当」、「AIサービス統合を専門とするプログラマー」など、新たな専門分野が生まれています。時代の変化に適応し、新しい技術や役割を身につける意欲がある人にとっては、むしろ選択肢が増える可能性があります。 5. 長期的な展望 将来的には、AIがさらに高度化して、より複雑なプログラミングタスクの一部を担うかもしれません。ただし、これが大規模な失業につながるのか、それとも仕事の内容が大きくシフトするだけなのかを断定するのは難しいところです。歴史的に見ても、技術の進歩によって労働需要が変化する一方で、新しい仕事や業種が生まれる傾向があります。 結論として、AIの発展により一部のタスクは自動化が進みますが、すべてのプログラマーの需要がなくなるわけではありません。むしろ、独自性やクリエイティブな視点、そして高度な意思決定スキルを持つプログラマーの重要性が増すと考えられます。AI技術と並行してスキルを磨き、柔軟に学習を続けることで、今後の仕事の幅を広げることができるでしょう。
感想
php未経験者でもChatGPTにプロンプトすることによって簡単にphpコードを作成できる。
新しいプログラミング言語を習得する際に、これまでの他の言語の経験から、何らかの関数が存在するはずと思っても実際に適確なコードを使えるかが課題。AIを利用するのが効率的であることを実感する。複雑そうなコードも例や注意点も含めて丁寧に説明してくれる。
最近、ChatGPTの応答に📌✅などアイコンが付くようになって見やすくなった。
最後の課題は、拡張子が .html ではなく .php になること。ChatGPTが勧める方法は次の通り。
.htaccessを使用したリダイレクト
Redirect 301 /oldpage.html /newpage.php実装したのがこちら トップページ