日本では生成AIへの危機感が薄いように思いますが、今後の10年単位で無くなるまたは大きな打撃を受ける業務は、ざっと思いついただけでも以下のものがあります。私はこれまで外国語の学習にかなりの時間を割いてきたけど、もし私に子供がいたとしたら、同じことは勧めません。

語学系
1．翻訳者
2．語学教師
3．企業の中の外国語屋

IT系
1．派遣型のソフト開発会社
2．SIer
3．ITコンサルタント

専門業務系（前提：法律の変更が必要→専任業務を無くす）
1．弁護士・行政書士・社労士・司法書士
2．不動産販売士
3．税理士

金融系
1．ファイナンシャルプランナー
2．投資コンサルタント
3．保険の計算屋

学術系
1．多くの文系の教官
2．学術系出版社の編集者
3．図書館の司書

その他
1．サポート業務
2．多くの産業系デザイナー
3．企業の中の経営企画
4．映画やテレビの脚本家

私はプログラミングは昔のやり方のままで、未だにIDEを使わずエディターでプログラムを書いていますが、思う所あってVSCodeをインストールしてみました。生成AIによる楽々プログラミングにはまったので、GitHub Copilotを使ってみようかと思ってです。まあお遊びかもしれませんが、高齢プログラマーに生成AIは強力な武器になりますので。

会社で業務の合間にコツコツ作っていた製品検索サイトがようやく完成しました。写真も1/4くらいは私が撮影したのを使っていて、生成AIの助けは借りましたが、基本的に一人で作って仕上げました。60歳過ぎて初めてLaravel/PHPでちゃんとしたサイトを作るということに成功して、ちょっと達成感があります。

取り敢えず、スイッチの操作部種別を選んだら、それに対応する極数の候補を動的に絞り込むというJavaScriptのコードをChatGPT4oに作らせ動きました。最初は絞り込みの対応関係をJSONで書いてそれを読み込ませようとしたのですが、上手く動かないので結局元のHTML（blade）ファイルの中に書込む形になりました。あまり綺麗ではありませんが。しかしなかなか大変。書店でJavaScriptの本を何冊か立ち読みしてみましたが、現在選択されている候補を取得するとか、逆に候補を設定するとかはありましたが、動的な絞り込みまで載っている本は見つけられませんでした。
=========================================
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
const switchOpPartSelect = document.querySelector(‘select[name=”switch_op_part_id”]’);
const switchPoleSelect = document.querySelector(‘select[name=”switch_pole_id”]’);

const allPoleOptions = [
@foreach ($switch_poles as $switch_pole)
{ id: “{{ $switch_pole->id }}”, text: “{{ $switch_pole->poles_number }}” },
@endforeach
];

switchOpPartSelect.addEventListener(‘change’, function() {
const selectedOpPartId = parseInt(this.value);
let filteredPoleOptions = [{ id: “1”, text: “-” }];

if ([2, 3, 5, 6].includes(selectedOpPartId)) {
filteredPoleOptions = filteredPoleOptions.concat(allPoleOptions.filter(option => [11, 12, 13, 14].includes(parseInt(option.id))));
} else if (selectedOpPartId === 4) {
filteredPoleOptions = filteredPoleOptions.concat(allPoleOptions.filter(option => [11, 12].includes(parseInt(option.id))));
} else if (selectedOpPartId === 7) {
filteredPoleOptions = [{ id: “1”, text: “-” }].concat(allPoleOptions);
} else {
filteredPoleOptions = [{ id: “1”, text: “-” }].concat(allPoleOptions);
}

switchPoleSelect.innerHTML = ”;
filteredPoleOptions.forEach(option => {
const newOption = document.createElement(‘option’);
newOption.value = option.id;
newOption.textContent = option.text;
switchPoleSelect.appendChild(newOption);
});
});

document.querySelector(‘form’).addEventListener(‘submit’, function() {
showLoadingMessage();
});

window.resetForm = function() {
document.querySelectorAll(‘select’).forEach(select => {
select.selectedIndex = 0;
});
document.querySelector(‘input[name=”type_name”]’).value = ”;

switchPoleSelect.innerHTML = ”;
[{ id: “1”, text: “-” }].concat(allPoleOptions).forEach(option => {
const newOption = document.createElement(‘option’);
newOption.value = option.id;
newOption.textContent = option.text;
switchPoleSelect.appendChild(newOption);
});
}
});

function showLoadingMessage() {
document.getElementById(‘loading-message’).style.display = ‘block’;
document.body.classList.add(‘loading’);
}
</script>

