見出し画像

デイトラ Web制作コース 初級編 DAY13-16 JavaScriptの基礎について

MIO

ご覧いただき、ありがとうございます！

今回は、JavaScriptの基礎について学びました。


JavaScriptとは

Webサイト制作におけるJavaScriptとは、簡単にいうと、Webページに動きをつけるための言語です。

HTML/CSSより難しいと感じましたが、これができるようになると一気にWebサイトが動的でインタラクティブ※になります。

インタラクティブ：
閲覧者とWebサイトやアプリケーションの間で、やり取りがあること。
例えば、閲覧者がWebサイトをスクロールすると、テキストや画像がフェードインするアニメーション。

JavaScriptによってHTMLの中身を書き換えたり、要素を追加して、動的な操作を可能にします。

環境設定

フォルダとファイルの準備

CSSを書くときと同様、まずはJavaScriptを書くためのフォルダとファイルを準備します。

「jsフォルダ」を、index.htmlファイルと同じ階層に作って、その中に「script.jsファイル」を作ればOKです！

index.htmlでscript.jsを読み込む

他のファイルを使うときは、index.htmlでファイルを読み込む必要があります。

CSSでは<link>タグを、JavaScriptでは<script>タグを使用します。

  <script src = "./js/script.js">< /script>

  < /body>
< /html>

JavaScriptを読み込むときは、< /body>の直前が一般的に推奨されています。

< /body>タグの直前がおすすめな理由

  • ページのロード時間が速くなる：
    ブラウザはHTMLを上から下に読み込むので、<head>タグで先にJavaScriptを読み込むとHTML/CSSの読み込みが止まって、全体の表示が遅くなってしまいます。

  • DOM※の準備：
    JavaScriptは大抵DOMというものを操作します。
    「DOMが構築される→JavaScriptが実行される」という順番なので、JavaScriptの読み込みを最後に置くことで、実行される頃にはDOMが完全に構築されている状態になります。

DOMとは：
簡単にいうと、JavaScriptがHTMLを操作しにいくための窓口です。
Webページを動かしたり、変更するための仕組みのことを言います。

JavaScriptを書いていく

JavaScriptはHTML/CSSと違って、書き方が少し複雑です。
覚えなきゃいけないこともたくさんあります。

今回デイトラで学んだJavaScriptのポイント

  • 基本構文；変数と定数、演算子、条件分岐、繰り返し処理 など

  • 関数：関数の定義と呼び出し、引数、戻り値

  • オブジェクトと配列：プロパティとメソッド、配列の作成と要素の操作

  • DOM操作：HTML要素の取得、要素の追加・作成・変更

まだ他にもJavaScriptを学ぶ上で大切なことはありますが、今回学んだのは大体上記のものでした。

私がJavaScriptの中で特に大切かなと思う、基本構文の「変数と定数」とWeb画面上での確認方法「コンソール」について詳しく書いていこうと思います。

変数と定数

変数と定数はHTML/CSSにはない概念ですが、HTMLでid属性やclass属性を使うのが、少し似ているかなと思いました。

変数：値を格納するためのもの。値を変数に代入して、後で再利用ができる
定数：値を代入した後、変更ができなくなる変数

定数が変数の中の種類だということを実は今日まで知りませんでした。
ただ、分かりやすいので、変数と定数で区別してお話しします。

値を代入する時に、変数は「let」、定数は「const」を使います。
「var」という変数もありますが、最近はあまり使われないそうです。

// 変数

let counter = 0;  // counterという変数に数値の0が代入された
console.log(counter);  // 0が出力される

counter = 10;  //counterという変数の中身が10に置き換わる。再代入の時はletは不要
console.log(counter);  // 10が出力される
// 定数

const name = "太郎";  // nameという定数に文字列の"太郎"が代入された
console.log(name);  // "太郎"が出力される

name = "二郎";  // nameには既に"太郎"が入っているので、代入できない → エラーが発生する

ちなみに値を出力するときは、「console.log」を使います。
コメントアウトは「 // 」とCSSと同じく「 /* */」の両方を使うことができます。

なぜわざわざ値を代入するのかな？
という疑問が浮かんだのは、私だけでしょうか。

なぜこんなことをするのか理由を3つ挙げてみます。

  • 保守性が高くなる（変数を使いまわせる）

  • カウンターの値やユーザーの入力値で再代入が必要な場合に使える

  • デバックが楽になる

私は「なんで」が分からないと先に進めないことが多く、ここがいつも気になって仕方がありません。
ただ「なんで」が分かると理解が進むように感じます。

プログラミング言語特有の概念が「変数と定数」です。

ちなみにHTMLは「マークアップ言語」、CSSは「スタイルシート言語」と呼びます。

コンソール

値を出力するときに「console.log」を使いましたが、どこに表示されるのでしょう。

Chromeの検証機能を使い、「コンソール」を選択します。
（普段は「要素」が選択されています）

Chromeの検証機能にあるコンソール画面で、変数counterに代入した「0」と「10」が表示されている
先ほどcounterに代入した「0」と「10」が表示されました！

ここで表示を確認できます。

最初にindex.htmlでJavaScriptを読み込んだときは、アラートを使うとすぐに正しく読み込まれているかが、判断できます。

VSCodeのscript.jsでalert("おはよう");と入力した画面と、Chomeのアラートで"おはよう"と表示されている画面

Chrome上で、上記のように「おはよう」と表示されていれば正しくJavaScriptがindex.htmlに読み込まれています。

感想

JavaScriptは4セクションかけて学びました。
今回Web画面上で行ったことは、コンソールという画面にテキストや数値を表示させることでした。

ここでは詳しく書きませんでしたが、if文やfor文という基本構文があります。

if文は条件を満たしていたらこの処理をする、条件を満たしていなかったら別の処理をするというもので、for文は繰り返しの処理をするものです。

こういった基本構文も実際に書いて実行してみると楽しく、私のお気に入りはswich文です。

上記のサイトで基本構文や関数について、シンプルに記載がされています。

最後までお付き合いいただき、本当にありがとうございました🌸

Xで毎日デイトラの学習記録つけてます！
応援していただけると嬉しいです✨
X : https://twitter.com/totoro_mi8

この記事が気に入ったらサポートをしてみませんか？