logo
最近の検索
2014.02.28

yeomanを用いてWeb開発を楽にする

弊社ではフロントエンドWeb開発にGruntやBowerを活用しています。
GruntやBowerを使い、TypeScriptやSASSのコンパイル、ローカルサーバでの動作確認が出来るように設定しています。

ただ、Gruntの設定ファイルを目的に応じて一から作るにはだいぶ時間がかかってしまいます。ここの解決策には、基本になるテンプレートプロジェクトを持っておきそのプロジェクトをコピーして次のプロジェクトとして使う方法があります。弊社でもわかめさんが個人で作っています。

この路線を更に拡張して、目的に応じて使用する技術(LESSやCoffeeScriptなど)を変えたプロジェクトを生成できる仕組みがあります。これが今回紹介するyeomanです。

開発環境

この記事では以下の環境を想定しています。

  • OSX
  • $ node -v //=> v0.10.26
  • $ npm -v //=> 1.4.3

yeomanを使ってプロジェクトを作ってみる

例えばAngularJSを使ったプロジェクトを始めたいとします。この時の手順は以下の通りです。

  1. yeoman本体をインストールします。
    $ npm install -g yo
  2. generatorと呼ばれるテンプレートをインストールします。今回はAngularJSが目的なのでgenerator-angularを使います。
    $ npm install -g generator-angular
  3. プロジェクトを始めるディレクトリ上でyeomanを実行します。
    $ mkdir myproject && cd $_ && yo angular
  4. 使う技術に合わせて(y | n)で選択していきます。ひと通り選択すると$npm installbower installが自動で実行されてファイルが生成されていきます。

上記の手順を実行後、ディレクトリ内を見てみるとGruntfile.jsができていることがわかります。この状態で$gruntと実行するとSASSのコンパイルやconcatやminify、unit testが走ります。また、$grunt serveと実行するとローカルサーバが立ち上がり、自動でブラウザ上に表示されます。ここまでのGruntfile.jsを個人で組み立てるのはだいぶ時間がかかるものです。

sub-generator

更に進んだyeomanの使い方としてsub-generatorがあります。Railsで言うと新しいコントローラやモデルをコマンドラインから生成する機能です。たとえば上で使ったプロジェクトにおいて、

  1. $yo angular:route blog
  2. $grunt serve

の順でコマンドを実行してから http://127.0.0.1:9000/#/blog を開くと新しく追加したblogViewが見えることでしょう。generator-angularには他にも、

  • angular:controller
  • angular:directive
  • angular:filter
  • angular:service
  • angular:provider
  • angular:factory
  • angular:value
  • angular:constant
  • angular:decorator
  • angular:view

といったsub-generatorが用意されています。この一覧は変わる可能性があるのでここで最新のsub-generatorの一覧を確認してください。

angular以外にもたくさんのgeneratorがある

現時点(2014/2/28)で491のgeneratorがあります。ざっとみた感じ、firefoxosやphonegap用のgeneratorもあるのでこういったプロジェクトも始めやすいのかなあと思います。

おわり

みなさんもyeomanを使ってWeb開発をもっと楽にしていきましょう。

ライター

TOPGATE 編集部

Related Article !

View all

クラウドの主流である SaaS とは何か?仕組みやメリットまでわかりやすく解説!

データセンターとは何か?クラウドとの違いや使い分け方法を解説!

データセンターとは何か?クラウドとの違いや使い分け方法を解説!

ビッグデータとは何か?クラウドによるデータ活用事例を紹介!

ビッグデータとは何か?7業種のクラウドによるデータ活用事例をご紹介!

アジャイル開発とウォーターフォール開発との違いとは?自社に合った開発手法の選び方まで徹底解説!

アジャイル開発とウォーターフォール開発との違いとは?自社に合った開発手法の選び方まで徹底解説!

SIer(エスアイヤー)とは何か?業務内容、種類、年収まで徹底解説!

