Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

480 lines (406 sloc) 25.803 kB
<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<link rel="hub" href="https://pubsubhubbub.appspot.com"/>
<title>Public Draft | Outlining and Researching for the Presentation</title>
<link href="http://publicdraft.studiomohawk.com/atom.xml" rel="self"/>
<link href="http://publicdraft.studiomohawk.com"/>
<updated>2012-12-19T23:28:37+09:00</updated>
<id>http://css.studiomohawk.com/</id>
<author>
<name>Yuya Saito</name>
<email>cssradar@gmail.com</email>
</author>
<entry>
<title>Jade as Prototype Language</title>
<link href="http://publicdraft.studiomohawk.com/2012/12/16/jade-as-prototype-language/"/>
<updated></updated>
<id>http://publicdraft.studiomohawk.com/2012/12/16/jade-as-prototype-language</id>
<content type="html">
&lt;h2&gt;メッセージ&lt;/h2&gt;
&lt;p&gt;Node.js用テンプレートエンジンである&lt;a href=&quot;http://jade-lang.com/&quot;&gt;Jade&lt;/a&gt;はHTMLから本当に必要な部分だけを抜き出した言語。そのシンプルながら非常に強力なテンプレートエンジンはモダンウェブ開発に欠かすことが出来ないプロトタイプを作る言語として適している。&lt;br /&gt;
今回はプロトタイプ言語としてのJadeをJadeの基礎を踏まえて紹介していこう。&lt;/p&gt;
&lt;h2&gt;アウトライン&lt;/h2&gt;
&lt;h3&gt;JadeはHamlに影響を受けて生まれた言語&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://haml.info/&quot;&gt;Haml&lt;/a&gt; / HTML abstraction markup languade&lt;/li&gt;
&lt;li&gt;JadeはそのHamlに影響を受けたJavaScript実装のテンプレート言語&lt;/li&gt;
&lt;li&gt;例:&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;div class=&quot;CodeRay&quot;&gt;
&lt;div class=&quot;code&quot;&gt;&lt;pre&gt;!!!
html
head
title my jade template
body
h1 Hello #{name}
&lt;/pre&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;このJadeに&lt;code&gt;{&quot;name&quot;: &quot;Bob&quot;}&lt;/code&gt;をデータとして渡すと&lt;/p&gt;
&lt;div&gt;&lt;div class=&quot;CodeRay&quot;&gt;
&lt;div class=&quot;code&quot;&gt;&lt;pre&gt;&lt;span class=&quot;doctype&quot;&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;tag&quot;&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
&lt;span class=&quot;tag&quot;&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
&lt;span class=&quot;tag&quot;&gt;&amp;lt;title&amp;gt;&lt;/span&gt;my jade template&lt;span class=&quot;tag&quot;&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
&lt;span class=&quot;tag&quot;&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
&lt;span class=&quot;tag&quot;&gt;&amp;lt;body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;tag&quot;&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Hello Bob&lt;span class=&quot;tag&quot;&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;span class=&quot;tag&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class=&quot;tag&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/pre&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;というHTMLに変換される。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;閉じタグ忘れもなく、&lt;code&gt;&amp;lt;&amp;gt;&lt;/code&gt;で囲む必要もない&lt;/li&gt;
&lt;li&gt;&lt;code&gt;#id&lt;/code&gt;を付与するには: &lt;code&gt;div#id&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;.class&lt;/code&gt;を付与するには: &lt;code&gt;div.class&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;複数クラスは: &lt;code&gt;div.class1.class2&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;これにIDも付与できる: &lt;code&gt;div#id.class1.class2&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;div&lt;/code&gt;を書くのは面倒?: &lt;code&gt;#id&lt;/code&gt;または&lt;code&gt;.class&lt;/code&gt;のみで&lt;code&gt;div&lt;/code&gt;を補完&lt;/li&gt;
&lt;li&gt;テキストは: &lt;code&gt;p テキスト&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;複数行に渡るテキストは:&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;div class=&quot;CodeRay&quot;&gt;
&lt;div class=&quot;code&quot;&gt;&lt;pre&gt;p
| foo bar baz
| rawr rawr
| super cool
| go jade go
&lt;/pre&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;コメントもエレガント: &lt;code&gt;// JavaScriptのコメントと同じ&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;入れ子になるタグも:&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;div class=&quot;CodeRay&quot;&gt;
&lt;div class=&quot;code&quot;&gt;&lt;pre&gt;ul
li.first
a(href='#') foo
li
a(href='#') bar
li.last
a(href='#') baz
&lt;/pre&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;属性の指定は: &lt;code&gt;a(href='/login', title='View login page')&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;より詳しい文法については → &lt;a href=&quot;http://naltatis.github.com/jade-syntax-docs/&quot;&gt;Jade Template Syntax Documentation by Example&lt;/a&gt;でインタラクティブに学ぶことができる。&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;インストール&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;npm install jade&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;グローバルとしてインストールするには: &lt;code&gt;sudo npm install -g jade&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/visionmedia/jade/blob/master/jade.js&quot;&gt;jade.js&lt;/a&gt;はクライアントサイドでJadeをHTMLに変換できる。&lt;/li&gt;
&lt;li&gt;Jade内でmarkdownを利用するために以下のどれか1つをインストール。(個人的にはmarkedだとGitHubで採用されている形式が利用できるのでおすすめ)
&lt;ul&gt;
&lt;li&gt;markdown.js / &lt;code&gt;sudo npm install -g markdown&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;node-discount / &lt;code&gt;sudo npm install -g discount&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;marked / &lt;code&gt;sudo npm install -g marked&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;プロトタイプ言語&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;HTMLベースのプロトタイプはデベロッパ向け?&lt;/li&gt;
&lt;li&gt;Jadeはシンプルで強力 === HTMLをより簡単により早く記述できる。&lt;/li&gt;
&lt;li&gt;プロトタイプ言語という提案。&lt;/li&gt;
&lt;li&gt;Jadeをテンプレート言語として使うにはnode.jsが必要。しかし、プロトタイプ専用言語として利用すれば利用シーンが広がる。&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;コンテンツファースト時代のデザイン手法&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Stehen Hay氏は&lt;a href=&quot;https://speakerdeck.com/stephenhay/responsive-design-workflow&quot;&gt;Responsive Design Workflow&lt;/a&gt;にて:
&lt;ul&gt;
&lt;li&gt;Designing in Text → ワークフローの早い段階でコンテンツとなるテキストをmarkdownを使って構造化のデザインをする手法について紹介している。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Filter&lt;/strong&gt; in Jade: markdownをJadeのフィルターとして利用できる&lt;/li&gt;
&lt;li&gt;markdownはデザイナ、ディレクタ、デベロッパの共通言語として利用できるほどシンプルで、このケースには十分な機能を有している。
&lt;ul&gt;
&lt;li&gt;見出し、テキスト、リンク、リストなど&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;使い回しができるパーツ&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Includes&lt;/strong&gt; in Jade: &lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;div class=&quot;CodeRay&quot;&gt;
&lt;div class=&quot;code&quot;&gt;&lt;pre&gt;./layout.jade
./includes/
./head.jade
./foot.jade
&lt;/pre&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;上記の様なファイル構造だとして &lt;/p&gt;
&lt;div&gt;&lt;div class=&quot;CodeRay&quot;&gt;
&lt;div class=&quot;code&quot;&gt;&lt;pre&gt;html
include includes/head
body
h1 My Site
p Welcome to my super amazing site.
include includes/foot
&lt;/pre&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;このようにあらかじめ作成したコンポーネント群を呼び出すことができる。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;JavaScriptやCSSでも同じ傾向にあるようにJadeを使えばHTMLでもモジュール方式の開発ができることになる。&lt;/li&gt;
&lt;li&gt;Jonathan Snooks氏は&lt;a href=&quot;https://smacss.com/&quot;&gt;SMACSS&lt;/a&gt;でSassを使ったモジュール方式の開発用に以下のようなディレクトリ構成を提案している:&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;div class=&quot;CodeRay&quot;&gt;
&lt;div class=&quot;code&quot;&gt;&lt;pre&gt;./layout/
./grid.scss
./alternate.scss
./module/
./callout.scss
./bookmarks.scss
./btn.scss
./btn-compose.scss
./base.scss
./states.scss
./site-settings.scss
./mixins.scss
&lt;/pre&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;Jadeを使えば非常に近しい構成を作ることが可能だ:&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;div class=&quot;CodeRay&quot;&gt;
&lt;div class=&quot;code&quot;&gt;&lt;pre&gt;.index.jade
./includes/
./system/
./head.jade
./foot.jade
./layout/
./grid.jade
./module/
./btn.jade
./nav.jade
&lt;/pre&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;デザイナが編集を行うのは&lt;code&gt;index.jade&lt;/code&gt;だけで、デベロッパと協力して必要なモジュールを用意してもらえばいい。&lt;/li&gt;
&lt;li&gt;よく使うパーツがあれば、それを抽象化しモジュールとしてコーディングを行うのはデベロッパに任せればいい。&lt;/li&gt;
&lt;li&gt;CSSプリプロセッサを利用していれば、この構造に合わせてCSSも用意しておけば関係性を明確にできる。&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;ミックスインとテンプレート継承&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Jadeにもミックスインそして、extendsと似たテンプレート継承がある。 &lt;/li&gt;
&lt;li&gt;デベロッパはプロトタイプの作成を柔軟に、高速に行うためにこれらの機能を上手に使ってテンプレートを抽象化することが可能。&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;テンプレート言語としてのJadeの使い方&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;コマンドラインツールを使ってJadeからHTMLに変換を行う。&lt;/li&gt;
&lt;li&gt;GUI:
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://livereload.com/&quot;&gt;LiveReload&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://incident57.com/codekit/&quot;&gt;CodeKit&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;使うコマンドは1つ: &lt;code&gt;jade --pretty JADE.FILE&lt;/code&gt; (動画デモ)&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;ProtoJadeライブラリ&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;プロトタイプ言語としてのJadeのベースとなるオープンソースプロジェクト (作成予定)&lt;/li&gt;
&lt;li&gt;基本機能(草案):
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://html5boilerplate.com/&quot;&gt;HTML5 Boilerplate&lt;/a&gt;をベースに&lt;/li&gt;
&lt;li&gt;[Twitter Boostrap]にあるUI群をモジュールとして実装&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://learnboost.github.com/stylus/&quot;&gt;Stylus&lt;/a&gt;を利用&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://tjholowaychuk.com/post/27984551477/components&quot;&gt;Components&lt;/a&gt;ライクな構造とモジュール群の管理、拡張&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://jacobrask.github.com/styledocco/&quot;&gt;StyleDocco&lt;/a&gt;を利用してスタイルガイドを作成、プロトタイプライブラリページとする&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;リサーチ&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://jade-lang.com/&quot;&gt;Jade - Template Engine&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/visionmedia/jade#readme&quot;&gt;visionmedia/jade · GitHub&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://naltatis.github.com/jade-syntax-docs/&quot;&gt;Jade Template Syntax Documentation by Example&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://speakerdeck.com/stephenhay/responsive-design-workflow&quot;&gt;Responsive Design Workflow // Speaker Deck&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://smacss.com/&quot;&gt;Scalable and Modular Architecture for CSS&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;h5&gt;Elsewhere&lt;/h5&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://twitter.com/#!/cssradar&quot; rel=&quot;me&quot; title=&quot;cssradar@twitter&quot;&gt;cssradar@twitter&lt;/a&gt; / 1日5件以内のウェブデザイン情報をつぶやきます&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://tinyletter.com/cssradar&quot; rel=&quot;me&quot; title=&quot;Newsletter&quot;&gt;CSS Radar Newsletter&lt;/a&gt; / CSS Radarニュースレター。Twitterまとめ + α&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://plus.google.com/b/109704095110060909968/&quot; rel=&quot;me&quot; title=&quot;Google+ Page&quot;&gt;Google +&lt;/a&gt; / どんな風に使っていくかアイデア募集中&lt;/li&gt;
&lt;/ul&gt;
</content>
</entry>
<entry>
<title>npm / package.json</title>
<link href="http://publicdraft.studiomohawk.com/2012/12/16/npm-and-package.json/"/>
<updated></updated>
<id>http://publicdraft.studiomohawk.com/2012/12/16/npm-and-package.json</id>
<content type="html">
&lt;h2&gt;メッセージ&lt;/h2&gt;
&lt;p&gt;npm(nodeパッケージマネジャ)とそのパッケージのメタデータを保持するpackage.jsonはnode.jsでの開発だけではなく、フロントエンド開発におけるJavaScriptプロジェクトの管理を行うのに必須となりつつあるツール。 &lt;/p&gt;
&lt;p&gt;npmとpackage.jsonを使いこなせるようになると&lt;a href=&quot;http://gruntjs.com/&quot;&gt;grunt.js&lt;/a&gt;&lt;a href=&quot;https://github.com/twitter/bower&quot;&gt;bower&lt;/a&gt;、そして&lt;a href=&quot;http://jamjs.org/&quot;&gt;Jam&lt;/a&gt;などの開発をより加速し、ライブラリ群のマネジメントを楽にするツールもより使いこなせるようになる。&lt;/p&gt;
&lt;p&gt;今回は、そのnpmとpackage.jsonについて紹介していこう。&lt;/p&gt;
&lt;h2&gt;アウトライン&lt;/h2&gt;
&lt;h3&gt;npm&lt;/h3&gt;
&lt;h4&gt;インストール&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://nodejs.org/download/&quot;&gt;node.js&lt;/a&gt;提供のインストーラに付属 &lt;/li&gt;
&lt;li&gt;&lt;code&gt;curl https://npmjs.org/install.sh | sh&lt;/code&gt; (&lt;a href=&quot;https://npmjs.org/doc/faq.html#How-do-I-update-npm&quot;&gt;参考&lt;/a&gt;)&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;npmコマンド&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;&lt;code&gt;npm install&lt;/code&gt;&lt;/strong&gt;: パッケージをインストール&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;使い方は大きく分けて2つ: &lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;プロジェクトに対してローカルなインストールを行う(こちらがデフォルト) /&lt;code&gt;npm install &amp;lt;PACKAGE&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;コマンドラインツールなど用のインストールを行うグローバルがある /&lt;code&gt;npm install -g &amp;lt;PACKAGE&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;ローカルインストールでは&lt;code&gt;./node_modules&lt;/code&gt;にモジュールをインストールし、実行ファイルは&lt;code&gt;./node_modules/.bin/&lt;/code&gt;にインストールされる。(おそらくPATHの設定だと思われるが私の環境ではpackage.jsonファイルがない場合にうまくローカル指定でインストール出来なかった)&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;グローバルインストールでは&lt;code&gt;{prefix}/lib/node_modules&lt;/code&gt;にモジュールをインストールし、&lt;code&gt;{prefix}/bin&lt;/code&gt;に実行ファイルをインストール。ついでに&lt;code&gt;man&lt;/code&gt;ファイルがある場合は&lt;code&gt;{prefix}/share/man&lt;/code&gt;にインストールを行う。&lt;br /&gt;
&lt;code&gt;{prefix}&lt;/code&gt;は少なくともMac OS Xでは&lt;code&gt;/usr/local&lt;/code&gt;というパスになる。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;またどちらの場合でもバージョンの指定(後述)がない場合は常に公開されている最新のパッケージがインストールされる。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;&lt;code&gt;npm search &amp;lt;SEARCH KEYWORD&amp;gt;&lt;/code&gt;&lt;/strong&gt;: npmのパッケージを検索&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;&lt;code&gt;npm ls&lt;/code&gt;&lt;/strong&gt;: インストール済みのパッケージの一覧を表示。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;npm -g ls&lt;/code&gt;とするとシステム全体のパッケージを一覧できる。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;&lt;code&gt;npm update&lt;/code&gt;&lt;/strong&gt;: インストール済みのパッケージをアップデート。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;インストール済みのパッケージの最新バージョンを検索&lt;/li&gt;
&lt;li&gt;もしあればインストールする&lt;/li&gt;
&lt;li&gt;依存設定が問題なければ依存されているパッケージを最新バージョンに差し替える&lt;/li&gt;
&lt;li&gt;古いバージョンが依存設定されていない場合に古いバージョンのパッケージを削除する&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;&lt;code&gt;npm outdated&lt;/code&gt;&lt;/strong&gt;: package.jsonファイルで指定している依存パッケージがアップデートされているかを確認する。&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;npmの自動補完&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;. &amp;lt;(npm completion)&lt;/code&gt;&lt;code&gt;~/.bashrc&lt;/code&gt;なり &lt;code&gt;~/.zshrc&lt;/code&gt;なりに記述すれば&lt;code&gt;tab&lt;/code&gt;でコマンドを自動補完できる。&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;package.json&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;package.jsonファイルはプロジェクトにおける様々なメタデータを保持するファイル。 &lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;div class=&quot;CodeRay&quot;&gt;
&lt;div class=&quot;code&quot;&gt;&lt;pre&gt;{
&amp;quot;name&amp;quot;: &amp;quot;best-practices&amp;quot;,
&amp;quot;description&amp;quot;: &amp;quot;A package using versioning best-practices&amp;quot;,
&amp;quot;version&amp;quot;: &amp;quot;0.0.1&amp;quot;,
&amp;quot;dependencies&amp;quot;: {
&amp;quot;colors&amp;quot;: &amp;quot;0.x.x&amp;quot;,
&amp;quot;express&amp;quot;: &amp;quot;2.3.x&amp;quot;,
&amp;quot;optimist&amp;quot;: &amp;quot;0.2.x&amp;quot;
},
&amp;quot;devDependencies&amp;quot;: {
&amp;quot;mocha&amp;quot;: &amp;quot;1.7.x&amp;quot;
},
&amp;quot;engine&amp;quot;: &amp;quot;node &amp;gt;= 0.4.1&amp;quot;
}
&lt;/pre&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;npmパッケージとして公開する場合には&lt;a href=&quot;https://npmjs.org/doc/json.html&quot;&gt;こちらを参照&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;name&lt;/code&gt;&lt;code&gt;version&lt;/code&gt;は必須&lt;/li&gt;
&lt;li&gt;開発用ツールとしてnpmを利用する場合は&lt;code&gt;dependencies&lt;/code&gt;よりも&lt;code&gt;devDependencies&lt;/code&gt;に利用するパッケージを記載するほうがいい。&lt;br /&gt;
ユニットテスト用のツールやgrunt、gruntのプラグインなどは&lt;code&gt;devDependencies&lt;/code&gt;に記載する。&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;バージョンの指定:&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;上記の例では:&lt;code&gt;&quot;mocha&quot;: &quot;1.7.x&quot;&lt;/code&gt;&lt;code&gt;&quot;1.7.x&quot;&lt;/code&gt;でパッケージのバージョンを指定。&lt;br /&gt;
ここでは&lt;a href=&quot;http://visionmedia.github.com/mocha/&quot;&gt;mocha&lt;/a&gt;のバージョン1.7.系のバージョンを指定している。1.7の範囲内で最新を取得してくるという意味。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;package.jsonで指定できるパッケージは&lt;code&gt;npm install&lt;/code&gt;コマンドでインストールできるパッケージと同等。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;レンジの指定&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;例えば&lt;code&gt;v1.5&lt;/code&gt;から&lt;code&gt;v1.9&lt;/code&gt;までで最新を取得する。という様な指定を行うのがレンジ。&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;npmでは&lt;a href=&quot;https://github.com/isaacs/node-semver&quot;&gt;node-semver&lt;/a&gt;を使ってバージョンの管理を行っているそう。 &lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;gt;1.2.3&lt;/code&gt; / &lt;code&gt;1.2.3&lt;/code&gt;よりも新しいバージョンを取得&lt;/li&gt;
&lt;li&gt;&lt;code&gt;&amp;lt;1.2.3&lt;/code&gt; / &lt;code&gt;1.2.3&lt;/code&gt;よりも古いバージョンを取得&lt;/li&gt;
&lt;li&gt;&lt;code&gt;~1.2.3&lt;/code&gt; / 最低でも&lt;code&gt;1.2.3&lt;/code&gt;バージョン、最新でも&lt;code&gt;1.3.0&lt;/code&gt;未満を取得&lt;/li&gt;
&lt;li&gt;&lt;code&gt;1.2.x&lt;/code&gt; / &lt;code&gt;1.2.0&lt;/code&gt;から&lt;code&gt;1.3.0&lt;/code&gt;未満の最新バージョンを取得&lt;/li&gt;
&lt;li&gt;&lt;code&gt;*&lt;/code&gt; / 常に最新バージョンを取得&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;インストール元の指定&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;デフォルトではnpm registryに公開されたパッケージを取得するが、それ以外のインストール元を指定することも可能。&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;code&gt;git://github.com/user/repo.git#ref&lt;/code&gt; &lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;GitHubで &lt;strong&gt;公開&lt;/strong&gt; されているレポジトリをインストールできる。&lt;/li&gt;
&lt;li&gt;&lt;code&gt;#ref&lt;/code&gt;はオプションでブランチ名やタグ名、コミットIDを指定できる。&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;&lt;div class=&quot;CodeRay&quot;&gt;
&lt;div class=&quot;code&quot;&gt;&lt;pre&gt;dependencies&amp;quot;: {
&amp;quot;public&amp;quot;: &amp;quot;git://github.com/user/repo.git#ref&amp;quot;,
&amp;quot;private&amp;quot;: &amp;quot;git+ssh://git@github.com:user/repo.git#ref&amp;quot;
}
&lt;/pre&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;pre&gt;&lt;code&gt;- package.jsonファイルでは上記の様に記述。(ちなみに`&quot;private&quot;`の値はGitHubでプライベートとなっているレポジトリの指定の例)
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;リサーチ&lt;/h2&gt;
&lt;h3&gt;npm&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://npmjs.org/doc/&quot;&gt;npm documentation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://blog.nodejs.org/2011/03/23/npm-1-0-global-vs-local-installation/&quot;&gt;npm 1.0: Global vs Local installation&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://npmjs.org/&quot;&gt;npm&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://howtonode.org/introduction-to-npm&quot;&gt;Introduction to npm - How To Node - NodeJS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://semver.org/&quot;&gt;Semantic Versioning 2.0.0-rc.1&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;package.json&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://package.json.jit.su/&quot;&gt;Package.json: an interactive guide&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://docs.nodejitsu.com/articles/getting-started/npm/what-is-the-file-package-json&quot;&gt;What is the file package.json?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://blog.nodejitsu.com/package-dependencies-done-right&quot;&gt;Package.json dependencies done right&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;h5&gt;Elsewhere&lt;/h5&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;http://twitter.com/#!/cssradar&quot; rel=&quot;me&quot; title=&quot;cssradar@twitter&quot;&gt;cssradar@twitter&lt;/a&gt; / 1日5件以内のウェブデザイン情報をつぶやきます&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://tinyletter.com/cssradar&quot; rel=&quot;me&quot; title=&quot;Newsletter&quot;&gt;CSS Radar Newsletter&lt;/a&gt; / CSS Radarニュースレター。Twitterまとめ + α&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://plus.google.com/b/109704095110060909968/&quot; rel=&quot;me&quot; title=&quot;Google+ Page&quot;&gt;Google +&lt;/a&gt; / どんな風に使っていくかアイデア募集中&lt;/li&gt;
&lt;/ul&gt;
</content>
</entry>
</feed>
Jump to Line
Something went wrong with that request. Please try again.