JavaScript

【超初心者 JavaScript】Webブラウザで表示させる方法

【超初心者 JavaScript】Webブラウザで表示させる方法

Webブラウザを準備

なぜWebブラウザが必要かと言うと、JavaScriptはWeb上で処理を実行するので必要になのです。

僕的にWebに特化されているJavaScriptのWebブラウザで実行されるのところがかなりお気に入りです。

ちなみに僕は「Google Chrome」を使用しています。

 

フォルダ作成

まずフォルダを作成します。

適当に「test」というフォルダを作ります。(フォルダ名は好きな名前でOK)

そしたらエディターを起動します。

はてな

エディター:ソースコードを編集するソフト。

 

自分は「Visual Studio Code」を使用しているので、もし良かったらこちらを参考にしてください。

【超初心者 Visual Studio Code】インストールと日本語化
【超初心者 Visual Studio Code】インストールと日本語化

  目次1 Visual Studio Code とは2 Visual Studio Code をインストール3 Visual Studio Code の日本語化4 まとめ Visual S ...

続きを見る

 

 

エディターを使ってみる

起動するとこんな画面が出てきます。

 

左サイドメニューの一番上のアイコンをクリックします。

 

先ほど作成した「test」フォルダを開きます。

 

そうすると「test」フォルダが開かれるので、丸で囲ってあるアイコンをクリックします。

 

新しく「test」フォルダ内にファイル作成されるので名前を決めます。

ここでは「index.html」とします。

※ファイルの名前は何でもいいですが、拡張子の部分は「.html」にしてください。

はてな

拡張子:ファイルの種類を区別させるもの。

 

するとファイルが作成されます。

 

 

ソースコードを書く

HTMLでソースコードを書いていきます。

 
Naza
JavaScriptじゃねえのかよ
 

と思うかもしれませんが、Webブラウザで表示させる枠組みはHTMLで書きます。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    
</body>
</html>

 

エディターにこれを入力してください。(コピペでOK)

これがHTMLの基本の形なので覚えておいた方がいいです。

はてな

<meta charset="UTF-8">:文字化け防止


※ソースコードは書いたら上書き保存必須。

 

実際にWebブラウザで表示させてみる

ここまで出来たら、「test」フォルダを開きます。

そして「index.html」を右クリックし、「このアプリケーションで開く」から、「Google Chrome」を選択します。

(Windowsの方は、「プログラムから開く」になっています)

 

これで表示出来ます。

 

ただ内容は何も書いてないので、真っ白なページが表示されるだけですが。

 

まとめ

フォルダ作る→ファイル作る→HTML書く→Webブラウザで開く

これは流れは最初の基本になるので覚えましょう。

Naza
何回かやればすぐ慣れた


この記事を最後まで読んでいただきありがとうございます。



以上。

-JavaScript

© 2021 Nazaブログ