ChatGPTでJavaScriptを学習しながらゲーム作り　Chapter1 イントロダクション

## 初めに
chatgptを用いてjavascriptを１から学習しようと思ったはいいが、chatgptは過去のチャットまで戻るのが面倒であると気づいた。
そこで、出力内容を記事としてまとめるといいかもと思い、いざ書いてみることにした。
行き当たりばったりで書いていくのでうまく書けないかもしれないが、chatgptだけで学習していく過程を見てもらえると嬉しい。
注意事項として、**今後の内容のベースはすべてchatgptにより出力されたものであるので、正しいかどうかの裏付けは全く取れていない（ネットで確認する程度）。そのため、しっかりと知識を学びたい人は参考にのせてあるような書籍を購入することを推奨する。**
要するに、chatgptとwebサイトだけでこんなに勉強できるんだっていうのを残したいだけなので、間違っているところなどありましたら遠慮なく指摘してください:blush:


## 目次
[1. ChatGptでの学習方針](#chatgptでの学習方針)
[2. JavaScriptとは](#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をインストールしていく。これはそれぞれの公式サイトにいくことでダウンロードすることができる。基本的にはデフォルトの状態で大丈夫なはず。
ダウンロード後、ターミナルにおいて以下のコマンドで確認する。
```sh
node -v  #node.jsのバージョン確認
npm -v #npm（パッケージ管理ツール）のバージョン確認
git --version #gitのバージョン確認
```
そして、GitHub公式サイトにて、アカウントを作成
### 2.GitHubのセットアップ
SSHキーをGitHubに登録していく。
ターミナルで以下を実行
```sh
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"  #メールアドレスは自分の物

#エンターキー３回をしてデフォルトの設定でキーを作成

type $env:USERPROFILE\.ssh\id_rsa.pub #sshキーを表示
```
表示されたsshキーを[sshキー追加ページ](#https://github.com/settings/keys)の「new ssh key」をクリックして追加する。
そして、ターミナルにて、以下を入力して接続確認
```sh
ssh -T git@github.com
```

Hi username! You've successfully authenticated, but GitHub does not provide shell access.のような文字列が出れば成功。

ここで、sshキーが必要であるか疑問に思ったので、以下のように質問した。

>sshキーはなくてもいいですか

>sshキーは自分で覚えておくものですか



:::note info
#### SSHキーとは？
- SSHキー（公開鍵認証） は、GitHubやサーバーに安全にログインするための認証方法。
- パスワードの代わりに 「秘密鍵」と「公開鍵」 の2つの鍵を使って認証する。
- 秘密鍵（private key） は PCのローカルに保存 し、絶対に他人に教えない。
- 公開鍵（public key） は GitHub などのサービスに登録し、誰でも参照できる。
- SSHキーはローカルで保存されているので、覚える必要はない
- なくした場合は秘密鍵（id_rsa）を削除、新しく作って登録すればよい
:::

### 3. GitHubでのリポジトリ作成＆VSCodeとの連携
#### 1. GitHubでリポジトリ作成
1. 右上の「+」ボタン をクリックし、**New repository**を選択
1. リポジトリの情報を入力
    - **Repository name**: javascript-learning（任意の名前でOK）
    - **Description**: JavaScript学習用リポジトリ
    - **Visibility**（公開範囲）:どちらでも
    - **「Initialize this repository with:」のオプション**はチェックなしでOK
1. **Create repository**をクリック

#### 2. SSHでGitHubリポジトリとVSCodeにクローン
1. 作成したリポジトリの**code**をクリックし、**ssh**を開く
1. sshURLをコピー
1. VSCodeで**Ctrl + Shift + P**でコマンドパレットを開く
1. **Git: Clone**を検索して実行
1. コピーしたSSH URLを貼り付ける
1. 保存先を選択

上記で環境の構築は完了である。



## 終わりに
次回は基本的な書き方や変数、データ型などについてまとめていく。

## 参照
- ChatGPT 4o
- [1] [ 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで](https://amzn.asia/d/60vgPrt)