はじめに
個人的に6月は素のJS(PHP)を学ぶ月間にしたいと思っています。
ってことで話題の書籍JSPrimerを使って学習してみました。具体的にはアプリケーション開発の第二部にトライしてみたいと思います。
✅ゴール
・JSの理解を深める
✅環境
Windows
✅参考教材
📚JavaScript Primer 迷わないための入門書
ネットだと無料で読める。なんて良心的・・・
💻【脱jQuery】JavaScriptをネイティブで書くときのあれこれTips
💻【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ
jQueryの書き換えのドキュメントがシンプルにわかりやすい。
Vue.jsの書き換えは見つからなかった。
Reactはちょっとだけ見つかった。
こんな記事も見つかった。素のJSも大事、でもソースコードの量多すぎてFWも臨機応変に使っていくべきって話。
前提知識
参考：ECMAScript、JavaScriptとECMAScript
JavaScriptは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タグをJSで生成している点も印象的だった。
🙄繰り返し読んで理解できるようにしていきたい。
Node.jsでCLIアプリケーション
※未実施ですが、参考になったところをピックアップしました。
package-lock.jsonファイルには実際にインストールされたバージョンが記録される。
※JavaScriptでMarkdownをHTMLへ変換するために、markedというライブラリを使用してる。
Node.jsはChromeと同じV8というJavaScriptエンジンを利用しています。 そのため、ECMAScriptで定義されている基本構文はブラウザと同じように使えます。 しかし、ブラウザ環境とNode.js環境では利用できるグローバルオブジェクトが違うため、アプリケーションを開発するときにはその違いを理解しなくてはなりません。
🙄VScode上でモジュール化したファイル間でnodeコマンド打てないのそういうこと？？
ブラウザは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アプリ
※上記の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アプリ、自分で作ったらもっとシンプルになりそうな印象。
モジュール、クラス、継承を用いているからかな？？
現場や大規模開発ではマストだからこういったコードになってるんだろうな～
難しいので繰り返し読んで理解していきたい。
今はXMLではなくFetchAPIを利用するのがスタンダードらしい。
参考：Fetch – 現代の JavaScript チュートリアル
備忘録
・form要素に送信先が指定されていない場合は、現在のURLに対してフォームの内容を送信
・import文では、読み込むファイルの拡張子を省略しない
・開発ツール使えば、ソースコードは全て見ることが可能。
📝用語
エントリーポイント：アプリケーションの中で一番最初に呼び出される部分
DOM(Document Object Model)：HTMLドキュメントのコンテンツと構造をJavaScriptから操作できるオブジェクト
DOMにはHTMLドキュメントそのものを表現するdocumentグローバルオブジェクトがあり、指定したHTML要素を取得したり、新しくHTML要素を作成するメソッドが実装されている。
コメントを残す