JavaScript Primerを試してみた

はじめに

個人的に6月は素のJS(PHP)を学ぶ月間にしたいと思っています。

ってことで話題の書籍JSPrimerを使って学習してみました。具体的にはアプリケーション開発の第二部にトライしてみたいと思います。

✅ゴール
・JSの理解を深める

✅環境
Windows

✅参考教材
📚JavaScript Primer 迷わないための入門書

💻JavaScript Primer 迷わないための入門書

ネットだと無料で読める。なんて良心的・・・

💻Vanilla JS 入門

💻【脱jQuery】JavaScriptをネイティブで書くときのあれこれTips

💻【脱jQuery!】ネイティブなJavaScript(Vanilla JS)への書き換え方まとめ

jQueryの書き換えのドキュメントがシンプルにわかりやすい。

Vue.jsの書き換えは見つからなかった。

💻Vanilla JSで学ぶRedux

Reactはちょっとだけ見つかった。

💻生のJSができれば、reactは必要ない?

こんな記事も見つかった。素のJSも大事、でもソースコードの量多すぎてFWも臨機応変に使っていくべきって話。

前提知識

参考:ECMAScriptJavaScriptとECMAScript

JavaScriptはECMAScriptの仕様によって動作が決まっている。

引用:ECMAScriptJavaScriptとECMAScript

ブラウザではUI(ユーザーインターフェース)を操作するためのJavaScriptの機能が定義されていますが、サーバー側の処理を書くNode.jsではそれらの機能は不要です。 このように、実行環境によって必要な機能は異なるため、それらの機能は実行環境ごとに定義(実装)されています。

そのため、「ECMAScript」はどの実行環境でも共通の部分、「JavaScript」はECMAScriptと実行環境の固有機能も含んだ範囲というのがイメージしやすい

JavaScriptと一言に言ってもECMAScript、ウェブブラウザ、Node.js、WebAssembly、WebGL、WebRTCなど幅広い分野があります。

開発準備

参考:アプリケーション開発の準備

ローカルサーバー起動

書籍用に準備されたローカルサーバーモジュールをダウンロード&実行

※npxはnpmパッケージのダウンロードと実行を同時に行ってくれる。

npx @js-primer/local-server
// ポート指定も可能
npx @js-primer/local-server --port 8000 
// 終了
ctrl+c

http://localhost:3000/へアクセス

🙄このパッケージとても便利!!隠蔽されているNode.jsの勉強したい。。。リポジトリ

Ajaxで通信

参考:Ajax通信

コードの書き方含め超参考になります!!

※6/16追記(DOMの理解ができるようになってきたので大幅修正)

FetchAPIとXMLの両方のコードを紹介してくれているのでありがたい。これはFetch使いますね!

テンプレートリテラルでHTMLを生成して、描画するのも参考になる。

innerHTMLとエスケープ処理⇒FetchAPIとPromiseチェーンによるリファクタリング

⇒Async Function(async/await)で、同期処理と同じ見た目でPromiseの非同期処理を記述

引用
Promiseチェーンを使って処理を分割する利点は、同期処理と非同期処理を区別せずに連鎖できることです。 一般に、同期的に書かれた処理を後から非同期処理へと変更するのは、全体を書き換える必要があるため難しいです。 そのため、最初から処理を分けておき、処理をthenを使ってつなぐことで、変更に強いコードを書けます。

HTML文字列をDOMに追加する

HTMLタグをJSで生成している点も印象的だった。

🙄繰り返し読んで理解できるようにしていきたい。

Node.jsでCLIアプリケーション

参考:Node.jsでCLIアプリケーション

※未実施ですが、参考になったところをピックアップしました。

package-lock.jsonファイルには実際にインストールされたバージョンが記録される。

※JavaScriptでMarkdownをHTMLへ変換するために、markedというライブラリを使用してる。

引用
Node.jsはChromeと同じV8というJavaScriptエンジンを利用しています。 そのため、ECMAScriptで定義されている基本構文はブラウザと同じように使えます。 しかし、ブラウザ環境とNode.js環境では利用できるグローバルオブジェクトが違うため、アプリケーションを開発するときにはその違いを理解しなくてはなりません。

🙄VScode上でモジュール化したファイル間でnodeコマンド打てないのそういうこと??

参考:ECMAScriptモジュールを実行する

ブラウザはscript要素にtype=”module”属性を付与するとECMAScriptモジュールとして読み込む。

🙄ECMAScriptの機能という認識が大事ですね!!

✅import/defaultしてみる

index.html

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Module Test</title>
  </head>
  <body>
    <p>test</p>
    <script src="./index.js" type="module"></script>
  </body>
</html>

index.js

import { foo } from "./App.js"
console.log(foo);

App.js

const foo = "foo";
export { foo };

確認。やはりfile://ではエラー。

MDNにも書いてあった。CORSエラーになるのでHTTPサーバーを通す必要がある。

サーバー起動

npx @js-primer/local-server

読み込めた◎

✅importした変数は代入できない。

index.js

import { name } from "./App.js";

console.log(name);
name = "saito";
console.log(name);

App.js

export let name = "sato";

どうやらexportされた変数を別ファイルで代入することはできないっぽい。

✅export defaultしてみる

App.js

export default "suzuki";

index.js

import nameDefault from './App.js'
console.log(nameDefault);

読み込めた

🙄ECMAやらNodeやらこんがらがりますね。。。

ToDoアプリ

参考:Todoアプリ教材の完成品

※上記のCORS問題からHTTPサーバー上で動作確認すること。

npx @js-primer/local-server

※必ず文字コード(エンコーディング)をUTF-8、改行コードをLFにする

学べること

HTML文字列からHTML要素を作成
EventEmitterクラスでイベントの仕組みを実装
TodoリストとTodoアイテムをモデルとして実装
TodoListModelをEventEmitterクラスを継承して実装
idを用いた更新・削除機能

イベントの仕組み

「イベントをディスパッチする側」と「イベントをリッスンする側」の2つの面から成り立つ。

印象に残った点

モジュール化&クラス(モデル)ベースでコードを作成。

HTML文字列からHTML要素を作成するhtml-util.jsを実装する。

⇒Todoリストの状態がDOM上にしか存在しないため、状態をすべてDOM上に文字列で埋め込まないといけない

Todoアイテムという情報をJavaScriptクラスとしてモデル化(TodoアイテムやTodoリストなど、モノの状態や操作方法を定義したオブジェクト、 クラスでは操作方法はメソッドとして実装し、状態はインスタンスのプロパティで管理できるため、今回はクラスでモデルを表現)

おわりに

自分のリポジトリ

ToDoアプリ制作をしてみて素のJSのソースコードの量の多さに驚いた。

FWがどんどん使われていく理由がわかる。

素のJSに関しては、書籍で部分部分をミニマム実装でコード記述して動作を確認しながら学習するでもいいかもしれない。

明日からパーフェクトJSを読み込もう。

※6/16追記

ToDoアプリ、自分で作ったらもっとシンプルになりそうな印象。

モジュール、クラス、継承を用いているからかな??

現場や大規模開発ではマストだからこういったコードになってるんだろうな~

難しいので繰り返し読んで理解していきたい。

💻Fetch API について

今はXMLではなくFetchAPIを利用するのがスタンダードらしい。

参考:Fetch – 現代の JavaScript チュートリアル

備忘録

・form要素に送信先が指定されていない場合は、現在のURLに対してフォームの内容を送信

・import文では、読み込むファイルの拡張子を省略しない

・開発ツール使えば、ソースコードは全て見ることが可能。

📝用語

エントリーポイント:アプリケーションの中で一番最初に呼び出される部分

DOM(Document Object Model):HTMLドキュメントのコンテンツと構造をJavaScriptから操作できるオブジェクト

DOMにはHTMLドキュメントそのものを表現するdocumentグローバルオブジェクトがあり、指定したHTML要素を取得したり、新しくHTML要素を作成するメソッドが実装されている。

コメントを残す