![](https://ymiyashitablog.com/wp-content/uploads/2021/08/0e0e106b1f4c665f2fce8769efe89b31-801x600.png)
![](https://www16.a8.net/0.gif?a8mat=3BMLAN+D15LGY+3L4M+7925D)
![](https://ymiyashitablog.com/wp-content/uploads/2020/09/ym23583500509101219321.jpg)
みやちゃ
今回からJavascriptに入門していきます。
Javascriptの基礎を抑えることで、React.jsやVue.jsなど、様々なフレームワークに応用することもできます。
- HTMLにjsファイルを読み込む
Javascriptの学習環境を整える事ができます!
目次
HTMLファイル/CSSファイル/jsファイルの作成
まずはHTMLファイルとCSSファイル、jsファイルを作成しましょう。
ターミナルを開きます。
ターミナルでまずはディレクトリを作成します。
~ miyacha$ cd Desktop/
Desktop miyacha$ mkdir js-sample
上記のコマンドを実行する事で、デスクトップに「js-sample」という名前のディレクトリが作成されたはずです。
![](https://ymiyashitablog.com/wp-content/uploads/2021/08/4226580e99d7a1b9a6078f2b2fc15261-769x600.png)
ここのディレクトリにファイルを作成していきましょう。
ターミナルで以下のコマンドを実行してください。
Desktop miyacha$ cd js-sample
# js-sampleディレクトリに移動
js-sample miyacha$ touch js-sample.html js-sample.css js-sample.js
# 3つのファイルを作成
js-sample miyacha$ ls
js-sample.html js-sample.css js-sample.js
上記のコマンドを実行する事で、HTMLファイルとCSSファイル、jsファイルの3つが作成されました。
Sublime Text
それでは実際にコードを書いてみましょう。
エディタはSublime Textを選択しています。
皆様は各自、好きなエディタで編集してください。
ここではSublime Textでの編集の方法を詳しく説明していきます。
Sublime Textで「New Window」をクリックします。
![](https://ymiyashitablog.com/wp-content/uploads/2021/08/e2a6a88eeeba2db01e1055d4ed7a5ff9-760x600.png)
Windowが開いたら、左上からファイルを選択します。
![](https://ymiyashitablog.com/wp-content/uploads/2021/08/b7a7293f3d4e58523e4a5e33747a0d23-1153x600.png)
[File]から[Open]を選択すると、ファイルが選べるようになります。
そこから、「Desktop」の「js-sample」フォルダを選択しましょう。
![](https://ymiyashitablog.com/wp-content/uploads/2021/08/3ba27ed5a75cb704ad8b913f8bbee475-818x600.png)
これで編集できるようになります。
コードを書いてみる
それでは実際にコードを書いていきましょう。
HTMLファイルを以下のように編集します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Practice</title>
<link rel="stylesheet" href="js-sample.css">
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="js-sample.js" charset="utf-8"></script>
</body>
</html>
6行目では、CSSファイルを読み込んでいますね。
9行目では、"container"というidのdivを1つ作成しています。
10行目では、jsファイルを読み込んでいます。
次に、CSSファイルとjsファイルをそれぞれ以下のように編集してください。
#container>div {
height: 50px;
width: 50px;
background-color: red;
}
var div, container = document.getElementById("container");
div = document.createElement("div");
div.onclick = function(){
alert("何用かな?");
};
container.appendChild(div);
ブラウザで動きを確認
それでは作成したファイルをブラウザ上で確認してみましょう。
デスクトップ上で、js-sampleフォルダを開いて、「js-sample.html」をダブルクリックしましょう。
![](https://ymiyashitablog.com/wp-content/uploads/2021/08/084afd3037a3ab3eca2bc92b01fa5efe-1056x600.png)
HTMLファイルをダブルクリックすると、ブラウザで表示されるはずです。
ブラウザに以下のような画面が表示されました。
![](https://ymiyashitablog.com/wp-content/uploads/2021/08/8a43617481a2a2b2d597199c966e668e.png)
この赤い四角をクリックしてみましょう。
![](https://ymiyashitablog.com/wp-content/uploads/2021/08/3896f06c86052226928ed87d9bdfbc9b.png)
上記のようなメッセージが表示されていれば、うまく行っているようです。
まとめ
いかがでしたでしょうか?
今回は、HTMLファイルにjsファイルを読み込む方法をご紹介しました!
![](https://ymiyashitablog.com/wp-content/uploads/2020/09/ym23583500509101219321.jpg)
みやちゃ
ここまでご覧いただきありがとうございます!
こちら のUdemyの動画教材は、8時間で、
- Dockerで仮想環境構築
- Railsの基礎を解説しながら、アプリケーション開発
- RSpecでテストを記述
まで解説しています。
Udemyの教材へRailsエンジニアとして働くために必要な、DockerとRSpecを同時に解説してくれています。
DockerとRSpecを使って作ったポートフォリオはかなり評価が高くなります。
ぜひ動画を見てみてはいかがでしょうか?
Udemyの教材へ受講生は、5000人以上!です。
さらに、Udemyは、30日間の返金保証付きなので、いつでも返金できます。