9,053 文字
皆さん、今日は全くプログラミングを知らなくても、プログラミングする方法を学びます。完全な素人の方、プログラミングについて全く何も知らない方も、今日初めてのプログラムを作ることができます。これであなたもプログラマーの仲間入りですね。さあ、一緒に何が起きているのか見てみましょう。
いつものように、いいねを押してくれた皆さん、チャンネル登録してくれた皆さん、そして特に人工知能チャンネルをサポートしてくれているメンバーの皆さんに感謝します。メンバーは独占インテリジェントエージェント動画や先行公開動画にアクセスできることを忘れないでください。
皆さん、状況はこうです。人工知能がVibコーディング（会話だけで一切コードを書かずにプログラミングする方法）でプログラミングするようになった今、この新しい世代は多くのプログラミングを行うことになると理解し始めました。普通の人々もプログラマーになり、最低限のプログラミング知識を持って何が起きているのかを理解し、AIが生成するコードが自分のニーズを満たしているか、正しい方向に進んでいるか、間違った方向に進んでいるかを評価できるようになる必要があります。これらすべてを可能な限り簡単な方法で、全体像を掴み、少し技術的な視点でこれらを見ることができるようにするのです。これが将来大きな違いを生み出します。
すでにお見せしたように、Gen Sparkに入って、世界で最も単純なプロンプトを入力しました。「標準的なペットショップサイトを作成して」という一文だけです。すると、Gen Sparkは「標準的なペットショップサイトの作成を手伝います」と言って、コードを生成し、何をしたのかを簡単に説明して終わりました。それだけです。サイトをプレビューするとボタンをクリックすると、作成したサイト全体が表示されます。「ペットフレンズへようこそ」と書かれ、拡大するとフルバージョンが表示されます。「ペットフレンズへようこそ」と書かれ、シャンプー、グルーミング、獣医、ペットホテルのプロモーション、特集商品（ドッグフード、インタラクティブトイなど）、ペットフレンズについて、Facebook、Instagram、WhatsApp、コメント、ペットギャラリー、お問い合わせなど、完全なサイトが表示されます。まるで実際に人が作ったカスタマイズされたサイトのようです。
そして面白いことに、会話を続けて「これを改善して」「あのボタンを改善して」などと要求すると、AIはサイトを更新し続けます。そして今、皆がこれらのツールを使用して自分自身のサイトを生成しているのを見ると、私は気づきました。これからみんながプログラミングを始めることになり、プログラミングの基本的なことをいくつか理解して、迷わずにこの世界に入っていく必要があるのです。そのために、皆さんに5つのことを教えます。
まず第一に、皆さんが使っているこのブラウザを、今からは違った見方で見る必要があります。Wordを考えるとき「テキストを書くもの」と考え、Excelを考えるとき「スプレッドシートを作る、データ分析をするもの」と考えます。これまでブラウザを考えるとき「インターネットにアクセスするもの」と考えていましたが、今からは別の形で考えるのです。ブラウザはHTTPを実行します。HTTPのHTは「ハイパーテキスト」を意味し、これは古い時代の言葉です。当時、人々がテキストを読むとき、テキストには音声もなく、ビデオもなく、クリックもなく、じっと見ているだけの紙でした。リンクや画像、ビデオ、音声、さまざまな効果が可能だと発見されたとき、彼らはこれを「ハイパーテキスト」と呼びました。
そこで、架空のファイル「ブラジルの歴史」を作成しました。このファイルをブラウザで開くと、「ブラジルの心」というタイトルが表示され、「海と森の間で熱帯の心臓が鼓動する国がありました。それはブラジルと呼ばれていました。（ChatGPTが書きました）」というテキストが表示されます。ここで右クリックして「ページのソースを表示」をクリックすると、画面に表示されているテキストがそのまま表示されます。タイトル「ブラジルの心」、「海と森の間で熱帯の心臓が鼓動する国がありました。」。WPを入力すると改行され、元の表示と同じようになります。
これが私が皆さんに教えた最初のことです。あなたが画面で見ているものがあり、それを生成しているコードがあります。この場合、コードはなく純粋なテキストだけです。では、GeminiにこのテキストをHTMLに変換するよう依頼しましょう。「このシンプルなテキストをHTMLに変換してください」と言って、プレビューを作成するためにキャンバスに貼り付けて実行します。
基本的に、これで通常のテキストではなくハイパーテキスト言語に変換されます。ご覧のように、タイトルが緑色になり、フォーマットが少し変更され、背景に少しマージンがあり、最後にイタリック体のテキストがあります。もう普通のテキストだけではなく、他のことも起きていることがわかりますね。
では、何が変わったのかを理解するために、このコードを見てみましょう。プレビューからコードに移動すると、最初の行には「これはHTMLタイプのドキュメントです」と書かれています。すべてが変わり、「タグ」が登場しています。head、/headのように、始まりと終わりがあります。HTMLタグがあり、それは閉じていません。つまり、最後の行でこのHTMLが閉じられます。コードは始まりと終わりがあり、これらのタグはコードが存在する場所です。そして、このコードはheadというヘッダー部分とbodyという本体部分の2つに分かれています。bodyも最後に閉じられます。
常にこのようになります。全体がHTMLで、その中にテキストがあり、上部にheadというヘッダー、下部にbodyというコードがあります。例えば、titleというタグがあり、これが上部に名前を表示します。このコードを私たちのファイルに入れてみましょう。「ブラジルの歴史修正.html」という名前のファイルを作成し、ファイルタイプをHTMLに変更すると、Chromeのアイコンになります。Notepadで開き、生成されたテキストを貼り付けます。タイトルは「ブラジルの心」で、テキスト全体があります。ダブルクリックすると、ブラジルの歴史修正.htmlというプログラムが表示され、上部に「ブラジルの心」というタイトルが表示されます。
これは、画像、ビデオ、タイトル、ボタンなどを追加する場合、ブラウザがそれを作成する準備ができていることを意味します。さらにわかりやすくするために、タイトルテキストを「ブラジルの心（ChatGPTによって書かれました）」に変更し、Ctrl+Sで保存し、更新すると、「ChatGPTによって書かれました」というテキストが表示されます。
皆さんは理解していますね。これからブラウザをプログラムを作成し、そこに物を置くことができる場所として見るようになります。右クリックしてページのソースを表示すると、今度は単なるテキストではなく、そのごちゃごちゃしたものが表示されます。「黄金の浜辺」などの部分には、段落タグのp/pとタイトルタグのh1/h1があります。これがウェブページの記事の仕組みです。
ここで特別な詳細があります。「style」と書かれていますが、これはスタイルを意味します。ある人が「テキストはそのままでサイトを完全に変更できる別のスタイルファイルを作りたい、そのテキストを壊すリスクなしに」と言ったとします。そこで生まれたのがCSSです。一般的には、ここに表示されているように、style/styleというように1つのファイルにまとめることができますが、CSSは別々に表示することもできます。
スタイルの変更を依頼すると、ここだけを変更します。例えば、フォントを設定しているのが見えますが、「フォントをもっと太く、重みのあるものに変更してください」と言うと、フォントの重みを700のboldに変更するという部分だけを変更します。これでCSSとは何かを理解できました。
これは動きのない、テキストだけの静的なページですが、JavaScriptと呼ばれるプログラムが実行されている可能性もあります。「このHTML内にJavaScriptを作成してください。何か面白いものを作成してください」とAIに依頼してみましょう。これで、このように静的なサイトに少し動きを加えるコードが追加されます。
AIは「ブラジルの心」というタイトルをより動的にするために、緑、黄色、青の間で色が変わるようにJavaScriptを追加すると説明しました。コードを見ると、script/scriptタグの中に少しコードがあります。タイトルを取得し、緑、黄色、青の3色を選び、「タイトルを変更する」という関数を作成し、1.5秒ごとにこの関数を呼び出しています。プレビューでは、黄色、青、緑、黄色、青、緑、黄色、青と色が変わります。
これら3つの考え方を理解できれば、ハイパーテキストであるHTML、HTMLのスタイルであるCSS、HTMLの動的な部分であるJavaScriptを理解できます。これがJavaScriptで、私が話している4番目のことです。
しかし、なぜHTML、CSS、JavaScriptについて知る必要があるのでしょうか？なぜこれらを学ぶ必要があるのでしょうか？それは一般的に、これらが分かれて表示されるからです。例えば、「HTML、CSS、JavaScriptを分離してください」と言うと、プロフェッショナルなサイトでこのように表示されます。私たちはすべてをまとめて簡略化し、ブラウザで実行できるようにし、プログラミングをより簡単で動的にして、すべてのプロジェクトを開発できるようにしています。
興味深いことに、AIも理解しています。「このキャンバス環境では別々のCSS、JSファイルを作成することはできませんが、HTML文書内でHTML、CSS、JavaScriptのセクションをはっきりと区別するようにコードを整理できます」と説明しています。このような場合、別々の作成は必要ありません。ただ、時々このようなものに出会うことがあると理解しておけば十分です。これは外部アドレスを渡すスクリプトで、外部ファイルからプログラミングを読み込みます。このファイルが読み込まれないと機能しません。
これを理解したことで、実際にプログラムを作成し始めるときに迷わずに済みます。例えば、会社で働いていて毎日顧客登録をする必要があり、それに多くの時間がかかるとします。ソフトウェアを購入したり、誰かにソフトウェアを作らせたりはしたくないとします。「新しい顧客を追加して、登録後に一人ずつ進めることができる標準的な人物登録用HTMLを作成してください」とAIに依頼してみましょう。
素晴らしい、AIは登録フォームを作成しました。bob@bob.com、1234321と入力して、顧客を登録してみましょう。成功しました。次にalice@alice.com、電話番号4321134で登録します。成功しました。AliceとBobが登録されました。
これで魔法のようなことが起きました。これまでコンピュータを使うだけで、プログラムを作ることができなかった人が、たった一つの文で日常生活で使える有用なものを作成しました。このコードをコピーして、新しいテキストファイルを作成し、「登録.html」と名付け、拡張子を変更し、最も単純なエディタであるNotepadで編集して保存します。登録をダブルクリックすると、登録フォームが表示されます。
「ページを再読み込みすると名前が消えてしまいました。これを解決できますか？」と質問すると、会話が始まり、改善を要求し続けることになります。AIは何をしているのかを説明してくれます。「ブラウザのローカルストレージを使用できます」。ただし、プログラマーの方々から批判されるかもしれませんが、AIが提示したこの解決策にはセキュリティの問題があります。ブラウザ内に情報を保存するからです。
新しいコードをコピーして登録フォームに貼り付け、更新します。F5キーを押すことを忘れないでください。bob@bob.comを登録し、次にalice@alice.com、43211を登録します。すべてが正常に機能したら、F5キーを押して再読み込みしても、登録は残ります。これはブラウザのローカルストレージに保存されたことを意味します。
プログラミングに詳しい人は「セキュリティの問題がある。ブラウザのストレージに機密データを保存しており、そこに保存されたままになる。悪意のある人がこれらのファイルにアクセスする可能性がある」と言うでしょう。
ここで興味深いステップに進みます。自分のコンピュータで実行する非常にシンプルなファイルでオンラインに置かないアプリケーションと、オンラインのアプリケーションには違いがあります。ブラウザ内で実行されていてもオンラインではありません。家でこのアドレスにアクセスしようとしても、コンピュータ上でこのファイルを探そうとしますが、オンラインにないため見つかりません。ハードドライブ内にあります。そのため、ものがここにある間はセキュリティの問題はそれほど高レベルではありません。小さなセキュリティの欠陥はありますが、本番環境に移行せず、何千人もの人々が訪れるサイトにならないような小さなアプリケーションで作業している限り、それは巨大な問題ではありません。
これで、なぜページのソースコードを見ていたのかが理解できます。実際のサイト、G Sparkなどの公式サイトにはプログラミングがどのようになっているのかを見ることができるものがあります。ただし、最も重要なのは、この部分を隠して人々が何が起きているのかを見られないようにする方法があることです。実際には、人々は一部を見ることができ、機密データではない許可された部分を見ることができます。これをフロントエンドと呼び、機密データや機密情報の秘密の部分はバックエンドに残ります。この小さな詳細は非常に重要です。
例えば、「このファイルをNode JSに変換して、保存された顧客がバックエンドで安全になるようにしてください」と言うことができます。これで少し高度なプログラミングレベルに入り、JavaScriptを実行する基本的なサーバーを作成します。人々がアクセスできる可能性のあるものがサーバーに隠され、より安全になります。ただし、このステップは本当に安全性が必要なことをする場合にのみお勧めします。そうでなければ、前のステップのままでアプリケーションを作って使い、幸せでいられます。
AIは非常に明確に説明しています。server.JSというサーバーがあり、起きていることを表示するindex.HTMLというファイルがあります。Node JSをインストールし、同じフォルダにserver.JSとindex.HTMLを保存するなど、実行するために必要なすべてを説明しています。
server.JSファイルを作成し、この登録フォームをindex.htmlに変換します（これは一般的にサーバーが実行するデフォルトのページ名です）。indexファイルも更新し、ポート3000でサーバーを実行します。登録を行うと、この新しい登録がサーバー内で機能し始めます。
最後に、「サーバーで顧客を保存するファイルを作成してください」と依頼できます。この時点で、AIは行ったすべての変更、作成したディレクトリ、customers.jsonという名前のファイルがあることを説明します。すべてがうまくいけば、サーバーを再度実行し、更新して、最後の登録を行います。bob@bob.com、1234321で顧客を登録します。登録されたと表示され、すべてがうまくいけば、customers.jsonファイルができているはずです。
見てください、奇跡的に成功しました！Notepadで開くと、きれいに登録された顧客がいます。これで最も興味深い部分に入ります。このファイルを持ち、このように作業することで、ファイルを生成し、この顧客登録ツールや皆さんの創造性で作成したものを自動化されたタスクと統合することができます。プログラマーを雇わなくても、シンプルな画面を作るのに3ヶ月かかるような人を雇わなくても、少しずつ改善し、機能するようにすることができます。
正直に言うと、まだ多くのセキュリティ問題を考慮する必要がありますが、このビデオを初めて見て理解できたことで、少なくとも物事がどのように機能するのか、どのようにしてあなたの生活で機能する可能性があるのかについて理解できました。人工知能を使うには正しい質問をする方法を知る必要があると言われていますが、これらの知識があれば、より正確な質問をして、本当に重要なことを追求することができます。
この顧客を登録してファイルを生成する超シンプルな例は魔法です。これこそが生活です。これだけのことをする何千もの応用があり、実際に日常生活で使用することができます。このプログラムを続けて、顧客ファイルのインポート機能を作成したり、Excelに変換したり、CSVに変換したりすることもできます。AIと会話を続けるだけで、すべてが機能します。
そして、常に忘れないでください。エラーや小さな問題が発生した場合は、AIとの会話を続け、もっと説明を求め続けてください。AIはここで私たちが行ったことすべてに応答し、より詳細に説明しています。私はただのメッセンジャーとして何が起きているのかを説明しているだけです。
自動的に生成されたこのサイトは、サーバー内にあるユーザーが見えないプライベートな部分と、ブラウザで人々に表示される公開部分との間の分離がありません。Gen Sparkが行ったよりも一歩進んだと言えますが、Gen Sparkができないというわけではなく、私がそれを求めなかっただけです。サイトを作ってと言っただけで、できるだけシンプルな方法で作られました。だからこそ、正しい質問をするために物事を知ることが重要なのです。知識が多ければ多いほど、より正確な質問ができ、より高度なことができるようになります。
だから勉強を続けてください。AIがあなたの仕事を奪うと思わないでください。今、人工知能をあなたの味方につける方法を学んでいます。AIを使っているからといって仕事を失うわけではありません。このようなビデオを見続けるためにチャンネルをサポートしたい場合は、メンバーになってください。メンバーは独占インテリジェントエージェント動画や先行公開動画にアクセスできます。いいねをお願いします。
このプロンプトはとても良かったです。「3JSを使用してシンプルな3D車シミュレーターを単一のHTMLファイルで作成してください。雲、山、道路、いくつかの木、周回する列車を追加してください。矢印キーとWASDキーで車を制御できるようにしてください。三人称視点でカメラが車を追跡するようにしてください。収集するコインを配置し、対戦相手と一緒にプレイして、最初に10枚のコインを集めた人が勝ちます。コインが収集されると、補充するために別のコインが出現する必要があります。衝突があると、車は爆発して開始点に戻る必要があります。画面の中央にコインを集めたことを表示してください。スペースキーでゲームを開始および再開できるようにしてください」というプロンプトです。
このプロンプトは常に驚きを与えてくれます。何度か素晴らしい結果になり、時々それほどでもないこともあります。コメントに残しておくので、自分のコンピュータで実行して何が起こるか見てください。このバージョンがよくなければ、素晴らしいものをお見せします。Gemnight 2.5 Proは、サイト上で直接オンラインゲームを作るのに最適です。このキャンバスのアイデアを思いついた人は素晴らしいです。キャンバスは命です。
彼がこのコードに残した興味深い詳細があります。100%コメントアウトされたコードの部分があり、「車をだいたい道路上に保つ（オプション）」と説明しています。つまり、必要に応じてコメントを解除できますが、彼はこのコメントについて言及するかどうかわかりません。
時々、「キャンバスをアクティブにして」と書いて、「キャンバスに表示して」と言うと、AIは目を覚まして、コードをそこに投げて表示します。このようなバグが発生すると、テキストが中央に表示されることがあり、手動で削除する必要がありますが、これは小さなことで、GPTでも発生します。
プレビューを見てみましょう。3、2、1、始まり！ここで、スペースを押して開始するように言われています。前進しようとしています。後退します。あれ、加速できません。後退するだけです。私は動けず、衝突もしません。道路上を歩いているだけで、プレイできません。前進キーが後退になり、後退キーが何もしません。これを修正してください。
ゲームが修正されました。3、2、1、始まり！スペースを押して開始します。やっと！これでコインが見えます。AIが勝っています。3対4です。AIに当たって爆発しました。またぶつかりました。AIは勝ちそうです。AIが勝ちました。
ご覧のように、2つのステップで、2回目のプロンプトですでに機能しました。これは実際に良くできました。コインは道路上にきれいに配置され、私はそれを道路上に配置するように頼んでいませんでした。AIは自分が思った通りに作成し、実際には良い結果になりました。AIがまた勝ちました。コインを取り逃がしました。もう一つ取りました。AIが再び勝ちました。AIが世界を支配するかもしれませんね。
あなたの感想をコメントして、このプロンプトをテストして良かったかどうか確認してください。ありがとうございました。
コメント