SIer(エスアイヤー)とは何か?業務内容、種類、年収まで徹底解説!

エンジニアってどんな職種?仕事内容、種類、年収を徹底解説!

エンジニアってどんな職種?仕事内容、種類、年収を徹底解説!

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.6 (最終回)

Pulumi を Google Cloud で使ってみた

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.5

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.4

VPN接続の最小構成を例に: アーキテクチャ設計図の効果的な作り方

2023年7月新登場!Google Cloud SQLの最上位エディション「Enterprise Plus」を触ってみた

クラウドファーストとは?クラウド導入のメリットやコストを解説

効率的なデータ活用を実現!データマートの作り方を7ステップでご紹介!

クラウドとオンプレミスの減価償却と会計処理・税務処理について

クラウドとオンプレミスの減価償却と会計処理・税務処理について

コンテナ化とは?仮想化との違いやメリット、デメリット、ユースケースまで詳しく紹介!

クラウドコンピューティングとは何か?仕組みやメリットまで徹底解説!

クラウドコンピューティングとは何か?仕組みやメリットまで徹底解説!

テレワークをするなら知らなきゃ!【Googleのゼロトラスト】BeyondCorp」の特徴、メリットをご紹介!

テレワークをするなら知らなきゃ!【Googleのゼロトラスト】BeyondCorpの特徴、メリットをご紹介!

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.3

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.2

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.1

データベース運用を効率化する SQL とは何か?メリットやデメリット、活用事例まで一挙に紹介!

データベース運用を効率化する SQL とは何か?メリットやデメリット、活用事例まで一挙に紹介!

失敗しないシステム/ソフトウェア開発会社の選び方!判断指標から判断基準まで一挙公開

失敗しないシステム/ソフトウェア開発会社の選び方!判断指標から判断基準まで一挙公開

藤原秀平

目前に迫る! Google Cloud Next ’17 の見どころを TOPGATE エンジニアに訊いてみた

石村真吾

第二弾! Google Cloud Next ’17 の見どころを TOPGATE エンジニアに訊いてみた

新卒エンジニアが日々の学習内容を発信する「ルーキーズブログ」

新卒エンジニアが日々の学習内容を発信する「ルーキーズブログ」を始めます!

REST とは

【GCP入門編・第14回】 Cloud Functions を使ってサーバレスアーキテクチャを体験しよう!

機械学習の勉強歴が半年の初心者が、 Kaggle で銅メダルを取得した話

機械学習の勉強歴が半年の初心者が、 Kaggle で銅メダルを取得した話

Python と Twitter API でリツイートしたユーザーの情報を取得する

Python と Twitter API でリツイートしたユーザーの情報を取得する

目前に迫る!Google I/O 2018 の見どころを TOPGATE エンジニアに訊いてみた (前編)

目前に迫る!Google I/O 2018 の見どころを TOPGATE エンジニアに訊いてみた (前編)

マイコンで CO2 を計測し、サーバーに計測値を投げるシステムを作る

マイコンで CO2 を計測し、サーバーに計測値を投げるシステムを作る

失敗する確率を大幅に減らすために開発依頼の仕方とフェーズごとのチェックポイント

失敗する確率を大幅に減らすために開発依頼の仕方とフェーズごとのチェックポイント

ITシステム開発における自社開発と委託開発の違いと開発の流れについて一挙公開!

ITシステム開発における自社開発と委託開発の違いと開発の流れについて一挙公開!

優れた開発チームが成功の鍵!ITシステム開発のチーム編成方法と新規メンバーの調達方法とは?

優れた開発チームが成功の鍵!ITシステム開発のチーム編成方法と新規メンバーの調達方法とは?

企業のクラウド化が加速中!クラウド導入のメリットとは?

企業のクラウド化が加速中!クラウド導入のメリットとは?

ランニングコスト削減も可能?開発者が知っておきたいインフラ設計のポイント10選

ランニングコスト削減も可能?開発者が知っておきたいインフラ設計のポイント10選

【徹底解説】ウィズコロナにおけるニューノーマルとクラウド

【徹底解説】ウィズコロナにおけるニューノーマルとクラウド

次世代BIツール「Looker」の概要と導入時の注意点をご紹介!

次世代BIツール「Looker」の概要と導入時の注意点をご紹介!

政府が提唱するクラウド・バイ・デフォルト原則とは?企業における導入メリット6選

政府が提唱するクラウド・バイ・デフォルト原則とは?企業における導入メリット6選

クラウドエンジニアとは何か?仕事内容・必要スキル・資格・将来性を徹底解説!

クラウドエンジニアとは何か?仕事内容・必要スキル・資格・将来性を徹底解説!

クラウドで自社にあったカスタマイズは可能か?オンプレ利用者の悩みを解決!

デジタルトランスフォーメーション(DX)とは?概要と5つの事例をご紹介!

デジタルトランスフォーメーション(DX)とは?概要と5つの事例をご紹介!

クラウドベンダーから自社に最適な提案を引き出す!RFP(提案依頼書)の作成方法とは?

クラウドベンダーから自社に最適な提案を引き出す!RFP(提案依頼書)の作成方法とは?

クラウドネイティブ・アプリケーションとは?メリット、活用例、開発方法まで徹底解説!

クラウドネイティブ・アプリケーションとは?メリット、活用例、開発方法まで徹底解説!

【IoTとは?】ビッグデータ、クラウドとの違いや関係性まで一挙紹介

データ分析の歴史から紐解く!データウェアハウスとデータマートの違いを徹底解説

データ分析の歴史から紐解く!データウェアハウスとデータマートの違いを徹底解説

データレイクとデータウェアハウス(DWH)の違いとは?

データの定義からデータレイクとデータウェアハウス(DWH)の違いをわかりやすく解説!

データ分析基盤の一つであるデータマート概要と設計ポイントをご紹介!

データ分析基盤の一つであるデータマート概要と設計ポイントをご紹介!

クラウドアプリケーション開発とは?普及背景やメリットを解説!

クラウドアプリケーション開発とは?普及背景やメリットを解説!

マネージドサービスとフルマネージドサービスの違いとは?メリット・デメリットまで徹底解説!

マネージドサービスとフルマネージドサービスの違いとは?メリット・デメリットまで徹底解説!

ハイブリッドクラウドにした際のネットワーク構成と注意すべきポイントとは?

ハイブリッドクラウドにした際のネットワーク構成と注意すべきポイントとは?

クラウド化の社内合意を得るためには?説得するための5つのポイントをご紹介!

クラウド化の社内合意を得るためには?説得するための5つのポイントをご紹介!

クラウドインテグレーターとは何か?役割やメリット、会社の選び方まで徹底解説!

クラウドインテグレーターとは何か?役割やメリット、会社の選び方まで徹底解説!

【知らないとマズイ】2025年の崖とは?DXの推進にはクラウド化が必要不可欠!

【知らないとマズイ】2025年の崖とは?DXの推進にはクラウド化が必要不可欠!

【片山さんまだ】オンプレミス、クラウド開発における違いとそれぞれの特徴とは?

オンプレミス、クラウド開発における違いとそれぞれの特徴とは?

【実例つき】クラウド移行で失敗する原因と解決策を紹介

【実例つき】クラウド移行で失敗する原因と解決策を紹介

クラウド移行は費用対効果が重要!ROIで効果を見える化しよう!

クラウド移行は費用対効果が重要!ROIで効果を見える化しよう!

【知って納得!】クラウドの高額請求を避けるための5つの確認項目とは?

【知って納得!】クラウドの高額請求を避けるための5つの確認項目とは?

【あなたは知っている?】AI(人工知能)の仕組み、作り方、活用事例まで徹底解説!

エンジニア教育における課題と効果を出すために大切なポイントとは?

データの活用で生産性向上!「BIツール」と「DWH」や「ETL」との違いとは?

