見出し画像

フロントエンドを極めよう【JS PRIMARYから学ぶ!】

こんにちは、うったむです。

JavaScriptはフロントサイドもバックサイドもどちらもできる言語ですね。幅広くいろいろと作れることから、学ぶことにキリがありません。

だから毎週、JS PRIMERという名書を読みながら、気になったこと、使いたいことをnoteでまとめていくことにしました。どうぞ、みなさんも一緒に読みましょう!


第一章:基本文法を学ぼう

JavaScriptって何?


この部分が書かれている章

JavaScriptを学ぶにあたり、ECMAScriptというものを理解しておかないといけません。ECMAScriptとは何でしょうか?

簡単にいうと「共通の部分」です。

読み方はエクスマスクリプトと言います。JavaScriptと同義語として最初は覚えてきましょう。もちろん詳細がありますが。仕様の一つで、どの実行環境でも共通な動作のみが定義されているものです。どの実行環境でも同じ動作をすることがポイントです。

またオブジェクト(何かを一つにまとめたもの)が理解できると、JavaScriptがよりわかるようになります。

下記のポイントを覚えておくことも良いですね。

・大文字と小文字は区別される
・予約語
・セミコロンで文を区切る
・ScriptとModule

うーん、最初ですが難しい点がたくさんありますね。しかもJavaScriptもECMAScriptどちらも更新されたり新しい構文や機能が付けられるので、学ぶことがたくさん。覚えようとするのではなく「ふーん、こんなこともできるんだ」という見方を持ちましょう。また「こんな機能の実装がしたいな」と思ってから知らなかった構文を使うということで良いですね。

ぜひ、最初で躓かないで頑張りましょう!(執筆2020年11月14日


コメントを使おう


この部分が書かれている章

特に目立ったことがありませんが、「コメントを使おう」ということが載せられていうました。

● 一行コメント

● 複数行コメント

上記の二つがありますね。

ところでコメントはなぜ使うのでしょうか?

「ソースコードに書かれていることの説明」であるコメントは、ソースコードをメンテナンス(保守)する人に情報を伝えるものです。自分も含めて将来多くの人がコードを読んですぐに理解できるようにするものですね。

ですから、コメントとして「ここにはどのようなことが書いてあるのか」また「なぜこのようなコードを書いたか」を記述すれば、後日読んでもわかりやすいですね。

ぜひ皆さん、コメントを活用しましょうね!(執筆2020年11月22日


変数とその宣言を理解しよう


この章が書かれているページ

変数とは、データを保存しておくための箱のようなものですね。

変数を使わずとも、コードを書いて開発することはできますが、ごちゃごちゃして見にくいです。整理して書こうとしてもコードが長くなりますし、他の人が見たら、何が書いてあるのか理解しづらいです。

そんなことを解決するために「変数」を利用します。

文字列や数値などのデータに名前をつけて箱のように保存すれば、後に同じことをしたいと思ったら変数(箱)を再度使えば良いので、大変スッキリしたコードになります。

変数は複数を同時に宣言をすることもできます。

宣言する方法は以下の三つあります。

・const
・let
・var

constは再代入と再定義ができない変数を宣言する時に使います。定数ではありません。 再代入しようとするとエラーが起きます。再代入はバグを引き起こす原因となりかねないので、constを使って変数を宣言することは良いですね。

const kitchen = "包丁";
const kitchen = "まな板";
      kitchen = "フライパン";
      
// 再代入も再定義もできない

逆にletで宣言した変数は何度でも再代入できます。しかし再定義はできません。

let kitchen = "鍋";
let kitchen = "お玉";

// 再定義はダメ

let kitchen = "フォーク";
            = "スプーン";
            
// 再代入はok

varは再定義も再代入もエラーが出ずに開発ができます。

結論から言うと、「可能な限りconstを使って、お手上げの時にはletを使う。varは出来る限り使わない」です。ある方は「varを使ったら負け」とおっしゃっていました...

コードは厳密な方がバグが起きにくく、見やすくなります。だからconstを使うことが勧められているのですね。

ぜひあなたも書籍から学んでアウトプットしてみましょう。(執筆2020年11月29日)

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