Help us understand the problem. What is going on with this article? この記事は「Gunosy Advent Calendar 2014」の21日目の記事です。 Gunosyの広告配信チームでJavascriptおじさんをやってるaitaです。 最近Gunosyに入社しました。フロントエンドエンジニアではない。 今年はMarionette.jsをいろんなとこで使ってたので、Marionette.jsの紹介します。 Marionette.jsの各コンポーネントについては、 ドキュメントとソース読むのが一番だと思うので書きません。 何故、Marionette.jsを使うのか AngularJS使いたくないからというのは半分冗談です。 僕がMarionette.jsを使い始めた理由は、Backbone.jsがもともと採用事例があっ

Angular.jsを使っていてこんな風に思ったことはないだろうか。 ループ内のDOMをテンプレート化したいな レンダリング処理を部品化してカスタムタグで呼び出したい jQuery UIとかを使いたいけど、どこで処理すればいいのか(document.readyだと新規追加したものに適用されない) そんな願いをかなえるのがAngular.jsのdirectiveです。directiveは、一言で言えば ModelとDOMを受け取ってレンダリング処理(compile)を行う関数 で、これを使って上記のようなカスタマイズをすることができます。 そんなわけで、作成したサンプルはこちら。このコードを使って解説をしていきたいと思います。 テンプレート化する テンプレート化は、以下のようにかけます。 <disp-destination ></disp-destination>、これがdirectiveを

RESTful API の作成に特化したマイクロフレームワーク grape の存在を知ったので調査してみる事にしました。API の実装 に Rails の ActionController は重厚すぎる、Sinatra は軽いけど手間がかかる。。。という中で作られたこのフレームワーク、はたしてその実力は… grape の特徴# grape の特徴は概ね以下の通りです。grape 自体が Rack アプリケーションなので Rails3 に組み込むことが出来ます。というよりは組み込んで使うのが前提のようです（勿論単体でも動きます）。 Rack アプリケーション Sinatra ライクな DSL 自動で JSON にシリアライズ（#serializable_hash または #to_json が存在すればOKみたい） grape を使ってみる# 特徴を掴んだところで、実際にインストールして使って

サーバを使ったiPhoneアプリを作りたかったので、簡単にサーバ側作れないか調べてみました。結論として結構簡単に出来る事が分かったのでメモメモ。 参考にした記事 Sinatra＋ActiveRecord＋SQLite3で，軽量なWeb-DB連携例 | tamo's blog 大分参考にさせて頂きました。ありがとうございます！ 仕事ではMySQLを使う事が多いので、SQLite3ではなくMySQLを使う事にしました。 手順 Ruby,MySQLをインストール データベースを作成 Gemfileを作成とインストール database.ymlを作成 Rubyファイルを作成 実行 動作確認 1. Ruby,MySQLをインストール 結構な量になったので別記事にまとめました。ここが一番面倒(´Д｀) - Ruby,MySQLの環境を構築する(Mac版) #MySQL #Mac #Ruby #home

Sassと比べると日本語の情報が少ないと感じたので、Stylusを始めるときに、 最低限これだけ知っておきたい 書き方をまとめてみた。 Stylusとは Stylus は Node.js 製の CSS プリプロセッサ-。Express、Jade (Pug) と同じ人が開発してる。Sass と Less より後発で、2つの良いとこ取り をしていて、機能も豊富（らしい）。 インストールは npm から

神話序章 最近はReactiveだとか仮想DOMだとかがホットで、その辺りキャッチアップしていかなきゃなあと思ったのですが、今回はコードを書くその右手が疼く人のためのおすすめライブラリを紹介させてください。 神話第一章 Loki ロキ - Wikipedia ロキ（古ノルド語: Loki）は北欧神話に登場する悪戯好きの神。その名は「閉ざす者」、「終わらせる者」の意。 か、かっこいい。。。 Loki.js。browser/node両対応のオンメモリストレージエンジン。APIはMongo風で、慣れた人なら直観的に扱えるはず。 var db = new loki(); var users = db.addCollection('users'); users.insert({ name: 'loki', email: 'loki@example.com', age: 18 }); users.in

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?

