初めに
chatgptを用いてjavascriptを１から学習しようと思ったはいいが、chatgptは過去のチャットまで戻るのが面倒であると気づいた。
そこで、出力内容を記事としてまとめるといいかもと思い、いざ書いてみることにした。
行き当たりばったりで書いていくのでうまく書けないかもしれないが、chatgptだけで学習していく過程を見てもらえると嬉しい。
注意事項として、今後の内容のベースはすべてchatgptにより出力されたものであるので、正しいかどうかの裏付けは全く取れていない（ネットで確認する程度）。そのため、しっかりと知識を学びたい人は参考にのせてあるような書籍を購入することを推奨する。
要するに、chatgptとwebサイトだけでこんなに勉強できるんだっていうのを残したいだけなので、間違っているところなどありましたら遠慮なく指摘してください
目次
1. ChatGptでの学習方針
2. JavaScriptとは
3. 開発、実行のための基本環境
ChatGptでの学習方針
内容は、山田 祥寛 さんのJavaScript本格入門という書籍の目次をChatGPTに学習させることで、全体の流れを把握してもらう。
そして、
理論理解 → コード例 → 演習問題
という流れに沿ってそれぞれ教えてもらうという流れである。
個人で勉強していくときに全体の流れは重要であるので、amazonの書籍の説明欄などに目次が掲載されているものから拝借するとよい。
chatgptへの質問は以下のように記述していく
Chapter 1 イントロダクション
1.1 JavaScriptとは？
1.2 標準JavaScript「ECMAScript」とは？
1.3 JavaScript実行環境のもう1つの選択肢 Node.js
1.4 JavaScriptアプリを開発／実行するための基本環境
1.5 ブラウザー付属の開発者ツール
Chapter 2 基本的な書き方を身につける
2.1 JavaScriptの基本的な記法
2.2 変数
2.3 データ型
Chapter 3 値の演算操作を理解する - 演算子
3.1 演算子とは？
3.2 算術演算子
3.3 代入演算子
3.4 比較演算子
3.5 論理演算子
3.6 ビット演算子
3.7 その他の演算子
3.8 演算子の優先順位と結合則
Chapter 4 スクリプトの基本構造を理解する - 制御構文
4.1 制御構文とは？
4.2 条件分岐
4.3 繰り返し処理
4.4 ループの制御
4.5 制御命令のその他の話題
Chapter 5 基本データを操作する - 組み込みオブジェクト
5.1 オブジェクトとは？
5.2 文字列を操作する - Stringオブジェクト
5.3 数値リテラルを操作する - Numberオブジェクト
5.4 日付／時刻値を操作する - Dateオブジェクト
5.5 値の集合を管理／操作する - Arrayオブジェクト
5.6 連想配列を操作する - Mapオブジェクト
5.7 重複しない値の集合を操作する - Setオブジェクト
5.8 正規表現で文字列を自在に操作する - RegExpオブジェクト
5.9 その他のオブジェクト
Chapter 6 繰り返し利用するコードを1ヵ所にまとめる - 関数
6.1 関数の基本
6.2 関数を定義するための3種の記法
6.3 変数はどの場所から参照できるか - スコープ
6.4 引数のさまざまな記法
6.5 関数呼び出しと戻り値
6.6 高度な関数のテーマ
Chapter 7 JavaScriptらしいオブジェクトの用法を理解する - Objectオブジェクト
7.1 オブジェクトを生成する
7.2 オブジェクトの雛型「プロトタイプ」を理解する
7.3 すべてのオブジェクトの雛型 - Objectオブジェクト
Chapter 8 大規模開発でも通用する書き方を身につける - オブジェクト指向構文
8.1 クラスの基本
8.2 利用者に見せたくない機能を隠蔽する - カプセル化
8.3 既存のクラスを拡張する - 継承
8.4 アプリを機能単位にまとめる - モジュール
8.5 オブジェクト指向構文の高度なテーマ
Chapter 9 HTMLやXMLの文書を操作する - DOM（Document Object Model）
9.1 DOMの基本を押さえる
9.2 クライアントサイドJavaScriptの前提知識
9.3 属性値やテキストを取得／設定する
9.4 フォーム要素にアクセスする
9.5 ノードを追加／置換／削除する
9.6 より高度なイベント処理
Chapter 10 クライアントサイドJavaScript開発を極める
10.1 ブラウザーオブジェクトで知っておきたい基本機能
10.2 デバッグ情報を出力する - consoleオブジェクト
10.3 ユーザーデータを保存する - Storageオブジェクト
10.4 非同期通信の基本を理解する - Fetch API
10.5 非同期処理を手軽に処理する - Promiseオブジェクト
10.6 バックグラウンドでJavaScriptのコードを実行する - Web Worker
Chapter 11 現場で避けて通れない応用知識
11.1 コマンドラインからJavaScriptコードを実行する - Node.js
11.2 アプリのテストを自動化する - Jest
11.3 フロントエンドアプリの開発環境をすばやく立ち上げる - Vite
11.4 JavaScriptの「べからず」なコードを検出する - ESLint
11.5 ドキュメンテーションコメントでコードの内容をわかりやすくする - JSDoc
このプロジェクトでは、上記の流れでjavascriptを学習していく。
上記のように(参照[1])、まず、全体の流れを指定してあげるとよい。
JavaScriptとは
ここからはさっそく内容をまとめてく。
chatgptへの質問は以下である。
それでは、chapter1からお願いします。
JavaScriptとは以下の特徴を持ったプログラミング言語の事である。
- 動的なwebページを作るための言語
- ブラウザで動作するスクリプト言語
- クライアントサイド＆サーバーサイドの両方で動作可能
- オブジェクト指向、関数型プログラミングが可能
上記のような特徴があるため、主に以下のような用途で用いられている。
- webフロントエンド開発
- webバックエンド開発
- モバイルアプリ開発
- ゲーム開発
- デスクトップアプリ
開発、実行のための基本環境
ここで、開発環境などを整えるため、以下のように質問した。
今後の例題や演習の実行では、vscodeとgithubを用いていきたい。その環境設定を行って
今回は以下の代表的なツールを用いて実行をしていく。
| ツール | 説明 |
|---|---|
| VSCode | コードを記述するためのエディタ |
| Node.js | JavaScririptの実行環境 |
| ブラウザの開発者ツール | デバックやコード確認に必要 |
| パッケージ管理ツール | ライブラリを管理する |
具体的に環境構築の流れを記述していく。
1.VSCode,Node.js,Gitのインストール、GitHubアカウントの作成
まず、VSCode,Node.js,Gitをインストールしていく。これはそれぞれの公式サイトにいくことでダウンロードすることができる。基本的にはデフォルトの状態で大丈夫なはず。
ダウンロード後、ターミナルにおいて以下のコマンドで確認する。
node -v #node.jsのバージョン確認
npm -v #npm（パッケージ管理ツール）のバージョン確認
git --version #gitのバージョン確認
そして、GitHub公式サイトにて、アカウントを作成
2.GitHubのセットアップ
SSHキーをGitHubに登録していく。
ターミナルで以下を実行
ssh-keygen -t rsa -b 4096 -C "your_email@example.com" #メールアドレスは自分の物
#エンターキー３回をしてデフォルトの設定でキーを作成
type $env:USERPROFILE\.ssh\id_rsa.pub #sshキーを表示
表示されたsshキーをsshキー追加ページの「new ssh key」をクリックして追加する。
そして、ターミナルにて、以下を入力して接続確認
ssh -T git@github.com
Hi username! You've successfully authenticated, but GitHub does not provide shell access.のような文字列が出れば成功。
ここで、sshキーが必要であるか疑問に思ったので、以下のように質問した。
sshキーはなくてもいいですか
sshキーは自分で覚えておくものですか
3. GitHubでのリポジトリ作成＆VSCodeとの連携
1. GitHubでリポジトリ作成
- 右上の「+」ボタン をクリックし、New repositoryを選択
- リポジトリの情報を入力
- Repository name: javascript-learning（任意の名前でOK）
- Description: JavaScript学習用リポジトリ
- Visibility（公開範囲）:どちらでも
- 「Initialize this repository with:」のオプションはチェックなしでOK
- Create repositoryをクリック
2. SSHでGitHubリポジトリとVSCodeにクローン
- 作成したリポジトリのcodeをクリックし、sshを開く
- sshURLをコピー
- VSCodeでCtrl + Shift + Pでコマンドパレットを開く
- Git: Cloneを検索して実行
- コピーしたSSH URLを貼り付ける
- 保存先を選択
上記で環境の構築は完了である。
終わりに
次回は基本的な書き方や変数、データ型などについてまとめていく。
参照
- ChatGPT 4o
- [1] 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで