→JavaScript

→JavaScript関連ツール

→JavaScriptの基礎

→AJAX関連

#contents

*一般 [#e640ed99]
-[[【2019年4月版】JavaScriptのconsoleがすごいことになってた。>https://qiita.com/koinori/items/83f119cb2d82c0ca2c1e]] 2019.4

-[[JavaScriptのコーディングTips集>http://d.hatena.ne.jp/language_and_engineering/20140311/JavaScriptProgrammingTips]] 2014.3.14

-[[Ruby,Python,PHP,JavaScriptでマルチプラットフォームなデスクトップアプリを簡単に作成する>http://d.hatena.ne.jp/yuichi_katahira/20100219/1266592521]] 2010.2.19

-[[JavaScriptプログラマが理解しておくべき8つのこと。の個人的補足>http://blog.xole.net/article.php?id=736]] 2009.12.27

-[[javascriptプログラマのレベル10>http://tech.kayac.com/archive/javascripter-level-check.html]]

-[[JavaScript初心者におくる24のグレイトなtips>http://d.hatena.ne.jp/sandai/20091213/p1]] 2009.12.13

-[[JavaScriptを高速化する31のチェックリスト>http://journal.mycom.co.jp/news/2009/10/29/008/]] 2009.10.29

-[[7 JavaScript Techniques You Should Be Using Today>http://www.digital-web.com/articles/seven_javascript_techniques/]]

-[[9 Javascript Tips you may not know:http://aymanh.com/9-javascript-tips-you-may-not-know]]

 
*言語仕様解説系 [#idf26f58]
-[[[JavaScript] Arrayメソッド破壊・非破壊チートシート>https://qiita.com/Shokorep/items/929e2e66908eaa915286]] 2020.3

-[[JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。>https://qiita.com/suin/items/a44825d253d023e31e4d]] 2020.3

-[[Javascriptでのenum(列挙型)>http://fksekiguchi.sakura.ne.jp/wp/it_basic_understanding/javascript/javascript%E3%81%A7%E3%81%AEenum%EF%BC%88%E5%88%97%E6%8C%99%E5%9E%8B%EF%BC%89]] 2016.7

-[[JavaScriptの基礎を押さえて、中級JS使いを目指す>https://qiita.com/qeema/items/42d4458ba3ddf5d686da]] 2019.11

-[[テンプレート文字列>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings]] 2019.10

-[[JavaScriptの行末セミコロンは省略すべきか>https://blog.tai2.net/automatic_semilocon_insertion.html]] 2015

-[[今すぐJavaScriptデバッグ効率を上げるconsoleテクニック>https://qiita.com/baby-degu/items/2c5cd103df54206ca401]] 2019.10

-メンバに集計したい値を持つオブジェクトの配列で reduce を使って合計を出すサンプル
    chargedAmountsTotal() {
      return this.chargedAmounts.amounts.reduce(
        (accumulator, currentValue) => {
          accumulator.amount += currentValue.amount;
          return accumulator;
        }, {amount:0}
      ).amount ;
    }, 

-[[JavaScriptでforEach, filter, map, reduceとか>https://qiita.com/itagakishintaro/items/29e301f3125760b81302]] 2018.9

-[[JavaScriptのnewって本当にいらない子?>http://taiju.hatenablog.com/entry/20090706/1246840565]] 2009.7

-[[JavaScriptを言語仕様から把握し、ライブラリに振り回されない漢を目指す人に贈るJavaScriptの基礎>https://qiita.com/hakozaru/items/c00e472ab0f5e823098c]] 2018.8

-[[JavaScript の ジェネレータ を極める!>http://qiita.com/kura07/items/d1a57ea64ef5c3de8528]] 2017.7.17

-[[JavaScriptの==の中身を知る>http://qiita.com/IganinTea/items/6a148d69b764df11ad40]] 2017.4.28
--ゆるい比較'=='と厳密な比較'==='

-[[JavaScript イディオム集>http://nmi.jp/archives/488]] 2013.7.3

-[[即時関数(function(){ ... })()の別の書き方いろいろ>http://blog.tojiru.net/article/197270788.html]] 2013.6.16
-[[や...やっと理解できた!JavaScriptのプロトタイプチェーン>http://d.hatena.ne.jp/maeharin/20130215/javascript_prototype_chain]] 2013.2.15

-[[JavaScriptとコールバック地獄>http://techblog.yahoo.co.jp/programming/js_callback/]] 2013.2.9

-[[JavaScriptでうっかりやってしまいそうなこと色々>http://blog.asial.co.jp/1092]] 2012.11.1

-[[ちょっと高度にJavaScript/クロージャでアクセサを作る>http://dev.classmethod.jp/client-side/language-client-side/javascript-closure/]] 2012.10.5

-[[ちょっと高度にJavaScript/クロージャの基礎>http://dev.classmethod.jp/client-side/language-client-side/javascript-closure-basic/]] 2012.10.4

-[[Null & typeof>http://kiro.me/blog/typeof_null.html]] 2012.6.22

-[[What is the Execution Context & Stack in JavaScript?>http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/]] 2012.6.21

-JavaScriptのイベント
--[[イベント>http://www.tohoho-web.com/js/event.htm]]
--[[イベントハンドラ>http://www.tohoho-web.com/js/onevent.htm]]

-[[JavaScriptの初見で読みづらいシンタックス&パターン9種>http://havelog.ayumusato.com/develop/javascript/e316-javascript_evil_syntax.html]] 2012.1.10

-[[undefined may not be undefined>http://blog.livedoor.jp/dankogai/archives/51224098.html]]
--undefined,NaN,Infinityに代入が可能

-[[javascriptには整数はない>http://blog.livedoor.jp/dankogai/archives/51215663.html]]
--JavaScriptのNumberオブジェクトは、数値を常に浮動小数点で保持しているからです。そうなのです。JavaScriptには整数がないんです。整数が「ある」ように見えているのは、文字列にする時に小数点がないだけなのです。

-[[evalは最後の武器>http://blog.livedoor.jp/dankogai/archives/51175261.html]]

-[[for文と無名関数のイディオム>http://d.hatena.ne.jp/amachang/20090119/1232331329]] 2009.1.19

-[[Client-side database Storageとは>http://d.hatena.ne.jp/amachang/20080327/1206607704]] 2008.3.28

-[[JavaScriptは変数名にUnicodeエスケープが使える:http://d.hatena.ne.jp/amachang/20061030/1162165340]]

-[[JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念>http://d.hatena.ne.jp/amachang/20060910/1157911122]]
--JavaScript には実行キューがあり、setTimeout は指定秒後にそれに関数を登録している、ということ

-[[ページはいつ更新されるか:http://blog.livedoor.jp/dankogai/archives/50637906.html]]
--現在のブラウザーの実装は、以下のようになっているようである。「ようである」というのは、仕様書で確認したわけではないからだ。
 イベント発生 → 関数の実行 → ページの再描画
--上記の例で意図したように、カウンターが動いた都度表示させたいと思ったら、その都度関数の実行を完了しなければならない。しかしカウンターを動かすという行為そのものに関数の実行が必要である。どうしたらよいか?
--その答えが、setTimeout()というわけだ。

** thisの理解 [#r269daac]
-[[JavaScriptのthisを理解する>http://qiita.com/takkyun/items/c6e2f2cf25327299cf03]] 2017.7.30
-[[初めてthisにぶち当たった人たちに贈るthisまとめ>http://qiita.com/nave421m/items/94da3099d622bf894d71]] 2017.5.4
-[[JavaScriptのthisの覚え方 >http://qiita.com/items/74005adacc0e8e2a3cab]] 2013.2.1
--トップレベルのthis
--コンストラクタ内のthis
--何かに所属している時のthis
--function#apply とか function#call とかで無理矢理変えられた時のthis


*ES6 [#e1c097e9]
-[[ES2015(ES6) 入門>https://qiita.com/soarflat/items/b251caf9cb59b72beb9b]] 2019.9

-[[JSおくのほそ道 #000 [IndexPage]>https://qiita.com/hosomichi/items/ad9a9c99a4fda041a563]] 2018.1
-[[ECMAScript6にシンボルができた理由>https://qiita.com/naruto/items/312adeb6145eb6221be7]] 2019.11

-[[JavaScriptのモジュールは変数をエクスポートする>https://qiita.com/uhyo/items/6b111815ef5495f4e490]] 2020.3
-[[ES6のexportについて詳しく調べた>https://qiita.com/senou/items/a2f7a0f717d8aadabbf7]] 2019.1
-[[ES6の import / export>https://qiita.com/kiyodori/items/01d07d5c0659e539ecb9]] 2017.12

** class [#a89d49fe]
-[[ES6 class 構文のパフォーマンスについて>https://qiita.com/yuki153/items/120422ae5bdd309f777a]] 2019.8
-[[JavaScriptのclass>https://qiita.com/jooex/items/981824f9fb494b448a08]]

** カリー化 [#j0c3f31f]
-[[高階関数、カリー化、部分適用>https://qiita.com/nouka/items/d9f29db7b6a69baa650a]] 2020.1
-[[サルでもわかるカリー化とそのメリット>https://qiita.com/KtheS/items/1a93ba0a6d722a534439]] 2019.10

** アロー関数 [#ieafd39a]
-[[【JavaScript】アロー関数式を学ぶついでにthisも復習する話>https://qiita.com/mejileben/items/69e5facdb60781927929]] 2019.7
-[[ES2015(ES6)新構文:アロー関数(Arrow function)>http://analogic.jp/arrow-function/]] 2016.2


*非同期処理 [#ia6591f7]
-[[複数の非同期処理を実行して結果待つ>https://qiita.com/horikeso/items/6830014923216db009b3]] 2018.1

-[[Promiseの使い方、それに代わるasync/awaitの使い方>https://qiita.com/suin/items/97041d3e0691c12f4974]] 2019.9

-[[JavaScript Promiseの本>http://azu.github.io/promises-book/]]

-[[JSの非同期処理を初めてES6のPromiseを使ったものに書き換えてみた>https://techracho.bpsinc.jp/tanaka/2014_04_23/16726]] 2018.10
--promiseに渡した非同期処理はすぐに実行されるため、「非同期処理がすぐに終わったらどうなるの?thenを呼ぶ前に終わったらどうなるの?怖い」と最初は思いがちだが実行結果を保持して待つため問題ない。例の場合だとpromiseにAを渡してにthenでB,Cを渡してやると、thenを呼んだ際にAが終わっていようが終わっていまいが、必ずAが終わった後にBかCが呼び出されることになる。

-[[Promiseを使う>https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises]] 2018.10

-[[Promise再入門>http://qiita.com/gcfuji/items/1dfe4265c36bea903ab3]] 2017.5.16


*オブジェクト指向 [#ge9092cd]

-[[Ruby脳が理解するJavaScriptのオブジェクト指向>http://melborne.github.com/2012/09/09/understand-js-oop-with-ruby-brain/]] 2012.9.10

-[[newを封印して、JavaScriptでオブジェクト指向する(1)>http://blog.tojiru.net/article/199670885.html]] 2011.5.7

 
*Web画面制御系 [#n0c6469c]

-[[[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ(仕様比較)>http://coliss.com/articles/build-websites/operation/javascript/js-comparison-list-for-touch-events-script.html]] 2012.6.21

-[[ソースコピーですぐ使えてスマホ専用サイト作成に便利!PC・スマートフォンサイトの振り分けJavaScript作りました。>http://www.html5-memo.com/css3/pc_bunki/]] 2012.5.29

-[[ amachang の 「一行で IE の JavaScript を高速化する方法」を掘り下げてみた>http://d.hatena.ne.jp/uupaa/20081230/1230604575]]

-htmlのタイトルを画面中に表示させるJavaScriptの例
 element = document.getElementsByTagName("body");
 var title = document.title;
 if(element[0]){
       var childElement = document.createElement("span");
       element[0].appendChild(childElement);
       childElement.innerHTML = "<span style=
      'font-family:MS Pゴシック;position:absolute;top:740px;left:900px;]
       font-weight:bold;font-color:black;font-size:25px;
       background-color:white;width:74px;height:20px;z-index:1000;'>" +
       title + "</span>";
 }

-[[Enterキーで送信されてしまうのを防ぐ>http://allabout.co.jp/gm/gc/23972/2/]]

-[[ボタン押下でウィンドウを閉じる>http://www.tagindex.com/javascript/window/close.html]]
 <input type="button" value="サブウィンドウを閉じる" onClick="window.close()">

-[[JavaScriptで新しいウィンドウをサイズ指定して開く>http://www9.plala.or.jp/oyoyon/html/script/newwin.html]]

-[[Javascriptによるフォームの制御>http://www.atmarkit.co.jp/flinux/rensai/mysql5_02/mysql5_02b.html#column1]]

-[[submit buttonの結果を別ウィンドウで開く>http://suz-lab.blogspot.com/2008/09/submit.html]]

-[[複数のレイヤーをずらして動かし立体感を与えるスクリプト>http://coliss.com/articles/build-websites/operation/javascript/mootools-plugin-mparallax.html]]

-[[onclick属性問題について>http://d.hatena.ne.jp/amachang/20080517/1210991851]] 2008.5.18

-[[バーチャルキーボードのスクリプト>http://coliss.com/articles/build-websites/operation/javascript/999.html]]

-[[テーブルの縦列、横列をハイライト>http://blog.livedoor.jp/dankogai/archives/51020029.html]]

-[[tr要素の「display : block;」にはまる>http://www.h-fj.com/blog/archives/2007/05/06-134912.php]]

-[[角丸を簡単な記述で実装するスクリプト>http://coliss.com/articles/build-websites/operation/javascript/884.html]] 2008.3.10

-【超基礎】リンクをクリックしたらJavaScriptのfunctionを実行したいとき
 <a href="javaScript:hoge_func()">実行する</a>
 

*文字列処理 [#ka5ac567]
-[[javascriptでtoLocaleString()およびtofixed(2)を使用する方法>https://codeday.me/jp/qa/20190217/262180.html]] 2019.2
 num.toLocaleString(undefined, {minimumFractionDigits: 2})

-[[全角半角変換>http://blog.livedoor.jp/dankogai/archives/51221077.html]]

-[[Quotemeta 正規表現中のメタ文字をすべてエスケープしてくれる>http://blog.livedoor.jp/dankogai/archives/51058313.html]]

-[[郵便番号から住所へ変換:http://blog.livedoor.jp/dankogai/archives/50639200.html]]


* 日付処理 [#sa3fc1c5]
-[[Moment.jsを使う>https://qiita.com/osakanafish/items/5ef636bbcb2c3ef94953]] 2015.9

 
*画像 [#j14ecc65]
-[[IEでlabelの子要素に画像を含める>http://labs.unoh.net/2009/04/label-img-fix-for-ie.html]]
-[[画像の本来の幅と高さを取得>http://d.hatena.ne.jp/inamenai/20081011/p1]]

-[[手めくり風画像ギャラリー>http://phpspot.org/blog/archives/2009/03/post_332.html]]
-[[スクリプトとスタイルシートで作る画像ギャラリーのサンプル>http://coliss.com/articles/build-websites/operation/javascript/1464.html]]

-[[グラフチュートリアル集>http://www.designwalker.com/2007/10/graph-design.html]]
 


*通信 [#o9d8740b]

-[[Java から JavaScript への通信>http://java.sun.com/j2se/1.5.0/ja/docs/ja/guide/plugin/developer_guide/java_js.html]]
--JSObject

-[[無名関数を使った非同期通信のススメ>http://satoshi.blogs.com/life/2010/01/sync_vs_async.html]] 2010.1.19

-[[Eメール送信>http://code.nanigac.com/source/view/168]]

 
*アニメーション、ゲーム [#qbcee0c0]

-[[JavaScript アニメーションとデザインパターン>http://amachang.sakura.ne.jp/misc/ut/]] 2012.5.14

-[[JavaScriptでテトリスみたいなゲームを作ろう>http://svn.coderepos.org/share/docs/amachang/20080813-procamp2008/index.html]]

-[[アニメーションするドロップダウンメニュー>http://phpspot.org/blog/archives/2008/04/sliding_javascr.html]]

-[[Matrix風にページを表示する:http://www.simplexsimple.com/archives/2006/11/javascript_1.html]]

-女の子が降ってくるスクリプト(http://q.hatena.ne.jp/1231366704の31番)
 javascript:(
 function(){
   scroll(0,0);
   H='http://hamachiya.com/';
   D=document;
   F=Math.floor;
   R=Math.random;
   Q=new Image;
   Q.src=H+'g1.gif';
   L=function(){
     var X=F(R()*vw);
     var Y=0;
     var r=F(R()*9)+3;
     var V=Z(X,Y);
     D.body.appendChild(V);
     var f=function(){
      if(Y+r<vh){
        V.style.top=(Y+=r)+'px'
      }else{
        V.style.top=vh+'px';
        V.src=H+'g2.gif';
        setTimeout(function(){V.src=H+'g3.gif'},550);
        clearInterval(t);
      }
     };
     var t=setInterval(f,40)
   };
   Z=function(x){
     var e=D.createElement('img');
     e.src=Q.src;
     var s=e.style;
     s.position='absolute';
     s.left=x+'px';
     s.top=0;
     return e;
   };
   var vw,vh;
   Q.onload=function(){
    vw=(self.innerWidth||
      D.documentElement.clientWidth||D.body.clientWidth)
         -Q.width;
    vh=(self.innerHeight||
      D.documentElement.clientHeight||D.body.clientHeight)
         -Q.height;
    setInterval(L,800);
    Q.onload={}
   }
 }
 )()
 	
*開発技法 [#n319b052]
-[[Visual Studioで静的HTMLページのJavaScriptコードをデバッグするには?>http://www.atmarkit.co.jp/fdotnet/dotnettips/568javascriptdebug/javascriptdebug.html]]

-[[Eight Simple Rules for Maintainable Javascript >http://blog.gja.in/2012/06/eight-simple-rules-for-maintainable.html#.T_MED_XDW4Y]] 2017.7.3

-[[ある意味究極のソースコード添付法:http://blog.livedoor.jp/dankogai/archives/50654386.html]]

 
*ブックマークレット [#efea4dad]

-[[作業効率が加速する…無駄を省いてブログ執筆の時間を短縮しよう!私が現在使用している「ブックマークレット」6選!>http://ozpa-h4.com/2012/09/11/bookmarklet-when-write-blog/]] 2012.9.11

-[[ブックマークレットとは>http://d.hatena.ne.jp/keyword/%A5%D6%A5%C3%A5%AF%A5%DE%A1%BC%A5%AF%A5%EC%A5%C3%A5%C8]]
--Bookmarklet。ウェブブラウザで作動するJavaScriptプログラムの一種。
--通常ウェブブラウザでブックマーク(お気に入り)を選ぶと、登録しておいたURLに遷移するが、URLの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選んだ時にプログラムが実行されてちょっとした機能が実現できる。そのようなものをブックマークレットと言う。
--インストールはそのコードをブックマークするだけで行える。
--「ブックマークを選ぶ」という操作だけで機能を実行できる点が手軽であり、ブラウザの簡便な追加機能として様々な種類のものが広く配布されている。

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS