Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

CODEPREPで勉強しよう その5

その1(CODEPREPとは/学習予定ブック紹介)はこちら
その2(Sass,Bootstrap,Fontawesome編)はこちら
その3(HTML&CSS実践編 前編)はこちら
その4(HTML&CSS実践編 後編)はこちら
その6(JavaScript編 後編)はこちら
その7(Three.js,moment.js,Canvas編)はこちら
その8(React,Vue.js編)はこちら
その9(Rust,GoogleMap,Webカメラ編)はこちら
その10(Ruby,Scala編)はこちら
その11(CODEPREPやってみた感想等)はこちら

CODEPREP勉強中です

CODEPREPで勉強ライフを謳歌中の筆者です。
最近私用で忙しくて、ちょっとサボり気味でした…。
棚を整理してうっかり3DS見つけてしまったのが運の尽きでしたね。ルーンファクトリーはいいぞ、バグがあっても2は面白いからな!

そんなわけで(?)延々とルンファをやってましたが、3DSの不調かソフトの不調かでフリーズしたので…何とかこちらの世界に戻ってくることができました。
(やってたのはルンファ3だったので、3DSの不調かもしれませんね…ルンファ2だったらソフトの不調を疑ったのですが)

さて、今回は主にJS周りのブックを攻めていきたいと思います。
具体的には以下のブックを…。

  1. JavaScript入門 ES6編
  2. JavaScript基礎 jQueryトラバーサル編
  3. JavaScript演習 jQueryトラバーサル編
  4. JavaScript基礎 Ajax
  5. JavaScript基礎 オブジェクト指向
  6. JavaScriptオブジェクト指向を理解する
  7. 正規表現を理解する
  8. JavaScript正規表現を理解する 演習
  9. JavaScriptで学ぶユニットテスト
  10. CSS3+jQueryでつくる2Dゲームモーション

今回も量が多いので、その5とその6に渡り、学んだブックの感想を書いていきたいと思います。
今回のブックでは、1(ES6編)〜4(Ajax編)までいこうかなと。

各ブックの感想など

いつもの様に、各ブックで学んだことのまとめや感想などを書き連ねていきたいと思います。

JavaScript入門 ES6編

今回のブックでは、ES6(ECMAScript 2015)で導入された、新しい機能について学ぶことが出来ました。
…うん、出来た…のかな…。
一応ブックは終了させましたが、途中から正直何やってるかワカンナイヨとなっていっちゃいました。
ES6に関する根本的な理解が足りてなかったからでしょうね…。

CODEPREPさんのブック中に、ES6に関する説明が下記の様に書かれていましたが…。
正直チンプンカンプンでした。ECMAScriptって何じゃ。

ES6とは、2015年6月に公開された最新のECMAScript標準仕様です。1つ前のバージョン(ES5)が公開された2009年以降で最初の大きなアップデートです。
ES6の正式名称はECMAScript 2015です。今後は年単位でより細かくリリースする計画です。
いくつかの機能については、現在も各ブラウザの実装が続いており、実際のブラウザ上で利用できないものもあります。

というわけで少しだけ調べてみました。

ECMAScriptとは

ECMAScriptとは、主にJavaScriptを基にして標準規格化されたスクリプト言語である。
Ecma Internationalによって策定された。
ECMAScriptは1990年代後半に、当時それぞれ似たような役割を持ちながら互換性に乏しかった「JavaScript」と「JScript」を標準化する目的で策定が開始された。
その後いくつかのEditionが発表されており、2009年12月には「Edition 5」が発表されている。
最近は、一般的には「JavaScript」の名称で一連の仕様を指す場合が多いが、WebブラウザJavaScriptエンジンなど多少の厳密さが求められる場合に、標準規格として「ECMAScript」の名称で呼ばれることも少なくない。

参考(weblio辞書)

ECMAScriptJavascriptよりも上位概念に位置している…というといいのでしょうか?
他の記事(下記参照)では「ECMAScriptによって定められた仕様に基づき、各ブラウザが実装しているものがJavascriptなのだ」という解説も見られました。
JavaScript - ECMAScriptはJavaScriptの標準だそうですが、何故最近になって注目され始めたのでしょうか?|teratail
先取り!未来のJavaScript | 第1回 ECMAScriptとJavaScriptの関係 | CodeGrid

また、ECMAScriptは年々アップデートされているらしく…。
最新の仕様になってくると対応しているブラウザも限られてきます。
ただ最新の仕様にある機能を使いたいって時もありますよね。

そんな時に使うのが「トランスパイラ」というものです。
有名どころはBabelというもので、こちらを使って最新仕様に則ったJSを書くと、以前の仕様に則ったJSにコンパイルしてくれるそうです。
困った時に非常に頼りになりそうですな。
babeljs.io

蛇足ですが、最新のECMAScriptである「ECMAScript 2019」のドキュメント記事も貼っておきます。
ECMAScript® 2021 Language Specification

また、ECMAScriptの各種ブラウザ、トランスパイラ等の対応状況が載っているサイトもありましたので、参考に貼っておきます。
kangax.github.io

なお今回のブックで学んだES6(ECMAScript 2015)は、2015年6月に公開されたものであり、以前のバージョンと比べて下記の要素が追加されているそうです。
長いので折り畳んでおきました。
参考記事(Wikipedia)

展開する
  • クラス
  • モジュール
  • イテレータ
  • for/ofループ
  • Pythonスタイルのジェネレータ
  • アロー関数
  • 2進数および8進数の整数リテラル
  • Map
  • Set
  • WeakMap
  • WeakSet
  • プロキシ
  • テンプレート文字列
  • let
  • const
  • 型付き配列
  • デフォルト引数
  • Symbol
  • Promise
  • 分割代入
  • 可変長引数

ちなみに今回CODEPREPさんでは、上記項目のうち下記を学べました。
それぞれの役割や出来ることに関しては省略させていただきます…ちょっと長いしね。

  • const, let
  • アロー関数、引数(default, rest, spread)
  • 分割代入
  • テンプレート文字列
  • 拡張されたオブジェクト構文
  • クラス
  • Promise
  • いくつかの新しいAPI

JavaScript基礎 jQueryトラバーサル編

今回のブックでは、jQueryのトラバーザル関数について学びました。
…うん、トラバーザルって何。
本ブックのTipsにあった内容によると、下記のような感じだそうです。

そもそもHTMLドキュメントは<html>タグを頂点に要素をツリー状に配置して作っていきます(DOMツリー)。
jQueryでは、まずセレクタを利用して特定の要素(ノード)までジャンプして、この要素を起点にDOMツリーを移動しながら処理を行います。
この時の様子が、DOMツリーを伝って上下にジグザグに動くことから、トラバーサル(Traversal)やトラバーサリング(Traversing)と呼ばれるようになりました。
この時に利用するのがjQueryのトラバーサル関数です。

ちなみにトラバーサル(Traversal)とは、英語で「横断する」「ジグザグに走る」という意味だそうです。

長々と書きましたが、簡単に言えば「要素の様々な指定方法を学ぶ」といった感じです。
要素の指定…jQueryを扱う上で非常に大事な要素ですね。
本ブックの冒頭に、「jQueryを学ぶ上で必須の〜」と書かれてありましたが…そういうことだったのでしょう。

ちなみに、どんな指定方法があったかの説明は別記事に書くとします。
内容が多すぎるのでね…。

JavaScript演習 jQueryトラバーサル編

先にやった「JavaScript基礎 jQueryトラバーサル編」の演習ブックでした。
様々な課題を課され、それを解いていく形式でした。

CODEPREPさんの演習ブックをやるのは初めてでしたが…うん、そのクオリティの高さにただただ驚かされました。
基礎ブックで習ったことを余すことなく演習で行え…本当にいい勉強ができたなぁと思います。

ちなみにCODEPREPさんですが、なんと2018年10月より企業向けのオンラインプログラミング学習管理ツール、track LEARNINGをリリースされるそうです(参考記事)。
「CODEPREPを会社の研修で利用したい」という要望に答えるといった背景があるそうな。

この記事を見て本当にホッとしている自分がいます…CODEPREPさんは大好きなコンテンツなので…。
特に、今回のブックの様な、本当にいい勉強が出来るコンテンツが生き残れるってのは本当に喜ばしいことです。よかった…!

JavaScript基礎 Ajax

今回はJavascriptの…拡張機能的な感じで良いのでしょうか?の、Ajaxについて学びました。
ただ、ES6編と同じく筆者がAjaxの知識がほぼ0状態で臨んだためか、ブックに書いていることのほとんどがちんぷんかんぷんといった状態で…。
正直まったく身になることはありませんでした。とほほい…。

※なお、CODEPREPさんのブック中にあった「Ajaxについて」の説明は下記の通りです。
ちなみにAsynchronousとは、「非同期的な」という意味とのこと。

Ajaxとは、Asynchronous JavaScript + XMLの略称です。
名前にXMLが含まれていますが、これは名残であってXML以外のデータ通信もひとくくりにAjaxと呼びます。
Ajaxを利用することでサーバサイドと通信しながら、動的にHTMLを描画することができるようになります。
例えばGoogle Mapsや、TwitterFacebookなどもAjaxを利用しています。

でもこのままで終わらせておくのもなぁ、と言うのもありますし…。
何よりせっかくAjaxに関心が向いている今、何もしないのも勿体ない!ということで、自分でAjaxについて少し調べてみました。

※今回参考にさせていただいた記事は下記の通りです。
初心者目線でAjaxの説明 - Qiita
いまさら聞けない、“Ajax”とは何なのか? (1/3):いまさら聞けないリッチクライアント技術(3) - @IT
Ajax - Wikipedia

Ajaxとは

Ajax(Asynchronous JavaScript+XML)とは、2005年2月18日に米国のJesse James Garrett氏が提唱したものです。
Javascriptの機能を使い、非同期にサーバーとの通信を行う事が可能となります。
※参考: http://adaptivepath.org/ideas/ajax-new-approach-web-applications/

ちなみにこれと逆の意味を持つ、同期通信を使ったWebページ更新では、Webページ嬢の全ての情報(HTML,CSS,JS,その他画像等)を更新するといった感じになってしまいます。
全てのデータを転送するので、更新までに時間がかかるし、何より更新が終わるまでクライアント側は何も操作できないというのが難点です。
逆に非同期通信では、一部のデータ(HTMLの1部分だったり)のみを変更してブラウザ上に反映させるので、更新にさほど時間もかからず、クライアント側も更新されている間に別の作業ができます。

Ajaxが使われているWebページとして代表的なものがGoogleマップ(?)です。
※ちょっとこの辺り疑問符がついてるのが、参考にした記事が5年以上前だからなんですよね…。
もしかしたら今は、もっと別の技術を使ってるのかもしれません…。

なお、Ajaxを使用する際に特別な設定等は必要ありません。
というのも、Ajaxは「環境を用意して使用するもの」ではなく「アプローチ方法/手法」であるからです。
XMLHttpRequest(JavaScriptに組み込まれてるクラス)、JavaScript、DOM、XMLといった技術を「こういう風に使ったらこんな事ができるよ」と示唆しているだけ。

とはいえAjaxに則って1から使うのも結構大変なので、実際に使う際はjQuery等のAjaxフレームワークを用いる事がほとんどです。
(大抵の入門サイトでは、jQueryAjaxを使う前提で話が進められているような感じですしね…素のAjaxを使うような時はあんまりないような)

具体的な内部の仕組みについてですが…。
簡潔にまとめられていた記事がありましたのでそちらから引用させていただきます。

  1. ページ上で任意のイベントが発生(ボタンクリックなど)
  2. JavaScript + XMLHttpRequestでサーバーに対してリクエストを送信(非同期通信)
    ほしい情報、返ってくるレスポンスの情報を指定してリクエス
  3. サーバーで受け取った情報を処理
    サーバーの処理中もクライアントは操作を継続できる
  4. 処理結果をJSONXMLなどの形式で応答
  5. 受診したレスポンスを受けて、DOMでページを更新
    更新のあった部分だけを書き換えるため、画像が一瞬白くなることはない。
    ※参考記事: 初心者目線でAjaxの説明 - Qiita

なお、Ajaxが提唱された当初はデータをXML形式で処理するのが前提だったのですが、今ではJSON形式でデータを処理するのが主流になってるそうな…。
あくまで手法の1つなので、扱うデータ形式も別に自由にしていいという事でしょうかね。
※そうするとAjax(Asynchronous JavaScript+XML)ではなくAjaj(Asynchronous JavaScript+JSON)になる気もしなくもないですが…まぁ細かいところは突っ込んでも野暮ですかねぇ。

次回の記事について

次回記事では、JSで学ぶ予定ブック5(オブジェクト指向編)〜9(2Dゲームモーション)を見ていきたいと思います。
その6までいけば、学ぶ予定のブックの半分が終わる感じになりそうです…!

ではでは|д゚)