「[[.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]
*書き方 [#q46e7873]

*[[比較処理>JavaScriptの比較処理]] [#r2ad66bf]
**基本 [#z3fe6a81]

*[[イベント処理>JavaScriptのイベント処理]] [#e311f48f]
***[[宣言とデータ型>JavaScriptの宣言とデータ型]] [#ia153e36]

*[[JSON処理>JavaScriptのJSON処理]] [#ff279ce5]
***[[比較処理>JavaScriptの比較処理]] [#r2ad66bf]

*[[スレッド処理>JavaScriptのスレッド処理]] [#d6ac8bf9]
***[[イベント処理>JavaScriptのイベント処理]] [#e311f48f]

*[[HTML5>HTML5 JavaScript API]] [#w02f087f]
***[[JSON処理>JavaScriptのJSON処理]] [#ff279ce5]

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

*[[デバッグ>JavaScriptのデバッグ]] [#t24dcd82]
***[[スレッド処理>JavaScriptのスレッド処理]] [#d6ac8bf9]

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

*言語系 [#l130e56e]

**言語仕様 [#r22c47d7]

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

***[[ECMAScript]] [#d8043fec]
現在のJavascriptの仕様

***CommonJS [#xe3a8701]
CommonJSは、module機能のあるJavaScript
CommonJSは、[[モジュール機能>JavaScriptライブラリの作り方#yf624c6f]]のあるJavaScript

***Node.js [#q9fc6e24]
Node.jsは、サーバーサイドのJavaScript
***[[Node.js]] [#q9fc6e24]
Node.js拡張仕様が事実上の[[CommonJS>#xe3a8701]]

+[[CommonJS>#xe3a8701]]に準拠
+その後、Node.jsが独自拡張
+Node.jsの拡張仕様に他言語が追随
+Node.js拡張仕様が事実上の[[CommonJS>#xe3a8701]]
***[[Deno]] [#s4b62340]
Node.jsの製作者であるRyan Dahlによる、新しいJavaScript/[[TypeScript>#kf4fe370]]ランタイム。

※ サーバーサイドのJavaScriptとは言うものの、~
JavaScript系のフロントエンド開発ツールは、~
ほぼ、このNode.jsで開発されている。

**前方互換 [#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のテンプレートに標準同梱されている。

**AltJS [#d11cd6c3]

***[[TypeScript>https://techinfoofmicrosofttech.osscons.jp/index.php?TypeScript]] [#kf4fe370]
-Microsoft
-変数に型が使える。

***JSX [#gf642367]
-DeNA
-ES4やAS3に似た文法をもち、コンパイル後はJavaScriptになる
-[[ES4>#d8043fec]]やAS3に似た文法をもち、
-コンパイル後はJavaScriptになる

***Dart [#fabf5f7e]
※ [[ReactのUI定義のJSX>React#ne8ad84a]]とは異なる。

***[[Dart]] [#fabf5f7e]
-Google
-普及は進まず、2015年にはVMのChrome統合を断念
-[[TypeScript>#kf4fe370]]をGoogle社内の標準プログラミング言語として承認
-JavaScriptの代替となることを目的に作られた。

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

**トランスパイラ [#z4771853]
新しい文法を使ったソースコードを、~
[[ES3-ES5>#d8043fec]]までの文法に置き換えるソースコード変換ツール。

***Babel [#f322ef90]
[[ES7やES6>#d8043fec]]の構文で書かれたJavaScriptを、~
現在のブラウザで使用可能なES5に変換。
現在のブラウザで使用可能なES5(JavaScript)に変換。

***buble [#f66be3e0]

***Traceur Compiler [#x946c8f6]

***Rollup [#fd225c19]

*ツール系 [#s9fa0ab7]

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

***[[bower]] [#q9d1cb30]

***[[npm]] [#y99214ea]

***[[Yarn]] [#r0ec834d]

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

-新JSに対する処理
--新JSのコードを、ブラウザで使えるようにする。

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

-最小化
-難読化
--ugilify

***[[Gulp]] [#i12160b4]

***[[Grunt]] [#m9245dc4]

***[[npm>#y99214ea]] [#e85d48b8]
-[[パッケージ・マネージャ>#i6813c82]]として紹介した[[npm(npm-scripts)>#y99214ea]]が、~
[[タスク・ランナー>#pec2edb2]]としての機能も統合する可能性があるもよう。

-[[Gulp>#i12160b4]]、[[Grunt>#m9245dc4]]に取って代わって、~
専門性の高いタスクを([[webpack]]やjestなど)に委譲する。
専門性の高いタスクを([[webpack>#z8a6be11]]やjestなど)に委譲する。

***参考 [#l7a3e7e6]
-[意訳]私がGulpとGruntを手放した理由 - Qiita~
https://qiita.com/chuck0523/items/dafdbd19c12efd40e2de
-npm で依存もタスクも一元化する - Qiita~
https://qiita.com/Jxck_/items/efaff21b977ddc782971

**モジュール・バンドラ [#of6181e9]
[[CommonJS>#xe3a8701]]のrequire機能(外部モジュール読込)を、~
階層構造が異なるライブラリを依存ライブラリをバンドルする。
[[CommonJS>#xe3a8701]]の[[外部モジュール>JavaScriptライブラリの作り方#yf624c6f]]をバンドルする。

***browserify [#u16e1dce]
***[[Browserify>JavaScriptライブラリの作り方#pa8af3e0]] [#u16e1dce]

***[[webpack]] [#z8a6be11]
[[タスク・ランナー>#pec2edb2]]の要素も含んでいる。

-参考
--npmとwebpackでビルド - jQueryからの次のステップ - Qiita

---[旧記事]webpack3~
https://qiita.com/civic/items/9f6d973839d2a1c99ac9

---webpack4~
https://qiita.com/civic/items/82c0184bcadc50965f91
>むずかしくないJavaScriptのやさしい話~
jQueryからの次のステップ #ndsmeetup8~
https://www.slideshare.net/fbcivic/javascript-ndsmeetup8

***rollup [#eba42278]

**その他 [#pfc77681]

***[[Express]] [#yff1d559]
[[Node.js>#q9fc6e24]]向けの高速で最小限の Web フレームワーク

***ESLint [#zdecbb02]
JavaScriptの静的検証ツール

-ESLint 最初の一歩 - Qiita
-ESLint 最初の一歩 - Qiita~
https://qiita.com/mysticatea/items/f523dab04a25f617c87d

*ライブラリ、フレームワーク系 [#m13d5905]

**ライブラリ [#qba41cc7]

***prototype.js [#vad3f37c]

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

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

***[[jQuery]] [#u9783154]
-ライブラリ
-実績多数
-Bootstrapなど有名所が依存

**MV* UIフレームワーク [#l66057b9]
***[[HTTP Client>JavaScript の HTTP Client]] [#b5d545a5]

**[[(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" アーキテクチャにおけるスコープ
--双方向データ結合
***[[Vue.js]] [#o9dc5e69]

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

***Vue.js [#o9dc5e69]

***比較 [#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/

*その他 [#pd4005a5]
**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

***, etc. [#n640f68d]

**[[JavaScriptライブラリの作り方]] [#q5640f51]

*その他 [#p71321d5]

**[[HTML5>HTML5 JavaScript API]] [#w02f087f]

**[[デバッグ>JavaScriptのデバッグ]] [#t24dcd82]

*参考 [#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

***ツール類 [#z34ab455]
-レトロエンジニアのための近代Webフロントエンド事情 - Qiita~
https://qiita.com/uctakeoff/items/ce8da368d020273c6064

-HTML／JavaScript開発作業を効率化する便利ツールの活用連載一覧：CodeZine（コードジン）~
https://codezine.jp/article/corner/578

***今風の書き方 [#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
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS