はじめに
VScodeでJavascriptを実装していきます。
VScodeは各自でダウンロードしておいてください。
Javascriptを実装する場合、HTMLファイルが必要になってきます。
手順としては、
- プロジェクト作成
- HTMLファイルを作成
- Javascriptファイルを作成
となります。
自分は初心者の頃、入門編といいつつ文字ばかりの記事見てて目が痛かったので、できるだけ画像メインの書式にします。
もし、Javascript勉強したての方がいらっしゃいましたら、とりあえず以下の手順通りやってみてください。
できた上で、何か不明な点があれば適宜調べていきましょう。
PC環境
- MacBook Pro (M1 Max, 2021)
- mac OS Monterey (ver 12.5)
- SSD 2TB
- RAM 32GB
プロジェクト作成
-
VScodeを開き、「フォルダを開く」をクリック。
-
「新規フォルダ」からフォルダを作り、「作成」をクリック。
フォルダの名前は適宜決めていただいて構いません。初心者の方は、とりあえず「Test01」と入力しましょう。
-
フォルダが作成できたら、「開く」をクリック
-
赤枠のボタンから、HTMLファイルを作成します。
HTMLファイル名は適宜決めていただいて構いませんが、〇〇.htmlの書き方にしてください。
初心者の方は、とりあえず「index.html」と入力しましょう。
-
以下のコードを入力し、キーボードの［control］+[S] (同時押し) で保存します。
-
赤枠のボタンから、Javascriptファイルを作成します。
Javascriptファイル名は適宜決めていただいて構いませんが、〇〇.jsの書き方にしてください。
初心者の方は、とりあえず「test.js」と入力しましょう。
-
以下のコードを入力し、キーボードの［control］+[S] (同時押し) で保存します。
-
ここで再び同じフォルダ内のhtmlファイルに戻り、以下のコードを追記し、キーボードの［control］+[S] (同時押し) で保存します。
これで実装は完了です。では動くかどうかみてみましょう。 -
Macの場合はFinderから、Windowsの場合はエクスプローラから、作成したフォルダを探し、htmlファイルをダブルクリックします。
-
ブラウザ(ここではchrome)が起動し、「Hello World」と書かれていることを確認します。
で、javascriptファイルで作成した「こんにちは」はどこで表示されるの？ということなのですが -
右クリックから「検証」をクリックします。
-
右側にデベロッパーツールが表示されるので、「Console」をクリックします。
-
「こんにちは」が表示されればOKです！
終わりに
さて、Javascriptは実際に動いたでしょうか。
といいつつも、まだJavascriptを実装して動かしたという実感はあまりないかもしれません。
Javascriptは、Webブラウザ上で活躍するプログラミング言語です。
一例を挙げると、ホームページのエラー画面もJavascriptで実装されるのがほとんどです。
パスワードを入力し忘れるとこのような表示がされますよね、こういったものをJavascriptで実装していきます。
何となくイメージがついたでしょうか。
私も未熟の身ですが、これからもJavascriptを一緒に勉強していきましょう。