「[[.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についてのメモ。 *[[宣言とデータ型>JavaScriptの宣言とデータ型]] [#ia153e36] *[[比較処理>JavaScriptの比較処理]] [#r2ad66bf] *[[イベント処理>JavaScriptのイベント処理]] [#e311f48f] *[[JSON処理>JavaScriptのJSON処理]] [#ff279ce5] *[[エフェクト>JavaScriptのエフェクト処理]] [#k0f136b5] *[[スレッド処理>JavaScriptのスレッド処理]] [#d6ac8bf9] *[[HTML5>HTML5 JavaScript API]] [#w02f087f] *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の仕様 ***CommonJS [#xe3a8701] CommonJSは、module機能のあるJavaScript ***Node.js [#q9fc6e24] Node.jsは、サーバーサイドのJavaScript +[[CommonJS>#xe3a8701]]に準拠 +その後、Node.jsが独自拡張 +Node.jsの拡張仕様に他言語が追随 +Node.js拡張仕様が事実上の[[CommonJS>#xe3a8701]] **前方互換 [#qd15f83d] ***[[Polyfill>Polyfill (JavaScript)]] [#me2ddef5] ***[[modernizr、Respond.js>https://techinfoofmicrosofttech.osscons.jp/index.php?ASP.NET%20%E3%81%AE%20Modernization#y67baf40]] [#ud04ec3f] 最近のASP.NETのテンプレートに標準同梱されている。 **変換 [#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 **MV* 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] *参考 [#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 **昨今 [#q19768fc] ***トレンド [#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