今更ながらJavaScriptを1から勉強してみる【その1】

公開日:2019-05-29
最終更新:2019-06-04

今更ながらJavaScriptを1から勉強してみる【その1】

きっかけ

プログラミング経験としては、会社の研修でJavaを3ヶ月くらい触ったのと業務でBashを触っていたくらいでした。
その後は去年9月くらいからPythonやReactでWebサービスの個人的に開発をしています。
しかし各フレームワークのチュートリアルはやったものの、pythonやJavaScriptの言語の基礎ちゃんとを学んだわけでなく必要になったらその都度調べるといった形で進めていました。
それはそれで必要な知識だけが身に着くのですが、知っていて当然の知識がきっと無いんだろうなと思い、作成していたサービスのキリもよくなりそうなので今更ながらチュートリアルを学ぼうと思った次第です。

エンジニアの知識はインプットとアウトプットのバランスが必要ということで、せっかくなので学んだことをここにまとめていこうと思います。

なおここではjs-primerを参考に進めていきます。
全部ではなく自分が知らなかったことや気になったところを中心に噛み砕いて書いています。そのため詳しく知りたい人や原文を見たい場合は上記サイトをご参照ください。(めっちゃ丁寧に書かれていてわかりやすいです)

第一部基本文法

JavaScriptとは

JavaScriptとはブラウザ上で動く言語としてよく知られている言語です。
今では同時にサーバー側のアプリケーションを作成する仕組み(Node.js)もあるので、フロント、サーバー両サイドで利用することができる言語です。

JavaScriptとECMAScript

JavaScritpはECMAScriptという仕様によって動作が決められています。

ECMAScriptはどの実行環境でも共通な動作のみが定義されています。
どういうことかというと、例えばブラウザ上でUIを操作する機能はサーバー側では必要ないので、ブラウザ上で動かすときの固有機能となります。
このような固有機能はECMAScriptでは定義されておらず、サーバー、ブラウザ共通で利用できる動作が定義されています。
https://jsprimer.net/basic/introduction/img/javascript-ecmascript.png
このECMAScriptは毎年アップデートされていて、2015年にECMAScript 2015(ES2015)として大きくアップデートされました。そのため今からJavaScriptを学ぶのでしたら、ES2015以降学んだ方がよいです。

JavaScriptってどのような言語?

JavaScriptは大部分がオブジェクト(値や処理をひとつにまとめたもの)です。そしてそのオブジェクト同士のコミュニケーションによって成り立っています。

また、JavaScriptは大文字小文字を区別します。
そのため以下のようにnameという変数を大文字小文字で書いた場合、別の変数として認識されます。

// `name`という名前の変数を宣言  
const name = "azu";  
// `NAME`という名前の変数を宣言  
const NAME = "azu";  

また、JavaScriptには特別な意味を持つキーワード(予約語)が存在し、このキーワードと同じ名前の変数や関数は宣言することができません。
例えば上記例のconstもキーワードのため、constという変数は宣言できないということです。

JavaScriptは(;)セミコロンによって区切られた文(Statement)ごとに処理をしていきます。このセミコロンがない文も
ある一定の規則に則って暗黙的にセミコロンが挿入される仕組みもあります。しかし意図しない挙動が発生することもあるので、常に書くようにしていきましょう。

スペースやタブ文字などは空白文字(ホワイトスペース)と呼ばれ、空白文字をいくつ文の中においても挙動に違いは出ません。

JavaScriptにはstrict modeという実行モードが存在していて、このモードで実行すると古く安全でない構文や機能が一部制限されます。
"use strict"という文字列をファイルまたは関数の先頭に書くことで、そのスコープにあるコードはstrict modeで実行することができます。
どんなものが制限されるかというと、例えば下記のようにvarなどのキーワードを含まずに変数を宣言しようとする場合、strict modeでは例外が発生します。
※strict modeでない場合はグローバル変数として宣言されます。

"use strict";  
mistypedVariable = 42; // => ReferenceError  

コメント

ソースコードとして評価されない(実行されない)文。
基本的にソースコードの説明を書くために利用されることが多いです。

一行コメント

// と書くと以降から行末までがコメントとして扱われます。

// 一行コメント  
// この部分はコードとして評価されない  

複数行コメント

先ほどの//はその行しかコメントとして書くことができませんが、複数行のコメントを書きたい場合もあります。
その時は「/* コメント /」とかくと、/ から */までの間がコメントとして扱われます。
一行コメントと違い複数行書くことができるため、長い説明を書く際に利用されます。

/*   
   複数行コメント  
   囲まれている範囲がコードとして評価されない  
 */  

初回はここまでになります。
続きはこちら。
今更ながらJavaScriptを1から勉強してみる【その2】

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
JavaScript / Python / React / Django / firebaseなど、自分の興味あるものを調べてアウトプットしていきたいです。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする