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

JavaScript 系パッケージマネージャの重複問題 npm は言わずもがな Node.js のパッケージマネージャだが、フロントエンド開発においては Bower も利用するのが一般的になっている。この現状の問題点は、package.jon と bower.json という似たような管理ファイルを二重で管理しなければならないということだ。 現状の使い分けをおさらいをしておくと、次のような感じになる。 タスクランナー（Grunt/gulp）・モジュールシステム（browserify/webpack）・テストスイート（karma/testem）などの開発環境系の管理が npm の主なお仕事。インストールされたパッケージは node_modules 内に展開されて、CommonJS スタイルのモジュール管理から利用する。 本題につながる話としては、ブラウザで動くライブラリの一部は npm にも

textlintはMarkdownなどテキスト向けのLintツールで、テキスト版ESLintみたいな感じのツールです。 JavaScriptでルールを書けるテキスト/Markdownの校正ツール textlint を作った | Web Scratch 最近azu/JavaScript-Plugin-Architectureという小さな書籍を書いていて、色々簡単に使えるような仕組みを追加しています。 この記事では簡単なtextlintの導入方法について紹介します。 公式サイトには一部ルールを含むオンラインデモが公開されています。 textlint · The pluggable linting tool for text and markdown ドットインストールにてNode.jsのインストール、textlintの利用方法、エディタとの連携などのチュートリアルが公開されています。Node.

Talk about ECMAScript 6 at YAPC::Asia Tokyo 2015 http://yapcasia.org/2015/talk/show/44721562-10e4-11e5-88a0-d7f07d574c3a https://www.youtube.com/watch?v=oSPv5IPDSxERead less

公開日: 2015/09/01 | 更新日: 2017/07/05 Googleが提供する、Google Maps JavaScript APIを利用して、ウェブページに地図を表示させる方法を説明します。通常の埋め込み型の地図とは違い、コントローラの調整、マーカーや吹き出しを配置したりなど、機能が満載です。 Google Maps JavaScript API V3 ReferenceGoogle Maps JavaScript API V3 ReferenceGoogle Maps JavaScript APIの公式リファレンスです。全てのメソッド、オプションなどについての解説が掲載されています。準備 (APIキーの取得)Google Maps JavaScript APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用

ゲームを作る時にモノリシックなゲームエンジンを使う方法の他に、ブラウザゲームのプロトタイピングに役立つJavaScriptライブラリで述べたようなライブラリ群を機能ごとに組み合わせて作る、っていうアプローチも考えられる。そうした方が、グラフィックスはこれ、物理エンジンはこれ、という具合に自分が好きなAPIを使ってゲームを作れるし、一度に覚えなければならないことも少なくてすむ。 そういったライブラリを探すには、例えばhughsk/game-modulesというページがあって、ここにはゲーム向けの小さなライブラリがいっぱい挙げられている。これらから好きなモノをチョイスをして組み合わせれば、自分好みにカスタマイズしたゲームエンジンの出来上がりだ。 といけば簡単なのだが、実際はそんなに簡単ではない。ゲーム関連のライブラリは、requestAnimationFrame周りのフレームごとのアップデート

プログラミング (iOS, JavaScript, Jenkins, Sikuli) とMacやiPhoneなどの話題が中心のブログ Bowerとgulpを組み合わせて使うことでフロントエンド向けライブラリを管理できるようにしてみる、ということで、Bowerの簡単な使いかたとgulpでの利用方法について簡単に説明します。 なお、gulp自体の利用方法については、以前の記事「ビルドシステムgulpをCoffeeScriptで使ってみる」を参照ください。 Bowerの導入とパッケージインストール Bowerはnpmでインストールします。 npm install -g bower コマンドbowerの基本的な使いかたは、npmと同じです。まず、bower initで初期化しておきます。 > bower init [?] name: sample [?] version: 0.0.0 [?] de

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

(追記) この記事は公開から時間が経っており、内容が古くなっています。2016年時点ではWebpackが圧倒的におすすめです。 JavaScriptやCSSのビルドを自動化することで、手作業による無駄な時間やミスを削減できます。また、誰でもビルドできるようになるため、リリースのボトルネックを解消できます。 改善したいこと JavaScriptフレームワークやCSSフレームワークの依存関係を自動的に管理したい。ダウンロードして配置を手作業でやりたくない。 CoffeeScriptやLESSのコンパイルを自動的に実行したい。手順書を見ながらコマンドを叩くとかやりたくない。 ダウンロードしたライブラリをリポジトリに入れたくない。 出荷対象のリソースを明確にしたい。ゴミファイルをリリースしたくない。 どうやって実現する？ bowerでライブラリの依存関係を管理する。 gulpでビルドを自動化する。

年末年始から CoffeeScript を積極的に使っているわけですが、ピュアな JavaScript よりもクラスの取り扱いがしやすくなっていることに一番の恩恵を感じています。すべての機能を使いこなせているわけではありませんが、何件かの業務を通じてフィールド（インスタンス変数）やプライベート関数など自分流のクラスの書き方が出来てきたので、ここに書き記しておくとします。 よくある CoffeeScript のクラス構造 CoffeeScript に関する書籍やブログエントリを見ると、だいたいこのようにクラスを紹介していることが多いです。 class ClassName @staticVar: 0 # 静的なプロパティ @staticFunc: -> # 静的な関数 # do something... constructor: (name)-> # コンストラクタ @name = name

Begin learning here by typing in your first name surrounded by quotation marks, and ending with a semicolon. For example, you could type the name "Jamie";  and then hit enter.

Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr

Find issues ESLint statically analyzes your code to quickly find problems. ESLint is built into most text editors and you can run ESLint as part of your continuous integration pipeline. Learn more about finding issues with ESLint Fix problems automatically Many problems ESLint finds can be automatically fixed. ESLint fixes are syntax-aware so you won't experience errors introduced by traditional f