はじめに
私はIT業界に転職して５年目ですがコーディングが苦手です。
テスター⇒フロントとＣ#での簡単な開発⇒テスト設計⇒SQLでの開発⇒データに関する要件定義と設計・顧客調整という道を歩んでいます。
最初にHTML、CSS、JavaScriptと学び、業務で必要になったのでC#とSQLを無理やり身に付けた感じです。
自身をもって書けると言えるのはSQLくらい…
コーディングできないくせになんで上流工程やっているんだとなると喋れるから。選んでいただいた立場なので自分を卑下するつもりはないのですが、元々接客業なので本当に喋ることやコミュニケーション能力は得意です。
で、割とロジカルに考えることはできるので設計も一応は業務としてこなすようにはできています。
これもきちんと任されているのでできると言いたい。
ただコーディングが本当にダメ。
苦手、わからない、やる気がしない。だからやらない。
だからもっとできない。
さすがに向き合おうと自分を奮い立たせております。
そして謎に負けず嫌いの脳筋なので、AIが便利なのはわかっているけど自分の力で書きたいと強がってイキっていました。
けど、どうせググりまくるのできちんとAIと共存できるようにタイトル通りのことをやってみた経過を素直に残していきます。
私が書いていたコード
めちゃくちゃ途中過程ですが自分への備忘録も込めて、恥を忍んでそのまま載せます。
これを数カ月後に見て「クソコード書きやがって…」と成長していたい戒めも込めて載せます。
私は先に何をしたいかをコメントで書いてから詰めていきます。
なのでコメント量は多いですが、本当に書かないと何しているかわからなくなって深い海に沈むので制作中はとってもコメントを書いて書いて、最後に消します。
htmlは本当に部品だけ作っているのでデザインなどは今は考えずにまずロジックから。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>当選者抽選ツール</title>
</head>
<body>
<div class = contents>
<p>対象者人数</p>
<form name = "targetForm" action="">
<input type="text" id ="target"></input>
</form>
<button id="button">抽選</button>
<div class="output" id="subject">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
//ボタンクリックで抽選イベント発火
document.getElementById("button").addEventListener('click',
function(){
//入力された対象者人数を取得
const target = document.getElementById("target");
const targetnumber = Number(target.value);
//抽選対象の配列
const subjectArray = [
"アカウント１","アカウント２","アカウント３","アカウント４","アカウント５","アカウント６"
];
//todo:ここをCSVで最終的には読み込む
//ランダムに抽選対象者人数分（targetnumber）をループで取得
for (let i = 0; i < targetnumber; i++){ //todo：ここを入力した値分だけランダムで取得したい
const subject = subjectArray[Math.floor(Math.random() * subjectArray.length)]; //ランダム取得
console.log(subject);
const accountArray = [subject];//配列にどんどん詰めていく
}
console.log(subject);
//1回取得した要素はもう取得しない
//取得した対象者を書き出す
document.getElementById("subject").innerText = subject;
}
);
ChatGPTの回答①
…やっさし～～～！！！！！！わかりやすい！！！
修正版で提案してくれたコードがこちらです。
document.getElementById("button").addEventListener('click', function() {
const target = document.getElementById("target");
const targetNumber = Number(target.value);
let subjectArray = [
"アカウント１","アカウント２","アカウント３",
"アカウント４","アカウント５","アカウント６"
];
// 当選者を入れる配列
let winners = [];
for (let i = 0; i < targetNumber; i++) {
if (subjectArray.length === 0) break; //候補がなくなったら終了
// ランダムに1人選ぶ
const randIndex = Math.floor(Math.random() * subjectArray.length);
const winner = subjectArray[randIndex];
winners.push(winner);
// 選ばれた人を配列から削除（重複防止）
subjectArray.splice(randIndex, 1);
}
console.log(winners);
// 複数人なら改行して表示
document.getElementById("subject").innerText = winners.join("\n");
});
感動しましたが私もエンジニアの端くれなので、上から読みながら自分なりに解釈して書いていきました。
頼ってばかりではいられない脳筋なのでコピペはしません。
あくまでも参考にします。
そしてwinners.push(winner);のpushがわからないのでググります。
一番頼りにしているmdn web docsを読み込みまして、C#のAddメソッドと似ているな～ととりあえずは理解。
色々書いてみたくなりましたが、ここでまた別のことをすると頭が取っ散らかる悪い癖を自覚しているので、まず保留。
subjectArray.splice(randIndex, 1);もspliceは使ったことあるけど、なんで引数に1を指定いるのかわからないので、mdn web docsを読んでみるけどいまいちわからない。
教えて、ChatGPT！！
ちょっと、不安なので素直に認識合わせを行います。
本当に優しいしわかりやすくて、なぜ今まで使ってこなかったのか大後悔。
大枠は理解できたのでコードを書き進めていきます。
私の書いたコード
とりあえず、console.logでやりたいことができているかをテストしたいのでまずはそこまで書いてみました。
画面表示はとりあえず無視。
//ボタンクリックで抽選イベント発火
document.getElementById("button").addEventListener('click',
function(){
//入力された対象者人数を取得
const target = document.getElementById("target");
const targetnumber = Number(target.value);
//抽選対象の配列
let subjectArray = [
"アカウント１","アカウント２","アカウント３","アカウント４","アカウント５","アカウント６"
];
//当選者を入れる用の空の箱を作る
let winners = [];
//ランダムに抽選対象者人数分（targetnumber）をループで取得
for (let i = 0; i < targetnumber; i++){
if (subjectArray.length === 0) break; //候補がいなくなるまで抽選
//ランダムに１人を抽出取得
const randIndex = Math.floor(Math.random() * subjectArray.length);
const winner = subjectArray[randIndex]; //抽選結果を配列にどんどん詰めていく
winners.push(winner); //作った空の箱に結果を配列として追加
//抽選対象が重複しないように１度選ばれた人は削除する
subjectArray.splice(randIndex, 1);
}
console.log(winners);
//取得した対象者を書き出す
//document.getElementById("subject").innerText = subject;
}
);
いけ！！どうや！！！
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
よし、画面表示まで書き切ります。
//取得した対象者を書き出す
//document.getElementById("subject").innerText = subject;
でコメントアウトしていた部分をきちんと直しました。
joinは使ったことあるからわかるぞ…
//取得した対象者を書き出す＋複数人なら改行して表示
document.getElementById("subject").innerText = winners.join("\n");
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
ただ、「アカウント5」が重複したのでリセットも必要なのでは？と悩んできたのですが疲れたのでもうやめます。
ChatGPTに褒めてもらうのと残課題整理
もう自己肯定感爆上げ。
たださっき気になった「アカウント5」重複問題が気になるのでそれだけは投げておきます。
色々コードも教えてくれるけど、今の頭ではぽやぽやしているので明日に期待。
なのでこちらの記事も続編とさせていただきます。
おわりに
ChatGPTを丸のみにするのと、仕様が自分で整理できないのにAIに頼るのは危険だなというのが素直な感想です。
自分なりに考えることと仕様を的確に伝えられればめちゃくちゃ強い武器になるなと思ったので今後もうまく付き合っていきたいですね。
弊社内ではAI学習を推進しているのですが、「ChatGPTは優しくて、Geminiはちょっと厳しいよね」という話もよくするので、ChatGPTを頼って完成させてからGeminiにコードレビューもしてもらおうかなと思っています。
現在はデザイン面丸無視ですが頭の中では構造があって、弊社公式キャラのココアちゃんを取り入れたいのでそちらも進めていきます。
コーディングが素直に楽しく感じられたので、毎日コツコツ頑張ります！！！
オブジェクティブグループではXの投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。