Webサイトでのデータベース検索で、各オプションの選択肢で、あるオプションのある選択肢を選んだ時に、その選択肢の時だけに存在する他の選択肢を絞り込む（存在しないものを消す）という処理について、以前ChatGPT4に聞いたのですが、回答はDBの各テーブルにリレーション（belong toなど）を設定して、それを使ってJavaScriptで候補を絞り込むだったのですが、良く考えるとそれだと必ずDBへのアクセスが生じ、レスポンスが落ちます。なので、要は候補同士の相関をJSONで書いておいて、それをHTMLを開く時に最初に読むやり方の方がいいと思って、再度ChatGPT4に聞いたら、その考え方は正しいようです。
================
私
以前、あるオプションの選択肢の選択によって他のオプションの選択肢を絞り込む（限定する）処理についてお聞きしましたが、その時はきちんとDBで各オプションのリレーションを設定して、JavaScriptで処理するということでした。そのやり方だとサーバーへの問い合わせが必ず発生しレスポンスが落ちるのではないでしょうか。簡易的なやり方として、絞り込みの関係になるオプション同士の連携をJSONなどで書いておいて、それをHTMLを読み込む最初に読み込んでおいて絞り込みに使う、というやり方はどうでしょうか？
ChatGPT
はい、オプションの選択肢を事前にJSON形式で定義しておき、クライアント側で絞り込みを行う方法は、有効なアプローチの一つです。これにより、サーバーへのリクエストを減らし、レスポンスの速度を向上させることができます。以下に、その具体的な方法を示します。
1. JSONファイルの作成
まず、オプション同士の関係を定義したJSONファイルを作成します。このファイルをサーバーの静的な場所に置き、HTMLページがロードされたときに読み込むようにします。
例：options.json

json
コードをコピーする
{
“product_op_parts”: {
“1”: {
“series_names”: [1, 2, 3],
“poles”: [1, 2]
},
“2”: {
“series_names”: [2, 3],
“poles”: [2, 3]
}
},
“product_series_names”: {
“1”: {
“poles”: [1]
},
“2”: {
“poles”: [2, 3]
}
}
}
2. HTMLとJavaScriptの修正
次に、HTMLとJavaScriptを修正して、JSONファイルを読み込み、選択肢を絞り込む処理を追加します。
例：create.blade.php
html
コードをコピーする

<style>
/* … 既存のスタイル … */<br />
</style>
<main></main>&nbsp;
<div align=”center”><big><big><big><big>ABC株式会社</big></big></big></big></div>
<div align=”center”><big><big>ABC Co., Ltd.</big></big></div>
<form action=”{{ route(‘product_name.search’) }}” method=”POST”>@csrf
<div>
<h3>製品名検索 <small><small>Switch Product Search</small></small></h3>
各オプションをプルダウンリストから選択して、ページ下部の［検索］ボタンをクリックしてください。
Please select each option from the pull-down lists and press the search button at the bottom of the page.
<label><b>操作部種別</b> Type of Operational Parts</label>
<select name=”product_op_part_id”>
<option value=””>選択してください</option>@foreach ($product_op_parts as $product_op_part)
<option value=”{{ $product_op_part->id }}”>{{ $product_op_part-&gt;sosabu_type }}</option>@endforeach
</select>
</div>
<div><label><b>シリーズ名</b> Series Name</label>
<select name=”product_series_name_id”>
<option value=””>選択してください</option>@foreach ($product_series_names as $product_series_name)
<option value=”{{ $product_series_name->id }}”>{{ $product_series_name-&gt;series_name }}</option>@endforeach
</select></div>
<div><label><b>極数</b> Number of Poles</label>
<select name=”product_pole_id”>
<option value=””>選択してください</option>@foreach ($product_poles as $product_pole)
<option value=”{{ $product_pole->id }}”>{{ $product_pole-&gt;poles_number }}</option>@endforeach
</select></div>
<!– 他のフォーム要素 –>
<table border=”0″ width=”350″ frame=”void” rules=”none”>
<tbody>
<tr>
<td><input type=”submit” value=”検索/ Search”></td>
<td>@csrf
<button type=”submit”>選択肢のクリア/ To clear options</button></td>
</tr>
</tbody>
</table>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
let options = {};
fetch(‘/path/to/options.json’)
.then(response => response.json())
.then(data => {
options = data;
});
const opPartSelect = document.getElementById(‘product_op_part_id’);
const seriesNameSelect = document.getElementById(‘product_series_name_id’);
const poleSelect = document.getElementById(‘product_pole_id’);
opPartSelect.addEventListener(‘change’, function() {
const selectedOpPart = this.value;
updateOptions(selectedOpPart, ‘series_names’, seriesNameSelect);
updateOptions(selectedOpPart, ‘poles’, poleSelect);
});
seriesNameSelect.addEventListener(‘change’, function() {
const selectedSeriesName = this.value;
updateOptions(selectedSeriesName, ‘poles’, poleSelect);
});
function updateOptions(selectedId, relationKey, targetSelect) {
const relatedOptions = options.product_op_parts[selectedId] ? options.product_op_parts[selectedId][relationKey] : [];
Array.from(targetSelect.options).forEach(option => {
option.style.display = relatedOptions.includes(parseInt(option.value)) ? ‘block’ : ‘none’;
});
targetSelect.value = ”;
}
});
</script>

まとめ
オプションの関係性をJSONファイルで定義します。
HTMLページロード時にこのJSONファイルを読み込みます。
JavaScriptで選択されたオプションに基づいて、他のオプションの選択肢を絞り込みます。
この方法で、クライアントサイドでの処理が行われるため、サーバーへのリクエストが減少し、レスポンスの速度が向上します。