ステップアップのためのJavascriptデザインパターン入門（５） 【シングルトンパターン】
このブログでのデザインパターン連載も５回目になってやっと連載らしくなってきました。 引き続き今回はシングルトンパターンを紹介します。 シングルトンパターン オブジェクトのインスタンスの生成を1つに制限する、というのがシングルトンパターンです。 手軽に実装するには以下のようにオブジェクトリテラルを使用することで実装できます。 var Singleton = { prop: 1, another_prop: 'value', method: function() {…}, another_method: function() {…} }; しかし、これではプライベート・パブリックの区別ができません。全てのプロパティ、メソッドにアクセスできてしまいます。 シングルトンパターンの常套手段としては、インスタンスが作成されていなかったら作成し、すでに作成されている場合はそのインスタンスを返します。 サ
複数のAjaxタスクをシーケンシャルに実行するには？
処理1 > 処理2 > 処理3のように複数のAjaxを直列実行しなければいけなくなったとき、以下のようにコールバックがネストしていってガチガチのコーディングになってしまう。このネスト構造、API1とAPI3の順番を入れ替える修正とかイヤになりますね。 今回はこういう処理をキレイに可読性高く記述しようという話。 $.getJSON('path to API1', function() { $.getJSON('path to API2', function() { $.getJSON('path to API3', function() { // つづく ... }); }); }); jQuery.Deferredを使おうこれらを解決するためにjQuery.Deferredを使用します。 jQueryのAjaxはPromiseオブジェクトを返してくれるので下のようにタスクを定義します。 v
春からはじめるモダンJavaScript / ES2015 - Qiita
春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。 簡単に(雑な)歴史を紹介します。 ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ
[jQuery]こんな機能があったんだ。jQuery stop()|WEBプログラム覚書
HOME>WEBプログラム覚書>[jQuery]こんな機能があったんだ。jQuery stop() [jQuery]こんな機能があったんだ。jQuery stop() 「Buttons like Windows 7 with JS & CSS」を見てて って記述あったので調べてみたらstop()って色々使えるんですね。 全然しらなかったです。 stop([clearQueue], [gotoEnd]) 引数は2つ。何も指定しないとfalse [clearQueue]がtrueの場合、持っているキューが全て削除される。[gotoEnd]はtrueにすると現在のアニメーションの最後のコマへジャンプする。
javascript 即時関数のトラップ - かもメモ
(function() { })(); こんなのを即時関数って呼びます。よく書くと思います。 で、gruntなどでライブラリなどを結合して、min化したりするのですが この即時関数の前に;が無いと死んでしまうトラップがあったりするので注意が必要です。特に自分で書いていないライブラリと結合した時とか。 いろんな即時関数の書き方 // #1. /* たぶん一番有名？ */ (function() { // 処理 })(); // #2. (function() { // 処理 }()); // #3. +function() { // 処理 }(); // #4. -function() { // 処理 }(); // #5. /* Twitter Bootstrapとかで使われてる */ !function() { // 処理 }(); // #6. void function() { //
【JavaScript】無名関数と即時関数？関数パターンを理解してメンテナブルなソースに！ | unitopi - ユニトピ -
はじめまして、 unitopiさんの下でライターをさせていただくことになりました、chikurinです。 どうぞよろしくお願い致します。 今回、Javascriptの関数パターンを2種類ご紹介させて頂きます。 関数とは・・・タスクや値の計算を実行する文の集まりである MDN Javascriptガイド jQueryやそのプラグイン、他の人が書いたJavascriptコードを見ると、 ①②のような書き方にでくわしたことはないでしょうか？ ① var [変数名] = function (){...}; ② (function(){...})(); ※...は、処理内容を表します。 ここでは、こうした書き方を1つずつご説明したいと思います。 まず、①の書き方は「無名関数」と呼ばれます。 何故このような書き方になるのか、 関数の書き方をおさらいしつつ考えてみましょう。 Javascriptの関数は
IE10 以下を切る場合の JavaScript チェックリスト - Qiita
この投稿は、 JavaScript Advent Calendar 18日目の記事です。 更新履歴 こちら をご覧下さい JavaScript の書き方をアップデートする JavaScript Good Parts で書かれているような JS の書き方は、古くなりつつある部分も多いです。 正直なところ、自分はあの本が「今でも」良書だとは思っていません。 初学者に勧めることもしません。まんべんなさと普遍性と客観性から「パーフェクト JavaScript」 を勧めています。 その頃と比べると、 JavaScript をとりまく環境は変わりました JavaScript の進化に合わせて書き方もアップデートしていくべきなので、今回は分かりやすいしきい値として 「IE10 以下を切れるとしたら」 という前提で、列挙してみます。 たとえば XHR2 や File API に依存したサービスをやる場合な
最近の行儀のよい JavaScript の書き方 - Qiita
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 - var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 - this === window だと思うこと 今回は、
JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで
JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで：15周年記念特別企画 ＠ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた＠ITの豊富なWeb開発関連記事とともに振り返る。 2015年6月17日に、JavaScriptの最新標準仕様となる、ECMAScript 6（ES6、ECMAScript 2015）が正式に承認されました（参考）。1997年にECMAScriptのバージョン1がリリースされてから6度目のアップデートとなり、これまでの中で一番大きな変更が加えられたことになります。 本稿では、ECMAScript 6が正式に承認されたということもあり、2000年頃の第一次ブラウザー戦争
Handlebars
Semantic templates Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Mustache-compatible Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates. Fast execution Handlebars compiles templates into JavaScript functions. This makes th
React.js 実戦投入への道 - Qiita
最近話題のReact.jsですが、実戦投入に当たっては結構重たい選択を迫られることになります。 ざっくり言えば、テンプレートエンジンを捨ててReactしますか?それともReactあきらめますか?という選択です。 本記事ではReactの基本思想とこうした選択肢が生まれてしまう背景を述べるとともに、後半では「どちらもあきらめない」という(若干シミュレーションRPGあるある感のある)第三の方策について案を提示します。 Reactの基本 最初に、Reactの基本的な仕組みについてまとめておきます。 Reactは公式ドキュメントが非常に充実しているので、始める際はぜひQuick Startのドキュメントに目を通すことをお勧めします。 Getting Started Tutorial Thinking in React 後述しますが、Reactを使ってアプリケーションを作る際の設計方法についての記載が
Hogan.js
Getting started Hogan.js is a 3.4k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates. If you're developing with Node.js, just use NPM to add the Hogan package. $ npm install hogan.js Alternatively, drop hogan.js in your browser by adding the following script. <script src="h
IE8以下でCSS3とHTML5の対応 - respond.js、html5shiv.js | PbTimes 情報誌
respond.js、html5shiv.jsについて IE8以下では動作しない CSS3、HTML5でコーディングを行った場合、IE8などの古いブラウザでは有効になりまん。 今回は、IE8以下でCSS3・HTML5を有効にすることができるプラグインを紹介します。 これでIE8以下のブラウザでもレスポンシブWebデザインが実現できます！ 設定も簡単で、JavaScriptのファイルを読込むだけです。 CSS3、HTML5は使うべき？ 「そもそも、CSS3やHTML5は使うべきではない」 と言う人はたくさんいます。 確かに、IE8以下のブラウザを使っている人はたくさんいますし、全ての人に意図する表示を行うべきだとは思います。 JavaScriptで対応したとしても、JavaScriptをブラウザで無効にされていたら使えないですからね。 しかし、せっかくの新しい技術を使わないなんてもったいない
今の時代必ず知っておくべき！！Twitterツイートボタンの設置・実装方法まとめ
以前、Facebookのシェアボタンの実装方法を書いたが、 Twitterのツイートボタンも実装方法が何パターンかある。 Facebookに引き続き、Twitterの実装方法もまとめてみた。 併せてFacebookのシェア実装方法について知りたい人は次の記事も見て欲しい。 これであんたもシェア名人。Facebookシェアボタンの実装まとめ 公式ツイートボタン 公式のツイートボタンのウィジェットをサイト上で生成可能。 シェアテキストはデフォルトでページタイトルとページのURL、 そのままであればどのアカウントの情報（ページ）からシェアしたかわかるように、@Yuhiiskさんからなどが入る。 この @Yuhiiskさんから を削除するにはユーザー欄を空にすればいい。 Tweet Twitterボタン | About ダイレクトリンク aタグにリンク先を指定して実装する、一番お手軽な実装。 <a
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
誰もが一度は陥る日付処理。各種プログラミング言語におけるDateTime型/TimeStamp型の変換方法のまとめ - Y's note
日付型の変換処理 Date/Timestamp変換のまとめ - Yuta.Kikuchiの日記 10言語のプログラミング言語に対してそこそこの知識を保有している@yutakikucです。いろんなプログラミング言語を使用していると文法を覚えるのは大変ですよね。PHP書いている途中からJavaScriptの文法を誤って書き始めたり... それぞれの言語の文法の違いを事細かく覚える事は無理に近いです。今日はそんな各種言語仕様の記述で難解なDateTime/TimeStampについて紹介したいと思います。扱うのはWeb系のメジャープログラミング言語のSQL/C++/Java/JavaScript/Perl/PHP/Python/Rubyになります。Mysqlからデータを取り出した後や、WebAPIから取得したデータを表示用の日付フォーマットに変換する事があると思うのでそこで利用できる知識になるかと
[JavaScript]要素のスタイル情報を取得する (window.getComputedStyle)
styleオブジェクトのプロパティ インラインまたは動的に設定されるすべてのスタイルには、要素のstyleオブジェクトのプロパティからアクセスできます。 var position = elem.style.position 注意点としては、backgcounr-color のように、ハイフンが名前に含まれるプロパティについては、キャメルケースを使う必要があることです。('-' が減算演算子と解釈されてしまうため。) var bgcolor = elem.style.backgroundColor; また、上記の方法で取得できるのは、インラインで設定されたか、JavaScriptを使って動的に設定されたスタイル値だけなので、スタイルシートを使って設定されたスタイルにはアクセスできません。 スタイルの設定方法に関係なく、スタイルにアクセスする方法 スタイルシートを使って設定されたスタイルにアク
![[JavaScript]要素のスタイル情報を取得する (window.getComputedStyle)](https://cdn-ak-scissors.b.st-hatena.com/image/square/77d0bbddc890111687cbc95b556f8a14c08e275b/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2Fblogger_img_proxy%2FAEn0k_vEpMUL6qIHipzc5ER2jpBWhQpUdD20gLfkRW3hbTe7o4JpxwqxZv6xUBwG5evoWec6f4cxwjM4_v7tEsO0_qPwW30qlFpf5QSsT5IAUdRLs202EtB01-t2nh-IZV7e0W8%3Dw1200-h630-p-k-no-nu)
JavaScriptによるCSSの操作 | 暴満館 ～The House of full Violence～
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する {#deleteRule} function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらな
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SweetAlert