var myAjax = function(arg) { var opt = $.extend({}, $.ajaxSettings, arg); opt.success = (function(func) { return function(data, statusText, jqXHR) { console.log('success時の共通処理 ...'); if (func) { func(data, statusText, jqXHR); } }; })(opt.success); opt.error = (function(func) { return function(jqXHR, statusText, errorThrown) { console.log('error時の共通処理 ...'); if (func) { func(jqXHR, statusText, erro
JavaScript(というか CoffeeScript)って90年代にブラウザ上で使われていた頃のイメージが拭えず、どうも気持ち悪くて逃げて回ってたんですが、事情があって最近は渋々書いてます。 JavaScripterの皆様にとっては何を今更だとは思いますが jQuery.Deferredを使って楽しい非同期生活を送る方法 を読んで Deferred 便利だな、と思ったので理解したところをメモしておきます。 利用シーン $.get() ってエラーハンドリングできないのか。使えないなー。と思ったとき 複数の AJAX リクエスト(などの非同期処理)を同時に開始して、全部終わったら何かしたいとき。 Deferred object キーになるのは Deferred object です。 状態 Deferred object は状態を持ちます。状態は３つのうちいずれか。 未解決(unresolv
Vue.jsは軽量なMVVMライブラリ。 vue.js http://vuejs.org/ 使ってみた感じ、かなり手触りがよいので、紹介する。 概要 handlebars風のテンプレートを書いて、DOMを展開する。普通のテンプレートエンジンと違い、$dataアクセッサを通じて値を書き換えることで、テンプレート展開後も値が同期する(!!!)。 一言で言うと軽量Angular。コード読んだ感じ、内部的にもAngularから大量にコードを持ってきた痕跡がある。$watchとdirective定義がキモなのは同じ。 とはいっても、軽量なのは使う側のAPI側だけで、内部実装はそれなりに重い。APIを軽量にすることで、Angularのデメリットである学習コスト部分を限りなく削ることを目標にしているんじゃないだろうか。 大雑把な使い方 テンプレートを書く。対応するデータ構造を書く。{foo: 'bar'
JavaScriptで配列から要素を削除する方法まとめ公開日: 2015-02-13この記事では、JavaScriptを使って、文字列の先頭と末尾、指定位置など、様々な条件を付けて配列から要素を削除する方法を紹介します。目次サンプルコードちょこっとメモサンプルコード
Bower入門(応用編) さて、応用編を書いていきます。 基礎編ではBowerのインストールとライブラリ管理する上での基本的なコマンドを紹介しました。 応用編ではBowerのライブラリを管理する上で利用するべきツールやライブラリを公開する上で心がけるべきことについて書いていきます。 少し長いのでサマリ Bowerを管理する上で利用すると良いツール：grunt-bower-taskがオススメです ライブラリを公開する上で心がけること、その1：mainとignoreをちゃんと書きましょう ライブラリを公開する上で心がけること、その2：ちゃんとgit tagを使ってバージョン管理しましょう Bowerからインストールしたライブラリを利用する場合 前回の基礎編で少し書きましたが、おさらいすると、Bowerはあくまでパッケージマネージャなので、インストールしてもフォルダ構造までは変えてくれません。
Bower入門 これから Bower について書いてきます。Bowerの使い方から実際に使う上で考慮することまで含めて書きます。 長くなりそうなので単に使うだけの基礎編とモジュールを作る上で気をつけることをまとめた応用編に分けて書きます。 Bower とは Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、 Ruby で言う gem、 Perl で言う cpan のようなものです。 Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。 パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。 また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。 さらに自分のライブラリを Bower comp
前回 nvm を使った Node.js, npm のインストール方法 について紹介しました. 今回は Node.js のパッケージ管理ツール npm の使い方と packcage.json の活用方法について紹介します. npm の使い方をマスターすれば, 自作の Node.js パッケージを 公開したり, Node.js を使ったプロジェクトをキレイに管理できます. ぜひ参考にしてください. npm ってなに? npm とは Node Package Manager の略で Node で 作られたパッケージモジュールを管理するためのツールです. 基本 Node.js をインストールすれば一緒にインストールされます. ターミナル or コマンドプロンプトで $npm -v を実行するとバージョンが表示されるのが分かるかと思います. Python でいう easy_install, もしくは
Kobito for Windows をリリース + 技術的な補足, package.json の公開 Kobito for Windows開発の @mizchi です。 開発開始から約半年、ソロ作業の期間も長かったのですが、ようやくリリースできました。 Kobito for Windows – ソフトウェア開発者のためのMarkdownによる情報記録・共有ソフト というわけで、今日はKobito for Windowsの開発コンセプトとElectronやReactを採用した理由について書いていこうと思います。Rails界隈ではGemfileを公開する文化があるようですが、今回はnode.js / npmのそれであるpackage.jsonを公開します。 Kobito on Electronの開発コンセプトWeb技術でKobitoを実装してWin/Macでソースを一本化既存のKobitoの
The document discusses an Electron (formerly Atom Shell) meetup. It provides links to documentation on the differences between Electron and Node-webkit. If time permits, an Electron demo may be shown. Electron allows building cross-platform desktop apps using JavaScript, HTML, and CSS by embedding Chromium and io.js. It also references a presentation on embedding Node.js into the Atom editor.Read
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>Marked in the browser</title> <script src="lib/marked.js"></script> </head> <body> <div id="content"></div> <script> document.getElementById('content').innerHTML = marked('# Marked in browser\n\nRendered by **marked**.'); </script> </body> </html> <!DOCTYPE html PUBLIC ""> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="
今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。 知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。 これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。 ドキュメントも兼ねてアウトプットしていきます。 ##Riot.jsとは Riot.jsは今流行りのReact.jsに似た仕組みを持っている、それで非常に軽量なJavaScriptライブラリーです。 最近GitHubのリポジトリが**/muut/riotjsから/riot/riot**にお引っ越しして、これからがより注目なライブラリーです。 詳しくはこちら↓ Riot公式 Riot.js 2.0 情報まとめ GitHub ##捨てることを前提としたライブラリー選定 最初は今ブームの２大フレームワー
「最近のReactへの言及についての違和感」というエントリ書いたら燃えますかね— イカid:mizchi0x (@mizchi) 2015, 6月 7 僕がみた資料の中でFluxの設計について正しい理解をしていると思えるのはげたさんのこの資料だけです https://t.co/XaKHhhuP2A— イカid:mizchi0x (@mizchi) 2015, 6月 7 みんなsetStateに騙されてる— イカid:mizchi0x (@mizchi) 2015, 6月 7 一部で「React使うとコード量が増える」という意見、サーバサイドで書いたテンプレートのレタッチをするjQueryと比べたらそりゃそうなんだけど、SPAでそもそもJS側がテンプレート握るような環境では handlebars とかで書いてたところが JSXになるだけでそれ移行コスト— イカid:mizchi0x (@mi
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
これは、jsCafe18で話したSlideです。 概要 これから、「Ractive.js」という js上でReactiveなUIを とてもsimpleにbuildするためのlibraryの話をします 目次 reactive programming ractive.js 他のframeworkとの比較 Backboneに入れてみる そもそもReactive Programmingとは？ 古くは、2003年頃から日本のblogでも幾つか言及されてる模様 去年、更に色々と動きが出てきた。 2013/7 ガートナーの2013年のreportで扱われてる 2013/9 リアクティブマニフェストが出た。これ訳されてる方がいた。 2013/9 infoQの記事見ると大体の流れや概要が分かる バズりと意味の広がり なんか徐々にバズり感がある 他のバズりワード(cloud等)と同じように意味が広義に、より抽
Ractive.js Ractive.jsは、インタラクティブなDOM操作を行うためのライブラリです。 データバインディングやDOM更新を簡単に行うことができます。 最近のJavascriptフレームワークを使えば、そういったことはだいたいできますが、 Ractive.jsはとても軽量かつ覚えることも少ないので、すぐに使い始めることができます。 今回はここでやっているように、Ractive.jsを動かしてみましょう。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.5 セットアップ&動作確認 セットアップはとても簡単です。 ここからRactive.jsをダウンロードします。 そしてサンプル用index.htmlを作成し、次のように記述しましょう。 <!doctype html> <html lang='ja'> <head> <meta char
Ractive.jsとは http://www.ractivejs.org/ データバインドに特化したjsライブラリです。 状態監視にVirtualDomの概念を用いているため、挙動が軽く高速です。 実装をテンプレートと、それを監視するRactiveモデルに分離することで、デザインとロジックの分離を実現できます。 モデル設定の記述が直感的かつシンプルで、初見の開発者でも何となく実装を理解できることが強みです。 またテンプレートに必要最低限のロジックを備えているため、複雑なオブジェクトの展開も難なく行うことが出来ます。 Vue.jsほど対応ブラウザに偏りがなく、Angular.jsほど巨大ではない、 データバインドを手軽に取り入れたい際に非常に便利なライブラリです。 Knockout.jsとは立ち位置が似ているので、記法が好みな方を選べばいいのではないかと個人的には思っています。 対応ブラウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
