JavaScriptシリーズVol.2【ChatGPTで驚速コーディング】以前よりも10倍の速さでスキルチェンジ革命
多くの時間を要していた調査や考慮が、今やChatGPTで驚くほど効率化された。従来、時間と労力を要したプロセスを大幅に短縮。開発者のスキルは変わりつつある。要件の明確化とフィードバック。アナタ自身もJavaScriptで実体験しましょう。
Ratings 4.41 / 5.00
What You Will Learn!
- htmlでtableタグを使って一覧表を作ります。 ヘッダーとデータ行の作り方を学びます。
- htmlで一覧表を作った後、cssでデザインをあてます。 左右の余白、タイトルの配置、列幅などの調整を行います。
- 思い通りにデザインが出来ない場合があります。 そんな時は、chromeの検証ツールを使って原因を調べます。
- 他の言語と同様に、JavaScriptの基本文法は、 繰り返し処理,条件分岐処理,配列になります。 今回の講習でも使いますので、身につけましょう。
- 画面に対して、何かアクションがあった場合、発生する処理です。 例えば、リストの値が変更する、ボタンがクリックされる等々です。 それらをイベントと呼び、その処理を学びます。
- JavaScriptで変化した画面(例えば、注文数や金額)を、 サーバー側へパラメータとして引き渡す方法も学びます。 ※ただし、今回はサーバーの実装は行いません。
- ChatGPTも、たまに間違えます。 そんな時、どうやって修正依頼を出していくのか学びます。
Description
一覧表で商品名と値段が表示。
注文数を入力すると金額と合計が自動計算される。
（詳しくは、コースの無料プレビューで確認できます）
上記のようなJavaScriptを含むWeb画面を、
ChatGPTを使って以下の手順で作ります。
開発環境の準備
ツールの準備
動画視聴と進め方
フォルダーとVSCode
ChatGPTと成果物
htmlで一覧表を作る
一覧表ヘッダー作成
一覧表にデータ挿入
入力フィールド
データ行追加
cssでデザインをあてる
左右の余白を入れる
タイトルを中央にする
列幅を均等にする
失敗時の検証ツール
手作業による微調整
JavaScriptで金額計算の実装
各商品の金額を自動算出
合計金額を自動算出
ループ処理による汎用性
データ追加も自動反映
JavaScriptで購入とリセットを実装
リセットボタンの実装
ChatGPTに修正依頼
購入ボタンの実装
パラメータ確認
Who Should Attend!
- ChatGPTでコーディング効率を爆上げしたい方
- Webサイトを扱う方
- JavaScript知識を更したい方
- Webデザイナーと話をする方
- フロントエンジニアと話をする方
- バックエンドを主業務でやってきた方
- 趣味や副業でパッパと簡単な画面動作を作りたい方