GRUNT とJSHintのコードチェックをビルドプロセスに組み込む - Gaishimo
はじめに JavaScript にはJSHintというコードチェッカーが存在する。このチェッカーの実行を、タスク実行ツールGRUNTを使ってビルドプロセスの中に組み込む方法を試してみた。 以下の英語のブログ記事を参考にした。 Let tools define JavaScript style GRUNT とは？ GRUNT は、JSファイルのminifyやコンパイル、テスト、コードチェック等の様々なタスクを実行してくれるタスク実行ツール。用途に応じたプラグインを利用することができる。 プラグインの一覧はこちら。 GRUNTとcontrib-jshintプラグインのインストール まずgruntのCLIツールをインストール npm install -g grunt-cli 次にプロジェクトのpackage.jsonにgruntとgrunt-contrib-jshintを記述してnpm inst
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
backbone-rails から Bower+Backbone.js に移行 - present
はじめに Rails で Backbone.js を使ってアプリを開発するときは、決まって backbone-rails を使っていた。 codebrew/backbone-rails …んだけど、Backbone.js の v1.0.0 が出たというのに、backbone-rails は未だ対応してない(2013/07/02 現在)。 JavaScript ライブラリを gem でインストールすることに違和感あったし、 この際なんで backbone-rails にサヨナラすることに決めた。 これから JavaScript ライブラリは Bower で管理していく。 以下は移行メモ。 Bower をインストール あらかじめ Node を homebrew や nodebrew や nvm を使ってインストールしておき、 npm install -g bower を実行して Bower を
npmでnode.jsのpackageを管理する
このTopicはWeb ApplicationのfrontendのProjectを管理するTopicの2つ目です。 node.jsのversionを管理するためにnodebrewを利用する npmでnode.jsのpackageを管理する grunt.jsを使って、frontendのビルドを行う 前提条件として、僕の環境はMac OSです。 npmとは？ npmはnode.jsのpackageを管理するためのツールです。 node.js自体はJavaScriptで出来たWeb Serverですが、frontendを管理するためのtoolもたくさんあります。 npmはnode.jsのpackageを管理すためのツールです。 Javaが分かる方は、mavenのようなものだと想像していただければ、分かりやすいかと思います。 npmでpackageをインストールする npmでpackageをインス
日本語IMEで未確定文字が無く且つ変更されたらハンドラを実行するjQueryプラグインを作ってみた - Qiita
2015-08-22 追記 1年半前に書いた記事ですが、この記事の方法は良くないそうなので、参考にしないでください。 twitterでご指摘いただいたのですが、モダンブラウザではkeyup, keydownなどではなくUI Events Specification (formerly DOM Level 3 Events)とInput Eventsの input イベントを見て処理すべき、IE8は対応するならIE8だけ別にわけて扱うべきでした。 2015-08-23 追記 IE8とIE9では input イベントは期待通りに機能しないそうです。 A near-perfect oninput shim for IE 8 and 9 – Ben Alpert で模擬実装を作っている方がいました。 Microsoft Support LifecycleによるとIE8とIE9は約半年後(2016-
Backbone.js Todosを読み解く - console.lealog();
というわけで色々Backbone.jsについて見てはいるものの、いざ自分で作ってみると上手くいかない・・。 ようはどの単位でViewとModelを紐付ければ良いかわからないんですよねー。 というわけで、Todoリストのサンプルからそのヒントを得ようという試み。 参考：Backbone.js Todos Backbone.js Todosについて 見ての通りBackbone.jsで作られたサンプルアプリ。 Todoリストのデータの保管にはLocalStorageを使ってて、別のライブラリを読み込んでます。 ソース全部 せっかくなので、ソースについてるコメントを和訳しときます。 // An example Backbone application contributed by // [Jérôme Gravel-Niquet](http://jgn.me/). This demo uses a
3つの簡単便利Javascriptテンプレートエンジン。Mustache.js, Handlebars.js, Microtemplating | codechord
Posted 7月 13th, 2013 by codechord. 0 Comments Tweet Tweet 多忙きわまりない2013年初夏でございます。 最近あんまりコードらしいもの書けてなくって、vagrantとかshefとかpjaxとかnodeとか理解するために時間つくりたい、コード書きたい！ってなってます。今回ちょっとajaxまわりのものの実装でjavascriptのテンプレートエンジンに調べる必要あったので、javascriptのテンプレートエンジンに触れてみようかなと。 phpのテンプレートだとsmartyだとか、rubyだとERBとかなんかそういうのですけど、javascriptのテンプレートエンジンについて知らなかったんで。 目次 – Table of Contents Javascriptのテンプレートエンジンの候補 1. John ResigさんのJavaScri
クライアントサイドで動くJavaScript Template Engine７つ｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
項目説明： delimiter – テンプレートを書く際の区切り文字 ({{}} や <%%>) が変更できる。 logic-less – テンプレート上で演算や複雑な制御構文が書けない仕様により、ロジックとテンプレートが完全に分離される。 precompile – テンプレートを事前に実行可能な JavaScript のコードにコンパイルできる。 escape – テンプレートエンジンで自動的に HTML エスケープができる。 method – テンプレート上からデータとして与えられたメソッドを呼び出し、結果を挿入することができる。 standalone – テンプレートエンジンが別途ライブラリを必要とせず単独で動く。 partials – 部分的に別のテンプレートファイルを組み込むことができる。 (include のようなもの) 上の表で表現しきれないそれぞれのテンプレートエンジンの特
Javascript：locationオブジェクトでURL情報を取得する | raining
JavascriptでアクセスしているURL情報を取得する場合、 locationオブジェクトを使用すれば簡単に取得することができます。 URL、ホスト名、アンカーなど色々な情報を取得することができます。 また指定したURLに移動することもできます。 下記にlocationオブジェクトの機能や使用例をメモします。 ■ locationオブジェクトの機能説明 ※下記URLでアクセスした場合 「http://www.hoge.com/location/index.html?aaa=100#test」 「location.href」 現在アクセスしているURLを取得します。 また、指定したURLに遷移します。 ・URLを取得 var url = location.href; alert(url); 【実行結果】 http://www.hoge.com/location/index.html?aa
WebRTCを仕組みから実装までやってみる - blog::wnotes.net
このエントリはFrontrend Advent Calendar 2013 23日目の記事です。 2014/03/16追記 WebRTC-DataChannelについてもエントリ書きました。↓からどうぞ。 WebRTC-DataChannel使ってみたよ WebRTCを仕組みの理解から実装まで Advent Calendarを書くということでなんか新しいことやったほうがいいかなーって思ってたので、今回はWebRTCを調べてみました。 調べながらだったので間違っている箇所もあるかもですが、専門家の方のツッコミあれば歓迎です。 先に作ったサンプルデモを触りたい方は以下のアドレスからどうぞ。 WebRTC Video Chat Sample ※接続名は同時にアクセスしている方全員から見えますのでご注意ください！接続依頼が来た際にはダイアログが出るようにしてますが、安易に応答すると知らない人とつな
普通のrailsアプリのBackboneにMarionette付けて思った事 - lxyuma BLOG
以前書いた記事の反省を元にMarionetteに移行した。 思った以上に快適！ 大規模になったらMarionette.js使えとか書いているのは嘘で、普通にBackbone使うときは、初めから使うべき。 Backboneで一番恐ろしいのは、各現場/各開発者毎に異なるオレオレ実装。オレオレ実装作るコストに加え、使う人の思わぬバグや学習コストやスイッチングコスト等諸々考えると、特別な理由がない限りMarionetteみたいな既存のframework使うべき。 あんど。データバインディングを提供してくれる、stickitと一緒に使うと、より一層効果的。 めっちゃ、ソースコードの量が減って、ソースの意図が明快になった。悩みも少ない。工数も勿論減る。 ここから、幾つか思った事を、サッカー見ながらお酒飲みながら、ダラダラ書く。※ちなみに、日本vsオランダ戦見てる。 railsアプリでのjs周辺の作りの
Backbone.js + Marionette.js / AngularJS編in「Rails勉強会@東京第88回」
普段仕事をしていると、自分のやっている案件や会社内でのプロジェクトのことはわかりますが、「Railsの他社での設計方法」みたいなことを知る機会って中々ないですよね。そんな時にオススメしたいのがRails勉強会@東京です。月1回(?)の開催で前回が88回目だったので、Rails 1.xxのころから、7年近く継続している勉強会だそうです。 この勉強会のスタイルは、参加者の興味があるテーマを集めて人気のあるテーマにしたがってフリーディスカッションやハンズオンを行うというものです。参加者が主体的に発言できたり、実際の現場でどんなカタチで開発しているかがラフに聞けてしまいます＾＾ 今回は10/19(土)の勉強会の中で、僕が参加したJavaScript Frameworkの議論を参考にさせていただきつつ、周辺の資料をまとめてみました！ (2013/11/13) アシアルさんのブログのAngularJS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kimjoar/karma-requirejs: Example setup with Karma and Require.js
GitHub - marionettejs/backbone.marionette: The Backbone Framework
A Node in Nodes
How to use underscore/javascript templates in ASP.Net MVC views
実践Backbone.Marionette 現場の悩みと解決まで
http://www.qcontokyo.com/data_2013/ToruYoshikawa_QConTokyo2013.pdf
作業効率が10倍アップする Chrome Developer Tools の使い方