JavaScriptがあやふやなため復習したまとめ

この記事では「JavaScriptを再度勉強し直すためにアウトプットしたものをまとめる」という内容になっています。

Web制作をしていく中で、jQueryなどでも対応できますが、どうしてもJavaScriptを書かないといけない状況というかキャリアを考えたときに書けるに越したことはないので復習の意味も込めてアウトプットしていきます。

Progateやっただけで正直、いまいち分かっていないという私みたいな人には参考になるかと思います。

基本的にツイートの内容をまとめていきます、基本的なことなのでjQueryばかりで避けてきたという人なども一緒に理解していければと思います。

また間違っていたらコメントでもTwitterのDMでもいいのでご指摘お願いいたします。

 

そもそもJavaScriptとは?

 

そもそもJavaScript(以下JS)とはどういう言語なのか?ということですが、はじめにWeb制作の勉強をスタートしたばかりの人のために紹介しておくと、HTMLやCSSはプログラミング言語ではありません。

JSやPHPはプログラミング言語となります。よってWebでコーディングをしている人はエンジニアではないですね。Web制作はクリエイティブの領域に入ります。

JSなどで開発している人はエンジニアと言えますね。

 

JSはWebブラウザの中で動く言語のことです。

何かをクリックしたら表示したり、消えたり、動いたりするもの。ハンバーガーメニューとかがいい例ですね。あとはデータをサーバとやりとりしたり(ajaxとかが有名)もできます。

 

それだけではなく、JSでさまざまなアプリケーションを作ることも可能です。今となってはかなり人気が高い言語になってきて、VueやReactといったフレームワークも最近では求人でよく見かけますね。

とりあえHTML勉強し始めたけど、エンジニアになりたい!という人にはオススメの言語の一つです。

 

JavaScriptのコメントの書き方

ではJSのコメントの書き方はどうすればいいでしょうか?

上記ツイートの通りで

//を文章の前につける
/**/でくくるか

 

となります。

なぜコメントアウトした方がいいか?というと、Web制作のときですらだらだら長くなってくるときに、ここはハンバーガーのJS、ここはフェードイン、など書いてあると自分で見返したときも分かりやすいからです。

開発しているときであれば、バグを見つける手助けにもなりますね。

 

自分も今、コードを書く時はコメントアウトをできるだけするようにしています。

どこに何を書いたか分からなくするため、そしてパッと見でここで何を操作しているか分かりやすくするためです。

 

JavaScriptの変数の宣言の仕方

ここからはJSの変数の宣言の仕方を紹介します。

上記ツイート通り、JSの変数の宣言の仕方は3パターンあります。

・var

・const

・let

1つずつ紹介していきます。

 

JavaScriptの変数宣言const

変数の宣言の仕方の1つconnstは例えばこんな感じで宣言します。

const 変数名 = 初期値;

例えば、surfという変数がLifeという文字列ですという宣言は以下の通り。

const surf = "Life";

文字列はダブルクオーテーションで括ります。

 

constの変数宣言の特徴として「再代入できない」という特徴があります。

 

const surf = "Life"
const surf = "Wave" 

 

この場合だと、constで同じsurfという変数に代入しようとしているのでエラーになります。

一般的に変数への再代入はエラーがでます。「変数の値は最初に定義した値と常に同じである」という参照透過性のルールが存在します。

 

もう一つの特徴として、初期値を必ず持たないとエラーになります。初期値を定義するための宣言なので

const surf;

この使い方もできません。

 

JavaScriptの変数宣言let

続いてletの変数宣言です。形はconstと変わりはありません。ただ変わるところとしては、初期値を持つので定義しなくてもundefinedという初期値を持つことができます。

let surf;  //結果undefined

 

letで宣言した変数には何度でも値の代入が可能です。

let surf = 0;
surf = 1;
surf = 2;

 

JavaScriptの変数宣言var

結論から言うと、letとconstはvarの改善バージョンです。varを使うと様々なバグがでてきて、それを改善するためにletとconstがでてきました。

varはletとほとんど使い方は同じです。初期値もundefined、値の再代入も可能。

ですがvarは同じ名前の変数を再定義できてしまう問題があります。

var surf = 1;
var surf = 2;

これが成立してしまいます。letとconstの場合はエラーになりますがvarの場合だけエラーは帰ってきません。

いいじゃんって思いますか?

この場合だと、意図せず同じ変数を定義したときに後から書いたものが上書きされるためバグが起きやすくなってしまいます。

 

varはletとconstがアップデートで登場したと思えばOKです。

 

JavaScriptでvarを消せば問題解決?

varが問題ならvarを無くしてしまえばいいじゃないか!と思う方は鋭いですね。

確かにそうなのかもしれませんが、なぜ既存のまま残しているかというと、既にvarで変数定義して世の中に出ているものはたくさんあります。

それをひとつひとつvarをconstやletに変えていくのがいかに大変な作業かは容易に想像がつきますよね。

とおうことで、これからはconstやletを使っていけばバグは減っていくということです。

 

JavaScriptがあやふやなので復習のまとめ

JavaScriptという言語はどんな言語?

Webブラウザの中で動く言語のこと。

コメントの書き方

//を文章の前につける
/**/でくくるか

 

変数の宣言の仕方

const 変数名 = 初期値; 引き続き勉強したらまとめていきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です