var class2type = {}; var toString = class2type.toString; jQuery.extend({ /* ... */ type: function( obj ) { if ( obj == null ) { return obj + ""; } // Support: Android <=2.3 only (functionish RegExp) return typeof obj === "object" || typeof obj === "function" ? class2type[ toString.call(obj) ] || "object" : typeof obj; }, /* ... */ }); // Populate the class2type map jQuery.each( "Boolean Number Str

フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

一人Advent Calendarの3日目です。 JSONPを使って外部のAPIを呼び出して、結果を取り込むということは色々なところで行われています。しかし、そもそもJavaScriptを利用した場合、クロスドメイン通信が使えないという前提があります。JSONPだったら、何故そこを回避できるのでしょうか？あまり詳しく考えたことが無かったので、簡単に調べてまとめてみました。なんというか4周くらい遅れている話題ですが、気がついた時に整理するとスッキリします。 JSONPの動作原理 Wikipediaさんをみてみると、そのものずばりのことが書かれています。scriptタグ内のsrc属性は別ドメインのURLを指定できるという点と、そのレスポンスはJavaScript関数呼び出し形式になるという点をついたのが、JSONPの動作原理です。なんというか、仕様の考慮不足を利用した仕組みだと思います。 JS

これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変わったりして大変恐ろしい事になってしまう。 そこで、ファイル全体を関数で括る事でスコープを生成して、グローバルではない変数にしておこう、というもの。ただしvar宣言なしに変数を使い始めると、結局グローバル変数になってしまうので注意。 次世代JavaScriptだとletとかあるけど触れません、関係ないし。 関数の前後にくっついてる括弧は 関数は作成するだけでは何もならないので、即時実行してやります

この記事は webcomponents.org の記事とのクロスポストです。 HTML は言うまでもなく、ウェブページを構成する最も重要な要素です。しかし、提供される機能が低レベルなため、複雑なコンポーネントを作ろうとすると、途端に div だらけの分かりにくい構造になってしまいがちです。例えば、あなたが必要な機能を盛り込んだ独自のコンポーネントを作れるとしたらどうでしょう？例えばそのコンポーネントに、機能を的確に表すタグ名を付けられるとしたら？既存のタグを拡張して、新しい機能を追加できるとしたら？ Custom Elements は、それを可能にします。 Custom Elements とはなにか？ # Custom Elements は開発者が独自に HTML タグを定義し、サイト上で利用できるようにすることで、繰り返し利用されるコンポーネントを単純化し、再利用する手間を大幅に削減しま

株式会社つみき UI/UX事業終了のお知らせ 拝啓　時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com

JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに 何となくDeferredを知っているがちゃんと使ったことのない人向けの記事です。 本文中の p はPromiseオブジェクトを指します。（追記：Deferredオブジェクトを使うこともありますが、普通はPromiseに対して .then() や .done() をぶら下げます。） いきなり具体例 1 が出力された1秒後に 2 と done! が同時に出力される。 function test_deferred() { var p = new $.Deferred().resolve().promise(); p = p .then(function() { var d = new $.Deferred(); setTimeout(function() { console.log(1); d.resolve(); }, 1000); return d.promise(); }); p

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

似たようなツールはよくあるが、ドメイン名が覚えやすかったのと機能が豊富なのでご紹介。 JS Prettyでは、JavaScriptのソースを綺麗にしてくれるツールを提供している。 使い方は簡単で、綺麗にしたいソースを貼り付けるだけだ。 オプションも豊富で、インデントを何桁にするかとか、配列で桁を揃えるだとか、チェーンメソッドで改行するか、とかのマニアックな設定が可能だ。 よくJavaScriptをいじる人だったら知っておいても損はないかもですな。

# ノーマルキャラクタ用判定関数の生成 init_UTF8_map = (scope) -> nonSurrogatePair = [ [0x00A1,0],[0x00A4,0],[0x00AA,0],[0x00C6,0],[0x00D0,0],[0x00E6,0],[0x00F0,0],[0x00FC,0] ,[0x00FE,0],[0x0101,0],[0x0111,0],[0x0113,0],[0x011B,0],[0x012B,0],[0x0138,0],[0x0144,0] ,[0x014D,0],[0x016B,0],[0x01CE,0],[0x01D0,0],[0x01D2,0],[0x01D4,0],[0x01D6,0],[0x01D8,0] ,[0x01DA,0],[0x01DC,0],[0x0251,0],[0x0261,0],[0x02C4,0],[0x02C7,0]

続きましてもうちょっとかっこよくしていきたいと思います。かっこいいというかJavaScriptファイルが一つですので数人で開発するときにはちょっと困りますね。なので少し「かっこよく」です。前回はビルトインディレクティブと簡単なコントローラーとファクトリーまで行いました。 初心者向けAngularJS - その１ - albatrosary's blog ゴールですが ファイルを用途に合わせて分割する ルーターを導入しページ遷移を作成する です。前回作ったものを流用する形ですが、作業量が少し多いですので焦らずにご自身のペースで進められてはと思います。分かりづらい事項はコメントを入れていただくかツイートして頂けたらと思います。 ファイル分割は最終的に次のようになります： 少し難し話 コーティングを始める前に少し背景を。 最近ではWebアプリケーションを「SPA(Single-page Appl

この記事は「AngularJS初心者向けハンズオンのネタ」としてまとめています。最近ではいろいろ書籍もありますし、AngularJSリンク集でもまとめている通り資料は豊富にありますが改めて。内容としてはビルトインディレクティブとコントローラー/ファクトリーを触ってみる程度です。 Angularリンク集 - albatrosary's blog ※ この記事はAngular1.3をベースに書いています。Angular1.5ベースのものはこちらになります(追記:2016/2/18)。 GitHub - albatrosary/Angular1Study: Comprehensive Beginner’s Guide to Angular 準備 サーバのインストール Python 「 http://www.python.jp/ 」からダウンロードしインストールします コマンドラインで $ pyt

※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早速い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFacebook Flowの動向に注目 Backbone.js ModelとEventを使う/Viewは使わなくていい Lodash Underscore.jsをよくしたやつ Gulp Gruntより良いという意味で。browserifyまわりがうまく動かない問題があってnpm runのほうがいいという噂もあるがまあ良いに分類してもいい EventEmitter Custom EventはDOMにくっ付いてる感があるのでロジック志向の物にはEventEmitter使った