Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kato83/javascript-introduction
JavaScript 入門
https://github.com/kato83/javascript-introduction
Last synced: about 1 month ago
JSON representation
JavaScript 入門
- Host: GitHub
- URL: https://github.com/kato83/javascript-introduction
- Owner: kato83
- Created: 2024-01-27T14:00:52.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-01-28T14:40:36.000Z (11 months ago)
- Last Synced: 2024-10-21T18:23:01.252Z (2 months ago)
- Language: HTML
- Size: 307 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JavaScript 入門
## 講座補足資料
**[Wiki ページ](https://github.com/kato83/javascript-introduction/wiki) を参照してください。**
## 開発環境構築
### Node.js のインストール
Windows PowerShell に以下コマンドを入力して Node.js をインストールしてください。
> [!TIP]
> Windows PowerShell にて `node -v` コマンドを叩いて **v18以降かつ長期サポート (LTS)** のNode.jsがPC上で動作するようにします。
> 既にインストールされている場合は作業をスキップして問題ありません。
> 2024-01-27時点でv18未満のバージョンが入っている場合はサポートが切れているので再インストールを実施してください。
```
> winget install "Node.js LTS"
```
実行後に標準出力される内容一例
```
> winget install "Node.js LTS"
見つかりました Node.js LTS [OpenJS.NodeJS.LTS] バージョン 20.10.0
このアプリケーションは所有者からライセンス供与されます。
Microsoft はサードパーティのパッケージに対して責任を負わず、ライセンスも付与しません。
ダウンロード中 https://nodejs.org/dist/v20.10.0/node-v20.10.0-x64.msi
██████████████████████████████ 25.3 MB / 25.3 MB
インストーラーハッシュが正常に検証されました
パッケージのインストールを開始しています...
インストールが完了しました
```
**Windows PowerShell のウィンドウを閉じ、再度開いたうえ** で以下コマンドでエラーが出ていないことを確認してください。
```
> node -v
```
実行後に標準出力される内容一例
```
> node -v
v20.10.0
```
### Microsoft Visual Studio Code (VSCode) のインストール
> [!TIP]
> Windows PowerShell にて `code -v` コマンドを叩いてバージョン情報が返ってきたらインストール済みなので作業をスキップして問題ありません。
Windows PowerShell に以下コマンドを入力して Node.js をインストールしてください。
```
> winget install -q vscode --scope machine
```
実行後に標準出力される内容一例
```
> winget install -q vscode
既存のパッケージが既にインストールされています。インストールされているパッケージ...をアップグレードしようとしています
利用可能なアップグレードが見つかりませんでした。
構成されたソースから入手できる新しいパッケージ バージョンはありません。
```
#### （任意） VSCode の日本語化実施
以下画像を参考に検索窓に `japanese` と入力して候補に出てくる日本語化プラグインをインストールしてください。
インストールが完了したら **VSCode の再起動を実施** し、メニューなどが日本語化されていることを確認してください。
### Google Chrome のインストール
入っていると思いますが [Google Chrome - Google の高速で安全なブラウザをダウンロード](https://www.google.com/intl/ja_jp/chrome/) からダウンロード及びインストールが可能です。
### 開発資材のダウンロード
以下画像を参考にZIPファイルをダウンロードしてください。
ダウンロードしたZIPファイルは任意の場所に解凍してください。
解凍したファイルが今後授業でプログラミングを実施する作業フォルダになります。
### 解凍したフォルダを VSCode で開く
解凍したフォルダにて `Shift` + `右クリック` で `Code で開く` という項目があるので、それを押下すると VSCode が起動します。
> [!NOTE]
> このフォルダを信用しますか？という旨のポップアップが表示されたら `信用する` のボタンを押下してください。
> ポップアップが表示されなければ問題ないですが、信用しない旨のボタンを押下すると閲覧モードになってしまって編集ができなくなるおそれがあります。
### VSCode 上のターミナルでサーバーを立ち上げる
VSCode のウィンドウに表示されているターミナルで以下のコマンドを実行してください。
`npm run start` でブラウザが起動されることを確認してください。
```
> npm i
> npm run start
```
`npm run start` コマンドを叩いた際にネットワーク系のポップアップウィンドウが表示されたら `表示数を増やす` を押下したうえで `プライベートネットワーク` のみチェックを付けて `許可` を押下してください。
