JavaScript のバックアップソース(No.17)

「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>HTML/CSS/JavaScript]]

*目次 [#q148d6b5]
#contents

*概要 [#vd489801]
SaaS開発で調べたJavaScriptについてのメモ。

*jQuery [#h18c539e]
-jQuery 日本語リファレンス~
http://semooh.jp/jquery/
-7つのサンプルでjQueryを学ぼう！~
「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4~
http://ozpa-h4.com/2012/11/07/jquery-lecture/

**セレクタ [#aa5414f4]
要素を選択する構文。~
Googleで"jQuery セレクタ"などとググると大量にヒット。

-Selectors - jQuery 日本語リファレンス~
http://semooh.jp/jquery/api/selectors/

**ajax [#s58ab575]
HTTP通信、AJAXリクエスト

-Ajax - jQuery 日本語リファレンス~
http://semooh.jp/jquery/api/ajax/

*REST API (JSON) [#b10ddab5]

**JSON処理 [#ff279ce5]
以下が参考になる。

-HTMLファイルからPOSTでJSONデータを送信する - Qiita~
http://qiita.com/kidatti/items/21cc5c5154dbbb1aa27f

*イベント処理 [#e311f48f]
イベント処理はイベントリスナーにイベントハンドラ（delegate）を設定する。

-イベントリファレンス - Web 技術のリファレンス | MDN~
https://developer.mozilla.org/ja/docs/Web/Reference/Events
-EventTarget.addEventListener - Web API インターフェイス | MDN~
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

イベント処理は以下のようにjQuery で記述できる。

-Events - jQuery 日本語リファレンス~
http://semooh.jp/jquery/api/events/
-jQuery： イベントに応じて処理を実行するには？（イベントメソッド） - Build Insider~
http://www.buildinsider.net/web/jqueryref/015

**初期処理 [#a4d8cbca]
タグがロードされていないと処理できない初期処理はonLoadで処理する。

onLoadイベントは以下のように記述できる。

 window.onload = function() {
   // ・・・処理・・・
 };

addEventListenerを使う場合に使う文字列はload。

 window.addEventListener("load", function() {
   // ・・・処理・・・
 }, false);

loadは、画像などのリソースのロードが済んだ時点、~
readyはDOMロード後なのでonLoadより早いタイミングで動き出す。

 $(document).ready(function () {
   // ・・・処理・・・
 });

-ready(fn) - jQuery 日本語リファレンス~
http://semooh.jp/jquery/api/events/ready/fn/
-$(document).ready() と $(window).load() の違い | こととこネット~
http://blog.cototoco.net/work/201308/window-onload-%E3%81%A8jqurydocument-ready-%E3%81%AE%E9%81%95%E3%81%84/

*[[エフェクト>JavaScriptのエフェクト処理]] [#k0f136b5]

*[[スレッド処理>JavaScriptのスレッド処理]] [#d6ac8bf9]

*[[HTML5>HTML#x3122b27]] [#w02f087f]
**[[ストレージ>HTML#l92a65cd]] [#c060ea9a]

*UIライブラリ [#d722853a]
**scheduler and events calendar [#b616969e]
-Top 5 : Best jQuery scheduler and events calendar for web applications | Our Code World~
https://ourcodeworld.com/articles/read/55/top-5-best-jquery-scheduler-and-events-calendar-for-web-applications

-シフト系は、また、違うようで、JS系では厳しいかな。
--https://www.pro-system.co.jp/products/kinnmu/ver7_new.html

*その他 [#l130e56e]

**言語仕様 [#r22c47d7]

***特徴 [#h3504c25]
-インタプリタ言語
-動的型言語
-イベント駆動型言語
-プロトタイプベースのオブジェクティブ指向言語

***ECMAScript [#d8043fec]
-現在のJavascriptの仕様
-ECMA Internationalが、ECMAScript（ECMA-262）規格を策定、標準化。
-ECMA : European Computer Manufacture Association

-版
--旧JavaScript（ES5）
--ECMAScript2015（ES2015、ES6）
--ECMAScript2016（ES2016、ES7）

***CommonJS [#xe3a8701]
CommonJSは、module機能のあるJavaScript

***Node.js [#q9fc6e24]
Node.jsは、サーバーサイドのJavaScript

+[[CommonJS>#xe3a8701]]に準拠
+その後、Node.jsが独自拡張
+Node.jsの拡張仕様に他言語が追随
+Node.js拡張仕様が事実上の[[CommonJS>#xe3a8701]]

**変換 [#jbd53627]
***トランスパイラ（babel） [#z4771853]
ES7やES6の構文で書かれたJavaScriptを、~
現在のブラウザで使用可能なES5に変換。

***ビルド・ツール [#of6181e9]
-[[CommonJS>#xe3a8701]]のrequire機能(外部モジュール読込)を、~
ブラウザ上でも有効にするためのツール

-ツール
--browserify
--Webpack~
[[タスク・ランナー>#pec2edb2]]の要素も含んでいる。

**パッケージ・マネージャ [#i6813c82]

***bower [#q9d1cb30]
-Node.js製
-ブラウザ用JSのパッケージ・マネージャ

***npm [#y99214ea]
-Node Package Manager
-Node.js製
-[[CommonJS>#xe3a8701]]用のパッケージ・マネージャ

**AltJS [#d11cd6c3]
***CoffeeScript [#sb380570]
-Railsが採用
-ES6が後継扱いで衰退

***TypeScript [#kf4fe370]
-Microsoft
-変数に型が使える。

***JSX [#gf642367]
-Facebook
-Reactで仮想DOMをXMLで扱う。

***Dart [#fabf5f7e]
-Google
-普及は進まず、2015年にはVMのChrome統合を断念
-[[TypeScript>#kf4fe370]]をGoogle社内の標準プログラミング言語として承認

**ライブラリ [#qba41cc7]
***prototype.js [#vad3f37c]

-ライブラリ
-オブジェクト指向のクラスと継承の機能を提供

-Prototype JavaScript Framework - Wikipedia~
https://ja.wikipedia.org/wiki/Prototype_JavaScript_Framework

***[[jQuery>#h18c539e]] [#u9783154]

-ライブラリ
-実績多数
-Bootstrapなど有名所が依存

-jQuery - Wikipedia~
https://ja.wikipedia.org/wiki/JQuery

**MVX UIフレームワーク [#l66057b9]
***Backbone.JS [#ub2e8c93]
-[[CoffeeScript>#sb380570]]の作者

-Model–view–presenter(MVP)

-Backbone.js - Wikipedia~
https://ja.wikipedia.org/wiki/Backbone.js

***KnockoutJS [#j66996af]
-Microsoft

-Model-View-ViewModel (MVVM)

-KnockoutJS - Wikipedia~
https://ja.wikipedia.org/wiki/KnockoutJS

***React [#s4081e43]
-Facebook、Instagram

-Component志向のMVC

-・・・。

***AngularJS [#ac831ebe]
-Google

-MVCおよびMVVM
--宣言型プログラミング
--MVCおよびMVVMアーキテクチャ
--"MVC" アーキテクチャにおけるスコープ
--双方向データ結合

-AngularJS - Wikipedia~
https://ja.wikipedia.org/wiki/AngularJS

***比較 [#z7987c5e]
-【2017年版】JavaScriptのフレームワーク比較とニーズの高まり｜フリエン~
https://furien.jp/columns/187/#2-1

-AngularJS vs Knockout.js vs Vue.js vs Backbone.js Frameworks~
https://www.altexsoft.com/blog/engineering/angularjs-vs-knockout-js-vs-vue-js-vs-backbone-js-which-framework-suits-your-project-best/

**タスク・ランナー [#pec2edb2]
諸々の作業を自動化するツール

-Gulp、Grunt、guard, etc.

***新JS [#l26a961d]
-新JSのコードを、ブラウザで使えるようにする。

-新JSとは、下記を指している。
--[[トランスパイラ>#z4771853]]を要する[[ES6・7>#d8043fec]]
--[[ビルド・ツール>#of6181e9]]を要する[[CommonJS>#xe3a8701]]
--コンパイルを要する[[AltJS>#d11cd6c3]]

***難読化 [#s3f741a3]
-ugilify

***最小化 [#ge6f7a7b]

**Polyfill [#me2ddef5]
モダンブラウザで普通に出来て、レガシーブラウザで出来ない機能を、
-既存の技術で（あるいはそれらの組み合わせで）同等のものを提供する手法
-その機能をサポートしていないWebブラウザで機能を実装するコード
-HTML5 Web標準を実装するJavaScriptライブラリ

***ライブラリ [#rc823260]
-es5.js~
ECMAScript5 (ES5) と見比べて、不足している実装

-web.js~
Web標準バンドル
--HTML
--DOM
--Fetch
--URL
--XMLHttpRequest
--CSS Object Model
--Timing Events

-polyfill.js~
es5.js と web.js の組み合わせで出来ている。

-typedarray.js~
バイナリデータ（映像、音声など）を効率良く扱うための Typed Arrayの実装

***参考 [#uf36a62f]
-Polyfill - Wikipedia~
https://en.wikipedia.org/wiki/Polyfill

-Polyfill - 用語集 | MDN
https://developer.mozilla.org/ja/docs/Glossary/Polyfill

-HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki~
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

-inexorabletash/polyfill: JavaScript Polyfills, Shims and More~
https://github.com/inexorabletash/polyfill

-jQuery から卒業するための第1歩を polyfills から学ぼう - ばうあーろぐ~
http://girigiribauer.com/archives/1233/

*参考 [#k43384ff]

**歴史 [#t1bee751]
-JavaScript - Wikipedia~
https://ja.wikipedia.org/wiki/JavaScript

-Javascriptの歴史~
https://www.slideshare.net/ssuser4be374/javascript-58886880

***Qiita [#p3f988a2]
-Javascriptの歴史~
https://qiita.com/a_rcsin/items/0a3c8c98c8d703c49a22
-JavaScriptの歴史をざっくりまとめたよ!~
https://qiita.com/Mic-U/items/c900a6f62862954d62e0
-JavaScriptが辿った変遷~
https://qiita.com/naoki_mochizuki/items/cc6ef57d35ba6a69117f

**トレンド [#d2a644b2]
-人気上昇中のJavaScriptライブラリを調べてみた - Build Insider
--【2014年版】~
http://www.buildinsider.net/web/popularjslib/2014
--【2015年版】~
http://www.buildinsider.net/web/popularjslib/2015
--【2016年版】~
http://www.buildinsider.net/web/popularjslib/2016

-【使い方まで徹底解説】おすすめJavascriptライブラリ厳選10選！~
侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト~
http://www.sejuku.net/blog/4559#Bootstrap

**今風の書き方 [#ff6801b9]
-古い感じがしてかっこわるいと思うコードの書き方10例｜Webpark~
http://weboook.blog22.fc2.com/blog-entry-272.html
--1. フレームを使っている
--2. centerタグを使っている
--3. レイアウトにテーブルを使っている
--4. タグが大文字
--5. 改行を連続して使っている
--6. 全角スペースで横の間隔を調整している
--7. リストを使っていない
--8. bodyタグに要素を指定している
--9. ワンポイントの画像にimgタグを使っている
--10. border等を一括で指定していない

-旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 - Qiita
--Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～~
http://qiita.com/gaogao_9/items/ec2b867d6941173fd0b1
--Section2 ～CommonJSモジュールと仲良くなろう～~
http://qiita.com/gaogao_9/items/190f4b52d6876f0b8d8a
--Section3 ～Browserifyをマスターしよう～~
http://qiita.com/gaogao_9/items/0b4bf5cd6416347b3b52
--Section4 ～Gulpで処理を自動化しよう～~
http://qiita.com/gaogao_9/items/d4e23de821d0fd78c13d
--Section5 ～ES2015文法を覚えよう(前編)～~
http://qiita.com/gaogao_9/items/18b20ad9b76c9c81b5fa

**ECMAScriptと対応状況 [#e34dbaad]
-ECMAScript - Wikipedia~
https://ja.wikipedia.org/wiki/ECMAScript

-ECMAScript 5 compatibility table~
http://kangax.github.io/compat-table/es5/
-ECMAScript 6 compatibility table~
http://kangax.github.io/compat-table/es6/
-ECMAScript 2016+ compatibility table~
http://kangax.github.io/compat-table/es2016plus/