【徹底解説!】人工知能(AI)の機械学習と深層学習の違いとは?

【徹底解説!】人工知能(AI)の機械学習と深層学習の違いとは?

レンタルサーバーとクラウドの違いとは?あらゆる観点から徹底比較!

レンタルサーバーとクラウドの違いとは?あらゆる観点から徹底比較!

【万が一に備えよう】クラウドの高額請求が届いたときの対処法とは?

【万が一に備えよう】クラウドの高額請求が届いたときの対処法とは?

クラウドCoEとは?社内のクラウド推進に必要な考え方を理解しよう!

クラウド導入を成功させるための鍵!クラウドアーキテクトを徹底解説!

クラウド導入を成功させるための鍵!クラウドアーキテクトを徹底解説!

クラウドサービス安全利用には理解必須!情報セキュリティマネジメントガイドラインとは?

クラウドサービス安全利用には理解必須!情報セキュリティマネジメントガイドラインとは?

【会社のセキュリティを強化しよう!】専用線と VPN の違いとは?

専用線と VPN の違いとは?違いを理解して会社のセキュリティを強化しよう!

機械学習の仕組みとは?学習方法や活用事例まで徹底解説!

機械学習の仕組みとは?学習方法や活用事例まで徹底解説!

オンプレよりも安全?クラウドがBCP対策に選ばれる理由とは

オンプレよりも安全?クラウドがBCP対策に選ばれる理由とは

「 Society 5.0」とは何か?新しい社会を支える IT 技術を一挙にご紹介!

「 Society 5.0」とは何か?新しい社会を支える IT 技術を一挙にご紹介!

Cloud IoT Core を使用してセンサー情報を Cloud Storage にストリーミングしてみた!

Cloud IoT Core を使用してセンサー情報を Cloud Storage にストリーミングしてみた!

Flutter とは何か?メリット、デメリット、採用しているプロダクト(アプリ)まで一挙にご紹介!

Flutter とは何か?メリット、デメリット、採用しているプロダクト(アプリ)まで一挙にご紹介!

BI ツールとは何か?メリット、デメリット、活用事例まで、一挙に紹介!

BI ツールとは何か?メリット、デメリット、活用事例まで、一挙に紹介!

負荷分散の重要性とは?ロードバランサーのメリット、デメリット、選び方を徹底解説!

負荷分散の重要性とは?ロードバランサーのメリット、デメリット、選び方を徹底解説!

移行コストがボトルネック?コストを抑えながらオンプレからクラウドに DWH を移行する方法とは?

移行コストがボトルネック?コストを抑えながらオンプレからクラウドに DWH を移行する方法とは?

データウェアハウス( DWH )とデータベースとの違いとは?5つのポイントを理解して最適なサービスを選択しよう!

データウェアハウス( DWH )とデータベースとの違いとは?5つのポイントを理解して最適なサービスを選択しよう!

テレワーク導入には必須!テレワークセキュリティガイドラインとは何か?

【古いシステムからの脱却を!】レガシーシステムが抱える5つの課題とは?

【古いシステムからの脱却を!】レガシーシステムが抱える5つの課題とは?

効率的なデータ活用を実現!分析したデータを有効活用するためのテクニックを4ステップで紹介

効率的なデータ活用を実現!分析したデータを有効活用するためのテクニックを4ステップで紹介

システム担当者必見!オンプレミスからクラウドデータベースへの移行で注意すべき11のポイントとは?

システム担当者必見!オンプレミスからクラウドデータベースへの移行で注意すべき11のポイントとは?

政府が提唱する「デジタル・ガバメント実行計画」とは?民間企業への影響まで徹底解説!

政府が提唱する「デジタル・ガバメント実行計画」とは?民間企業への影響まで徹底解説!

API 活用の最前線に迫る! Apigee の3大活用パターン、国内事例、最新情報まで徹底解説!

Looker で次世代のデータ活用を実現!データの民主化における課題と解決法とは?

