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

「[[.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/

*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/

*[[ストレージ>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

*エフェクト [#k0f136b5]
**効果音 [#cf0fca98]
HTML5 Audio オブジェクトを JavaScript で制御する。

 <script>
   var audio = document.getElementById("audio"); // audioの取得
   audio.play(); // mp3の再生
 </script>

 <body>
   <audio id="audio">
     <source src="xxxxx.mp3" preload="auto">
   </audio>
 </body>

***複数の音源データの指定 [#b28f8192]
-HTML JavaScriptでAudioタグを使用し複数の音源データを指定が出来ません... - Yahoo!知恵袋~
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11157174196
><audio> タグを別にして、別の id で管理する。

**アニメーション [#se421493]

***jQuery - Effects の .animate()メソッドを使用。 [#zb7490ef]
.animate() のメソッド・チェーンで実装可能。

以下は、ボタン押下時のアニメーション＋効果音。

 $(function() {
   var audio = document.getElementById("audio"); // audioの取得
   $('.imgbutton').on('click', function() {
     audio.play(); // mp3の再生
     $(this).animate(
       {
         width: '100px',   // 小さくしたときのサイズ（幅）
         height: '110px'   // 小さくしたときのサイズ(高さ）
       },
       {
         duration: 50,    // 小さくするときにかかる時間（ms）
         complete: function() {
           $(this).animate(
           {
             width: '175px', // 大きくしたときのサイズ（幅）
             height: '220px' // 大きくしたときのサイズ（高さ）
           },
           {
             duration: 100,   // 大きくしたときかかる時間（ms）
             complete: function() {
             $(this).animate(
             {
               width: '150px', // 元のサイズ（幅）
               height: '165px' // 元のサイズ（高さ）
             },
             {
               duration: 100   // 元のサイズに戻るときにかかる時間（ms）
             });
           }
         });
       }
     });
   });
 });

***拡大・縮小アニメーションの対処 [#ldd91c24]
-横並びの要素の場合~
横並びの要素が拡大・縮小アニメーションの影響を受ける場合、~
要素を"[[float:left;>CSS#xec6ed76]]"のDIVで囲むと影響を受けなくなる。~

*バック・グラウンド処理 [#d6ac8bf9]
setTimeoutやsetInterval、最新の「Web Workers」を使用可能。

**setTimeout [#s1aa8641]
指定された遅延の後に、コードの断片または関数を”一回だけ”実行する。

***参考 [#nb894da6]
-window.setTimeout - Web API インターフェイス | MDN~
https://developer.mozilla.org/ja/docs/Web/API/Window/setTimeout

**setInterval [#d7023a79]
指定された遅延の後に、コードの断片または関数を”繰り返し”実行し続ける。

***参考 [#ddc186ba]
-window.setInterval - Web API インターフェイス | MDN~
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval

**Web Workers [#k70a53f3]

***参考 [#h2607937]
-ウェブ ワーカーの基本 - HTML5 Rocks~
http://www.html5rocks.com/ja/tutorials/workers/basics/
-JavaScriptの並列処理とWeb Workersについて - SkyVisualEditor & SuPICE Blog~
http://info.skyvisualeditor.com/blog/2015/150728_000990.php

**Promise [#j2209b5b]
Promiseではコールバックを関数に渡すかわりに、~
コールバックを付属させたPromiseオブジェクトをリターンする。

***従来型 [#kd421f1a]
doSomethingの中で、successかfailureのcallbackを呼ぶ。
 function successCallback(result) {
   console.log("It succeeded with " + result);
 }
 
 function failureCallback(error) {
   console.log("It failed with " + error);
 }
 
 doSomething(successCallback, failureCallback);

***Promise型 [#y0900d7b]
Promiseを返し、thenやcatchのメソッド・チェーンでCallbackを処理。

-例１
 let promise = doSomething();
 promise.then(successCallback, failureCallback);

-例２（メソッド・チェーン）
 doSomething().then(successCallback, failureCallback);

***参考 [#hc8af65d]
-JavaScript | MDN
--Promise~
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise
--Using promises~
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises

-Qiita
--今更だけどPromise入門~
https://qiita.com/koki_cheese/items/c559da338a3d307c9d88
--Promiseについて0から勉強してみた~
https://qiita.com/toshihirock/items/e49b66f8685a8510bd76

*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]
**トレンド [#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