一兵卒の工場労働者がChatGPTでアプリ制作-プログラミングほぼ未経験から超シンプルなToDo(リスト)アプリを作ってみた。(2,3時間)
はじめに。
私は製造業の工場で働いている末端労働者だ。
普段の仕事では、パソコンを使う機会はほとんどない。
現場で機械を操作し、または手作業で製品を作る仕事が中心だ。
しかし、最近のAI技術の進化を見ていると、「このままで大丈夫なのか」と感じることが増えた。
AIによって仕事の形は大きく変わっていく。
プログラミングができる人だけがAIを使う時代ではない。
AIを使って、何かを作れる人が求められる時代になると感じた。
毎週読んでいる
中島聡さんの
メルマガにも、エンジニアじゃなくても
手を動かすこと(コードを書くこと)
の大切が毎回書かれている。
そこで、連休ということもあり
自分自身の経験値を増やすために、Aiを使ってアプリ制作することにした。
目的はプログラマーになることではない。
副業でもない。
AIを使って、自分のアイデアを形にする経験を積むことだ。時代に置いていかれない為にも。
今回は、ChatGPTとClaudeを使いながら(主にChatGPT)、プログラミング未経験の工場勤務者でもアプリ制作ができるのか挑戦した。
(プログラミング経験は、5年前ぐらいにHTMLとCSSを独学で少しかじった程度。ChatGPTやclaude,grokは文章作成や要約、リンク貼って企業決算や論文要約、画像からプロンプト作成、画像生成などが中心。)
まずは開発環境を準備する。
最初に取り組んだのは、プログラミング環境の準備だった。
今回使ったものは以下。(勿論、ChatGPTに相談しながら、ダウンロードやアカウント作成)
・VS Code
・Git
・Node.js(ダウンロードしただけ)
・Claude Code(今回はパス)
・ GitHub
VS Codeはコードを書くための編集ソフト。
Gitはプログラムの変更履歴を管理するツール。
Node.jsは開発ツールを動かすための環境。
Claude CodeはAIにプログラム作成や修正を依頼できる開発ツールだ。
しかし、ここで問題が発生した。
Claude Codeを使うには、Claude ProやMaxなどの有料プランが必要だった。
今回は無料で挑戦することにしたため(難易度低いから)、Claude Codeではなく、ChatGPTを活用する方法に切り替えた。
AIにアプリ制作を依頼する。
次にChatGPTへ依頼した。
「 初心者向けのToDoアプリを作る方法教えて」
すると、AIがコードを生成してくれた。
作成されたファイルは3つ。
index.html
style.css
script.js
それぞれ役割が違う。
HTMLは画面を作る。
CSSはデザインを整える。
JavaScriptは動きを作る。
今までプログラムを書いた経験がほぼない自分でも、AIに聞きながら進めることで、少しずつ意味が理解できた。
VS Codeでファイルを作成する。
次にVS Codeを使って3つのファイルを作成しコピペした。
最初はファイル名や拡張子という言葉もよく分からなかった。(拡張子のせいで機能しなかったり、悪戦苦闘も少しあった)
HTMLとは何なのか。
CSSとは何なのか。
JavaScriptとは何なのか。
分からないことだらけだった。
しかし、その都度AIに質問することで、一つずつ理解しながら進めることができた。
分からないことをすぐ聞けることは、AI学習の大きなメリットだと感じた。
初めてアプリが動いた瞬間。
作成したindex.htmlをブラウザで開いた。
最初はVS Codeが開いてしまい、少し戸惑った。
「ファイルを作ったのに、なぜアプリが表示されないのか。」
初心者には小さな問題でも大きな壁に感じる。
しかし、設定を変更してブラウザで開くことに成功した。
画面にはToDoリストが表示された。
(かなり簡素なもの)
入力欄がある。
追加ボタンがある。
入力するとタスクが追加される。
削除ボタンを押すと消える。
自分で作ったアプリ(ほぼコピペしただけ)が実際に動いた。
この瞬間は、想像以上に達成感があった。
Gitでアプリの履歴を保存する。
アプリが完成した後、次に挑戦したのはGitだった。
Gitとは、プログラムの変更履歴を管理する仕組みらしい。
最初はGitとGitHubの違いも分からなかった。
Gitは何なのか。
ターミナルとは何なのか。
コマンド入力で何をしているのか。
分からないことばかりだった。
AIに質問しながら、一つずつ進めた。
まず、作成したToDoアプリのフォルダでGitを開始した。
git init
と入力した。
すると、
「このフォルダをGitで管理する準備ができた」
という状態になった。
次にファイルを登録した。
git add .
そして最初の保存を実行した。
git commit -m "初めてのToDoアプリ完成"
すると、
index.html
style.css
script.js
3つのファイルが保存された。
自分の作ったアプリに、最初の履歴が付いた瞬間だった。
GitHubに公開する。
次はGitHubへの公開に挑戦した。
ここでも最初は混乱した。
GitとGitHubは名前が似ている。
(中島聡さんのメルマガでもよく出てくる言葉だ)
しかし役割は違う。
Gitは自分のパソコン内で履歴を管理するもの。
GitHubは、その履歴やプログラムをインターネット上に保存する場所だ。
GitHubにアカウントを作成し、ToDoアプリ用のリポジトリを作った。
そして、VS Codeのターミナルからアップロードを行った。
途中で何度か失敗した。
例えば、
qgit remote add origin
とコピペしてしまった。
たった一文字の入力ミスでエラーになった。
また、コマンドの一部を入力し忘れてエラーになることもあった。
プログラミングでは、ほんの少しの違いでも動かなくなることを実感した。
しかし、エラー内容をAIに聞きながら修正することで、無事にアップロードできた。
最後には、
「Writing objects: 100%」
という表示が出た。
自分の作ったアプリがGitHub上に保存された瞬間だった。
初心者でもアプリ制作は可能だった。
今回作ったものは、シンプルなToDoアプリだ。
本格的なサービスとは違う。
しかし、プログラミング経験ゼロの
底辺工場勤務者
でも、AIの力を借りながらアプリを完成させ、さらにGitやGitHubまで経験することができた。
昔なら、プログラミングの基礎を何ヶ月も勉強してから作り始めていたかもしれない。
しかし今は、AIに質問しながら実際に作ることで、学習と制作を同時に進められる。
今後挑戦したいこと。
今回作ったToDoアプリには、まだ改善できる部分がある。
次は、
・データ保存機能の追加。
・デザイン改善。
・スマホ対応。
・新しい機能追加。
・より本格的なアプリ制作。
などに挑戦したい。
AI時代では、専門知識を持っている人だけが作る側になるのではない。
AIを使いながら、試行錯誤できる人が新しいものを作れる時代になる。
工場勤務でパソコンをほとんど使わない自分でも、AIを使えばアプリ制作まで到達できた。
大切なのは、最初から完璧な知識を持つことではない。
まず挑戦して、経験値を積むことだ。
そして、手を動かすこと、らしい。
今回のToDoアプリ制作は、その最初の一歩になった。
あと、別の私の趣味として、
株式投資
がある。
Aiはただのブームで、実際に課金している人はエンジニア以外ではいないと散々言われている、
ただ、今回、やってみて割と自分ごとになった。
to doリストのその少し先には、割と現実的に
claude codeやcodex
(課金)があり、それ使って自然言語で入力したら、より簡単に作成出来るし、デザインとかも簡単に修正出来る。
アプリの幅も広がる。
microsoft,nvidia,AMD,beなど、
今持っているアメリカのテック株
も前より自分ごとに感じれた。
関連記事