昨年のAdvent Calendarを眺めたり、JS周りの記事を見ていると、RequireJSとか、CommonJSとか、AMD、Browserify、webpackあたりが、同じような文脈で登場するんですが、それぞれ何を指しているのかよくわからなかったため、今更ながらまとめてみます。 前提 小規模にしかJavaScriptを使っていないWebサイトでは、jQueryを使ってDomイベントで色んな処理をして、Domに反映させる。というような処理が、ごちゃっとまとめて書くことが多いかと思います。ごちゃっととは、特にDomにしか情報を保持していない状態を指していて、イメージとしてはこのようなコードです。 $(function() { # イベントハンドラ $("#btn").on("click", function(){ $.ajax({ url: "api/resources", dataT

社内向け資料。自分が書いたコードを説明するために資料作る羽目になった。 昔のことはうろ覚えで雰囲気で書いてる部分もあるので、そこらへん勘弁。 古の時代(~2010) 前提としてJavaScriptは名前空間がwindowの一つしかない。 昔Prototype.jsがあった。もうみんな忘れたけどあの時期はプリミティブなオブジェクトのprototypeを生やしまくって、それが衝突しまくってprototype良くない的な雰囲気が生まれたり生まれなかったりした。 その反省があってか(歴史的に若干微妙な気がするが) jQueryは名前空間を一つに集約した。いわゆる jQueryPlugin は、jQueryのプロトタイプにヘルパを生やしまくっていた。グローバルを汚すのは駄目だけどjQueryの名前空間を汚すのはいいよね、ぐらいの考え。 jQuery非依存なライブラリは、「GoodParts」として、

はじめに JavaScriptでオブジェクト指向言語の継承に相当する概念を実装する方法は、大きく分けて4つあります。実務上はライブラリを使ったり、TypeScriptを使ったりと、直接意識する必要があることは少ないわけですが、それだといつまでたっても「JavaScriptにおける継承」を理解できません。ES6で、シンタックスシュガーとしてのclass / extendも導入される可能性も高そうですが、そんな今だからこそ「本来はどう書くのか？」を整理してみることにしました。 1) コンストラクタを使いprototypeチェーンを使って継承する 2) コンストラクタは使うが、prototypeチェーンは使わず、prototypeを直接拡張する 3) コンストラクタは使わず、prototypeチェーンを使って継承する 4) コンストラクタもprototypeも使わず、直接オブジェクトを拡張する

2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.

ども。 8日夜に何となくノリでUPした記事 『IT系技術者を夫に持つ妻が、普通と思っていたけど実は違った32のコト』 が、 予想をはるかに上回る反響があり、びっくりしました。 前記事でも書きましたが、「32のコト」はあくまで暫定的なもので、 編集・修正、加筆等を加えていけたら面白いかなって思っていたものでした。 そして早速コメント等で「これはどうかな？」というネタを書いて下さり、感謝です。 ありがとうございます。 ってな訳で幾つかネタを追記し、再構成しました。 一部、コメント欄等で戴いたネタを採用しております。 ちなみに64という項目数、あえてこの数字にしてます。（ｷﾘｯ） 家にPC（Macもしくはマシン）が２台以上ある 家族用PCがあってもちゃんと家族それぞれにIDとパスワードがあってログインが必要 パソコンという呼び方を殆どしない パソコンでもPCでもなければ、マシンと呼ぶ 「パソコン

今日の内容は、完全に判る人には判るあるあるネタ、 判らなければ「は？何それ？」な世界の話です。 元のネタは、以前夫が教えてくれたブログ記事 「プログラマの嫁が知るべき97のこと」 なのですが、 この97あるネタのうち7〜8割の確率で私のツボにヒットし、 爆笑していたのですが、その様子をみた夫が 「普通そんなにウケないよ。おかしいって。」と半分ひいていたんです。 それじゃあ今度は妻（嫁）の立場から言わせてもらおうじゃないか、 っていうパロディ的ネタを思いついたので、それを書こうと思います。 なお、この記事は随時更新予定なので、現段階では32のコトとなってますが、 増えるかもしれないし、ひょっとしたら減るかもしれません。 家にPC（Mac）が２台以上ある 家族用PCがあってもちゃんと家族それぞれにIDとパスワードがあってログインが必要 パソコンという呼び方を殆どしない 引越しする時にまず準備・

今日はバレンタインデーですね。 夫にチョコを渡すのはこれで3回目になりますが、毎年、感謝の気持ちを込めて手紙を書いています。 言葉で伝えると照れちゃうけど、手紙にすると伝わりやすいよ！ そうそう。数日前に、Twitterで「IT系技術者を夫に持つ妻が、普通と思っていたけど実は違った64のコト」というエントリーがリツイートされていたけれど、一部共感しました(笑) 今日は雪も降っていることだし、インフラ系の夫と結婚して分かった事を挙げてみます。 インフラ系ITエンジニアの夫と結婚して分かった32のこと モバイル用に、ノートPC、スマホ、ケータイ、タブレット、モバイルルーターを持っている 日本全国どこでも繋がる必要があるらしいから、もちろんキャリアは3キャリア携帯 国際ローミング用にLenovoのスマホを買ったらしい ロボットの顔をしたモバイルバッテリーを持っている 妻へのプレゼントもモバイルバ