Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。3:React.addons.TestUtils+Mochaでユニットテストを作成するMochaのインストールと準備テストを書くテストを通すまとめnpmによるプロジェクトの管理フロントエンド開発を行う上で、「Node.js」と付属のパッケージマネージャ「npm」はいまや必須アイテムといっても過言ではないでしょう。npmは膨大な量のライブラリを中央リポジトリに管理しており、これらを一挙に手中に収めることができるのもReact.jsの魅力のひとつでしょう。以下の説明で必要になるので、サンプルを試す方はインストールしておいてください。ディレクトリ構成は次のようにします。srcディレクトリ以下に配置した.jsファイル(中身はJSX)をBrowserifyで結合したものを、buildディレクトリ以下に作成します。└─index.html各ファイル、ディレクトリの役割は次表のとおりです。npmにより管理されるパッケージのインストール先。ソースを元に自動生成されるファイルの出力先。TODOアプリのメインページnpmによるプロジェクト管理では、package.jsonに必要なライブラリやツールを記述していきます。このプロジェクトのpackage.jsonは以下のとおりです[2]。ディレクトリ、package.jsonともにテスト環境を除いています。完全版はリンクからダウンロードしてください。最低限押さえておくべきnpmの使い方サンプルをダウンロードした時点では、アプリケーションの実行に必要なライブラリ本体が付属されていません。プロジェクトのルートディレクトリ(package.jsonと同じフォルダ)で次のコマンドを実行すると、package.jsonのdependenciesと、開発時に必要なdevDependenciesに記載されたライブラリをnode_modules以下にインストールすることができます[3]。install新たに依存ライブラリを追加する場合には、次のようにライブラリ名を指定すると、自動的に最新バージョンがインストールされます。--saveをつけることで、package.jsonのdependenciesに追記することができます[4]。--saveプロジェクトでよく使うコマンドは"scripts"に登録しておくと、次のように簡単に実行できて便利です[5]。./node_modules/gulp/bin/gulp.jsの代わりに、単にgulpと記述することができます。--productionオプションではdevDependenciesを無視します。--saveの代わりに--save-devにすると、devDependenciesに保存されます。startやstopなど、特定のコマンドはrunを省略できます。ヨウスケ)株式会社ワークスアプリケーションズ所属。イケてるアプリケーションを死ぬほど楽に作るために研究を続ける日々。社内での立ち位置は「フロントエンドのナウい人」。最近エバンジェリストという肩書きが付いた。趣味は作曲とスノーボード。プラットフォームチームの意義と実践のポイント1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。プラットフォームチームの意義と実践のポイント1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。プラットフォームチームの意義と実践のポイント1DMM.comの施策から見る、事業をむしばむ「技術負債」への処方箋──リファクタリングの「言語化」でインシデントを予防2企業の7割超が「2025年の崖」を理解していないことが明らかに。NEW新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。