Looker で次世代のデータ活用を実現!データの民主化における課題と解決法とは?

図解】Google データポータルとは?機能、導入方法、使い方まで徹底解説!

【図解】Google データポータルとは?機能、導入方法、使い方まで徹底解説!

クラウドサーバーとは何か?導入時のポイントや選び方まで徹底解説!

クラウドサーバーとは何か?導入時のポイントや選び方まで徹底解説!

社内のコラボレーションを加速する Googleグループとは?概要、できること、実際の作り方まで徹底解説!

情報漏えいが起こる原因とは?過去事例や防ぐための方法まで徹底解説!

成功する DXの進め方とは?具体的な手順を9ステップでわかりやすく解説!

Chrome OS で動くビデオ会議システム? Google の最新 AI を搭載した Series One を徹底解説!

【経営者必見!】IT 化が進まないことによるリスクとは?進まない理由や推進するための方法まで徹底解説!

【経営者必見!】IT 化が進まないことによるリスクとは?進まない理由や推進するための方法まで徹底解説!

システム導入に反対する現場を説得するには?ステークホルダーマネジメントと大切な3つのポイントを徹底解説!

システム導入に反対する現場を説得するには?ステークホルダーマネジメントと大切な3つのポイントを徹底解説!

【 IT に強い人材を育てる!】「社員の IT リテラシーを向上させる3つの方法」と「 IT リテラシーが低いことによる5つのリスク」とは?

【 IT に強い人材を育てる!】「社員の IT リテラシーを向上させる3つの方法」と「 IT リテラシーが低いことによる5つのリスク」とは?

IT モダナイゼーションとは?種類、メリット、実現するためのポイントまで徹底解説!

IT モダナイゼーションとは?種類、メリット、実現するためのポイントまで徹底解説!

複数プロジェクト構成の Cloud Monitoring がより使いやすくなりました

複数プロジェクト構成の Cloud Monitoring がより使いやすくなりました

Cloud Run 2020 年のアップデートおさらい

Cloud Run 2020 年のアップデートおさらい

「 Lift & Shift 」 とは?クラウド移行の手順を5ステップで解説!

Lift & Shift とは?クラウド移行の手順を5ステップで解説!

スプレッドシートの定期作業を GAS で自動化する

スプレッドシートの定期作業を GAS で自動化する

Cloud SDK のインストールについて

Cloud SDK のインストールについて

iOS アプリと Android アプリを同時に開発!Flutter とは??

iOS アプリと Android アプリを同時に開発!Flutter とは??

Cloud SDK から VM へ安全に接続する方法

Cloud SDK から VM へ安全に接続する方法

データマネジメントとは何か?成功させるための3つのポイントと具体的な進め方を5ステップで解説!

データドリブン経営とは?実現に向けた4ステップや成功事例まで徹底解説!

Excel作業の属人化を回避する方法とは?組織全体のデータ活用が課題解決の鍵!

Cloud Spanner vs Cloud SQL

Cloud Spanner vs Cloud SQL

データ活用に欠かせないデータクレンジングとは?具体的な方法を4ステップで解説!

BYODとは?導入時のメリットとデメリットや導入時に押さえておきたいポイントを徹底解説

効率的なデータ保護を実現! DLP の概要、機能、メリット、活用事例まで一挙に紹介!

効率的なデータ保護を実現! DLP の概要、機能、メリット、活用事例まで一挙に紹介!

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの3日目

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの3日目

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの2日目

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの2日目

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの1日目

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの1日目

画像

GCP Live November 2014

画像

Managed VMs with Docker

画像

GAE Managed VMs誕生までの歴史を振り返る

画像

GAE ModulesをSimpleに使う

画像

Web Componentsを使ってみよう!

画像

Android Wearアプリケーション開発入門

画像

TypeScriptの型定義ファイルを共有しよう!

画像

Google Cloud Platform Live Report

画像

Topgate Golang勉強会 Report No.1