Work Rules!を読んだ

グーグルの人事として働いている著者が書いた本

グーグルがなぜ、どう動いているかの著者なりの解釈を書いた内容

第1章 創業者になろう

自由度が高い - 自由裁量権を与えられる

トップダウン、階級制、指揮統制を特徴とする経営モデル - 自由度が低い環境は消えてなくなる

グーグル的アプローチでは、権力と権威をマネジャーから社員へ譲り渡すように意識している。

グーグルのマネジャーが自分の一存では下せない決定の一例

  • 誰を雇うか

  • 誰を解雇するか

  • ある人の業績をどう評価するか

  • ある人に関する昇給、ボーナス、株式付与をどれくらいにするか

  • 優れた経営手腕への褒賞を誰に与えるか

  • コードはどの時点で、ソフトウェア・コードベースに組み込める品質となるか

どうすれば業績が改善するか

  • 企業が社員に権限を与えるプログラムを実行したとき、仕事に必要なこと以外を学ぶ機会を社員に提供したとき、社員のチームワークへの信頼を高めたとき、あるいはこれらの施策を組み合わせて実行したとき。

第2章 文化が戦略を食う

グーグルがどんな仕組みで動いているのか、あるいはグーグルでこうした経営手法を選ぶのかを理解するには、グーグルの文化を定義する3つの要素の探求する必要がある。

  • ミッション

    • グーグルのミッションは、簡潔で多くのことが話題になっていない

    • ミッションは事業目標ではなく道徳

  • 透明性

    • いかなる情報も共有できないと想定するのではなく、あらゆる情報はチームと共有できると想定すること。情報の制限は意識してようやくやるべきことであり、そうするには十分な理由がなければならない。オープンソースにおいては、情報の隠蔽はカウンターカルチャーなのだ。

    • 「社員は我が社の最大の資産」だというなら、オープンを原則としなければならない。

  • 発言権


  • 会社の経営方針について、社員に対して実際の発言の機会を与えることを意味する

  • グーグルの人事慣行の多くは、社員からの発案によるもの

  • 社員にアイデアを表明する権利を与えることは、質の高い意思決定を促し、組織効率を高める重要な要因

  • 社員に遠慮なく話してもらうと、意思決定の質、チームのパフォーマンス、組織のパフォーマンスに対してプラスの効果がある

  • 議論しやすい環境を作る

  • 人は動機づけでパフォーマンスは変化する

  • OKR ( Objectives and Key Results: 目標と主要な結果 )

第3章 レイク・ウォビゴンの幻想

  • 採用に時間をかける

  • 自分より優秀な人物を雇え

  • 賢いというだけで雇ってはならない

第4章 最高の人材を探す方法

  • あらゆる社員をリクルーターに変えるべく、人材の紹介を依頼すること

  • 最高のネットワークを持つ人々に優秀な人材の確保にもっと時間を割いてもらえるように頼む

  • 積極的に人材を探すための実験を行うこと

  • 最高の人材の注意を引くために、突拍子もないことも恐れずやってみる

第5章 直感を信じてはいけない

  • 第一印象を与えるチャンスは一度だけ(最初の5分)
  • あなたは受験者を評価したいだけでないということ。彼らがあなたと恋に落ちるようにしたいのである。受験者に素晴らしい体験をしてもらい、関心事を語ってもらい、人生で最高の1日を過ごしたような気分で帰ってもらいたい。

  • グーグルで成功するかの4つの明確な属性

    • 一般認識能力

      • 当然ながら、新たな状況に学んで適応できる、頭のよい人材が欲しい

      • 求職者が実生活において困難な問題をどう解決してきたか、どう学ぶか

    • リーダーシップ

      • 創発的リーダーシップ
    • グーグル的であること

      • 愉快なことを楽しむ

      • ある程度の謙虚さ

      • きわめて誠実

      • 曖昧さを楽しむ余裕がある

    • 職務関連知識

自己複製する採用マシーンをつくるには?

  • 求める人材の質の基準を高く設定する
    • 妥協はいけない
  • 自分自身で採用候補者を見つける
  • 採用候補者を客観的に評価する
    • 採用候補者の部下や同僚になる者を面接に加える
  • 採用応募者に入社すべき理由を伝える

第6章 避難所の運営は避難者に任せる

  • 最高のグーグラーは、理にかなう場合には自分の判断でルールを破る
  • マネジャーは権力を蓄え、行使する傾向にある
  • 社員は命令に従う傾向にある
  • グーグルでは肩書以外でヒエラルキーを表したり強化したりしたりするものを排除した
  • 最上級幹部であっても新入社員と同じ便益、特典、資源しか受け取らないということ
  • 権力の象徴や権力者のような態度を最小限に抑えるだけでなく、マネジャーの意見ではなく、データにもとづいて意思決定する
  • 社員が自分の仕事や会社の指針を定める方法を見つける
  • 期待は大きく

第7章 誰もが嫌う業績管理と、グーグルがやろうと決めたこと

  • 評価や報酬ではなく、個人の成長に焦点を合わせることによって業績を改善する

業績評価のために - 目標を正しく設定する - 同僚のフィードバックを集める - 報酬についての話し合いと人材育成についての話し合いを分ける

第8章 トップテールとボトムテール

  • 成長のためのフィードバックと評価のフィードバックは絶対に分けるべき
  • 困っている人に手を差し伸べる
  • 最高の社員をじっくり観察する
  • 調査やチェックリストを使って真実をあぶりだし、改善するよう社員をせっつく
  • 自分のフィードバックを公表し、至らなかった点について改善するよう努力して範を垂れる

第9章 学習する組織を構築しよう

  • 学習に費やす時間の長さではなく、時間をどのように費やすかが重要
  • 状況を確認しながら、小さな修正を重ねて改良する
  • 反復と集中
  • 行動を変えるプログラムに投資する
  • 組織やチームの学習効率を上げる方法のひとつは、学習するスキルを細かい要素に分けて、具体的なフィードバックを即座に返す
  • デリバレイト・プラクティス(熟考した練習) - 講義をしやすい量に分割して、明快なフィードバックを提供し、繰り返し学習する
  • 社内で最も優秀な人を教師にする

第10章 報酬は不公平でいい

  • 報酬について
    • 報酬は不公平に
    • 報酬ではなく成果を称える
    • 愛を伝え合う環境づくり
    • 思慮深い失敗に報いる
  • 公平な報酬とは、報酬がそのその人の貢献と釣り合っているということ
  • インセンティブや目標達成も重要だが、熟慮した上でリスクを取る行為自体も賞賛すべきだ。失敗したときこそ賞賛しないと、誰もリスクを取らなくなる
  • 社内の摩擦を恐れず、不公平な報酬を払う。パフォーマンスのべき分布を反映して、報酬の決め方に幅を持たせる

第11章 タダ(ほぼタダ)ほどステキなものはない

福利厚生のプログラムなど

  • グーグルの社員を対象とするプログラムには3つの目標がある
    • 効率を高め、
    • コミュニティを形成し、
    • イノベーションを促すことだ
  • イエスという理由を見つけよう。社員の提案を認めれば、より活気にあふれた楽しい職場になり、生産性が上がるという見返りがあるだろう
  • 社員の生活の負担を減らす
  • 人生で最悪の出来事はめったに起こらないが、起きた時は社員に寄り添う

第12章 ナッジ/選択の背中を押す

  • 所属する組織の大きさにかかわらず、環境を作る際は熟慮した方がいい。目的は社員に自分の人生をよりよくしようと思わせることだが、そのために彼らの選択肢を奪うのではなく、よい選択をしやすい環境をつくるのだ。
  • 「である」と「であるべき」の違いを理解する
  • 小さな実験を数多く行う
  • ナッジは強制ではない

第13章 人生は最高のときばかりじゃない

失敗に直面したとき

  • 自分の間違いを認め、隠そうとしない
  • あらゆる方向に助言を求める
  • 壊れたものは修理する
  • 間違いから教訓を学び、それを伝える

第14章 あなたにもあしたからできること

自由度の高い環境を手に入れるために、チームや職場を変える10のステップ

  1. 仕事に意味を持たせる
    • 日々の業務を超越して、自分がやっていることを忠実に反映するアイデアや価値観と、仕事の目的を結びつけよう。
  2. 人を信用する
    • 人間は基本的に善だと信じるなら、信念にしたがって行動する。
    • 小さなことから始めよう
  3. 自分より優秀な人を採用する
    • 採用の質で妥協することは、間違い
    • 客観的な採用基準を持つ
  4. 発展的な対話とパフォーマンスのマネジメントを混同しない
    • つねに発展的な対話を心がけ、安心と生産性につなげていこう
  5. 「2本のテール」に注目する
    • 会社やチームで最も優秀な人を観察してみる
    • 最も優秀なプレイヤーを手本にチェックリストをつくり真似てみるだけでなく、教師になってもらう
  6. カネを使うべき時は惜しみなく使う
  7. 報酬は不公平に払う
  8. ほとんどの仕事のパフォーマンスはべき分布に従う
  9. 褒めるときは公の場で惜しみなく褒める。チームの業績を称え、重要な教訓を学んだ失敗にエールを
  10. ナッジ ― きっかけづくり
  11. 高まる期待をマネジメントする
  12. 楽しもう (1に戻って繰り返し)

人事オタクのためのあとがき

4つの基本原則にのっとってピープル・オペレーションズを気づいてきた

  1. ニルバーナを追いかける
  2. データを使って未来を予測し、形作る
  3. 飽くなき向上
  4. 型にとらわれないチームづくり

gitで削除してしまったファイルをまとめてcheckoutする

タイトル通り。

手違いでgit管理下にある大量のファイルを消してしまって元に戻したいときに便利です。

awk を使ってまとめてステータスがdeleteのものを元に戻してあげましょう!

git status -s | awk '/^ D/{print "git checkout "$2}' | sh

Dの部分を、他のステータスの頭文字に変えてあげれば応用できますね!

オブジェクト脳のつくり方―Java・UML・EJBをマスターするための究極の基礎講座を読んだ

最近、仕事でコードを書いていて、将来拡張・保守しやすくて、わかりやすいコードをどんどん書けるようになりたいと思っていたところ、本屋で「オブジェクト脳のつくり方」という本を見かけて、さくっと読めそうだったので買ってみた。

内容としては、オブジェクト・クラス・継承・カプセル化・ポリモーフィズムとはなんぞやという話から、デザインパターン3種ぐらい(Factory Method, Composite, Template Method)を試しに書いてみよう、オブジェクト指向で開発するメリット、設計(ユースケース図、クラス図、オブジェクト図、シナリオ)、JSP、EJBあたりの話が出てくる。

感想

最初のオブジェクトとはなんぞやから実際にデザインパターンを書くところらへんまでは良い復習になるな!ぐらいに思ってたが、設計図やらJSP、EJBやらの話が出てき始めたあたりから、オブジェクト指向の話とずれてきてないかという違和感がでてきた。

前半は、プログラミングを始めてオブジェクト指向ってなんや?って思ってる人には得るものが大きいと思う。ただ正直、後半は読まずにサッと流しても大丈夫な内容だ。

業務でもどうコードを書くのがベターなのか迷うときがあるので、デザインパターンを軽く押さえておくと良さそうな気がするので、結城浩さんのデザインパターン入門あたりを読んでみようと思う。

あと関係ないけど、オブジェクト指向設計実践ガイドは理解しやすくておすすめです。

WordPressで任意のサムネイル画像サイズを追加・サムネイルを再生成する方法

f:id:ryskit:20161113021259j:plain

WordPressでサイトを作っていると、記事の一覧を表示するときにアイキャッチ画像を表示することが多いと思います。

その際、任意のサイズのサムネイル画像を表示したくなるのが人情です。

この記事では、「任意のサイズのサムネイル画像を生成する方法」とWordPressでサイトを構築して運用し始めた後、新しくサムネイル画像のサイズを追加して再生成する方法をご紹介します。

任意のサイズのサムネイル画像を生成する方法

WordPressで画像をアップロードすると、

  • サムネイル「150 x 150px」
  • 中サイズ「300 x 225px」
  • フルサイズ「600 x 450px」

上記の3パターンで自動的に画像が生成されます。

これはデフォルト設定の場合で、これ以外のサイズで画像をリサイズ・切り出して欲しい場合は少し手を加える必要があります!

といっても簡単で、テーマにある functions.php というファイルに一行加えるだけ。

<?php add_image_size( $name, $width, $height, $crop ); ?>

引数の$nameは、新しい画像サイズの名前を指定します。 $widthは、切り出したいサムネイル画像の幅をピクセル単位で指定します。 $heightは、切り出したいサムネイル画像の高さをピクセル単位で指定します。 $cropは、画像を切り出すかどうか。デフォルトはfalseで、指定の幅または高さに合わせてリサイズ、trueの場合は、指定のサイズで切り抜きます。

参考サイト:

関数リファレンス/add image size - WordPress Codex 日本語版

kotori-blog.com

例えば、functions.phpに以下のように画像サイズを指定したとします。

<?php add_image_size('post_100x100_thumbnail', 100, 100, true); ?>

指定した後、画像をアップロードすると、100x100pxで画像が切り出されます。

100x100pxで切り出された画像を利用する場合は、こんな感じで指定します。 ※ループでpostを回している場合

<?php the_post_thumbnail('post_100x100_thumbnail'); ?>

めっちゃ簡単です!

サムネイル画像を再生成する方法

WordPressでサイトを運用し始めたあと、サイトの改修などでサムネイル画像のサイズを新しく追加してそちらを使いたい場合があります。

そのときに問題になるのが、過去にアップした画像の新しいサムネイル画像をどう生成するのかという問題。

いまからアップロードする画像は指定したサムネイルの画像サイズで生成されるのですが、過去の画像については改めて画像をアップロードするなどしないといけません。

とてもめんどくさい......

でも、WordPressはプラグインが豊富!解決してくれるプラグインがありました!

ja.wordpress.org

使い方もめちゃ簡単!

まず、プラグインの新規追加からregenerate-thumbnailsで検索してインストールして有効化します。

すると、サイドバーのツールにRegen. Thumbnailsと表示されるようになるのでクリックします。

f:id:ryskit:20161113015751p:plain

regenerate-thumbnailsの管理画面に遷移すると、Regenerate All Thumbnails表示されたボタンがあるのでクリックするとサムネイル画像の再生成が始まります。

f:id:ryskit:20161113020618p:plain

これで、functions.phpに追加した新しいサイズのサムネイル画像が再生成されるはずです。

最後に

いかがでしたでしょうか?

僕はあまり使うプラグインを増やしたくない方なので、今回はfunctions.php に一行追加して任意のサイズのサムネイル画像を生成する方法をご紹介しました!

WordPressにはプラグインがたくさんあるので、サムネイル画像のサイズを管理画面から登録できるプラグインとかありそうですよね。 なので、今回の記事でfunctions.phpに書き込むのは抵抗あるなって方はそういうプラグインを探してみるのも楽しそうですね!

では!

商用OK・会員登録の有無などが一発でわかる!フリー素材サイトが簡単に見つかる「素材サイト」をリリースしました。

f:id:ryskit:20160930005806p:plain

フリー素材(写真・イラスト・アイコン)をダウンロードできるサイトが簡単に見つかる「素材サイト」というサービスをリリースしました。

素材サイト

「素材サイト」をつくった経緯

f:id:ryskit:20160930102918p:plain

普段、自分で何かサービスや作品を作ろうとした時に「フリー素材」を提供してくださるサイトで素材や写真をダウンロードして使うことがありました。

その際、素材を検索して探すのですが、検索結果には「◯◯なフリー素材サイト30選」といったような「まとめ記事」がたくさん登場しました。

その記事のリンクから探すことになったのですが、そもそも情報が古くリンク切れになっているものがあったり、その記事を読んだだけでは、そのサイトではどんな素材が手に入り、商用利用は可能なのかどうかダウンロードできるファイルの形式(pngなのかai・psdなのか)は何なのか、など詳細情報がわからないという問題がありました。

最終的には、自分でそのサイトまでいって調べる必要がありました。

さらに困ったのは、海外のサイトだと利用規約やライセンス周りの話は英語で書かれているので、本当にこの写真を使って大丈夫だろうか、ライセンスに引っかかったりしないかと心配になって、使いたかった素材を使うのをやめたりすることもありました。

こういった問題を、少しでも解決できれば良いなと思って作ったのが今回の「素材サイト」というサービスです。

いい作品は、いい素材から生まれる。

いい素材があれば、組み合わせ次第でいい作品は生まれるもの。

素材探しに使っていた時間を、作品をブラッシュアップする時間に使えたら、もっと効率的に世の中にいいサービスや作品が増えるのではないか。

そういった思いでこのサービスを製作しました。

一覧では、

f:id:ryskit:20160930005820p:plain

  • 商用利用が可能かどうか
  • ダウンロードできる形式は何か
  • 会員登録は必要なのか
  • どうやってそこのサイトの素材をダウンロードできるのか
  • どんな素材を手に入れられるのか

などが、ひと目でわかるようになっています。

検索ページ

素材を探す時に、

  • 欲しい素材はAiデータで欲しいな
  • 商用利用な素材がほしい
  • 会員登録は面倒臭いな

など様々なニーズがあるかと思います。検索ページでは、それがプルダウンとチェックボックスで絞り込めて簡単に一覧で探せるようにしてみました。

f:id:ryskit:20160930005845p:plain

カテゴリや小カテゴリ、会員登録の有無、ファイル形式、利用形式、国内・海外のサイトかどうかで絞り込むことができます。

個別ページ

f:id:ryskit:20160930005841p:plain

個別ページでは、大きく3つに分けてフリー素材サイトの紹介をしています。

まずは「どんなサイトか?」です。

素材の種類はもちろんのこと、サイトで配布される素材の特徴、利用規約や禁止事項についての要約を読むことができます。

f:id:ryskit:20160930005837p:plain

次に「サイトの使い方」です。

無料で素材をダウンロードできることはわかったけれど、いまいちどこからダウンロードすれば良いのか分からない、といった問題を解決するため、画像でわかりやすく素材をダウンロードする方法を書いています。

f:id:ryskit:20160930005828p:plain

3つ目に「サンプル素材」です。

そのサイトでダウンロードできる素材を何種類か、画像で確認することができます。そこから自分が求める素材の雰囲気に合うかどうかを、判断できるかもしれません。

f:id:ryskit:20160930005824p:plain

最後に

フリー素材をダウンロードできる素敵なサイトは世の中にたくさんあります。

素材サイトでは世の中にあるまだ一部のサイトだけしか紹介できていませんが、これから頑張って掲載するサイトを集めていこうと思います!

今後は、動画のフリー素材やBGMなどのカテゴリも増やしていくつもりです。まだまだ作ったばかりでサイトも未熟ですが、少しでも多くの方に使っていただければ嬉しいです。

sozai.site

WordPressの検索結果のページネーション2ページ目以降にトップページが表示される

f:id:ryskit:20160920010633j:plain

WordPressの検索結果ページで2ページ目以降がトップページが表示されて悩みまくっていたので、情報共有します。

状況

  • パーマリンクの設定は、数字ベースを設定
  • 検索結果1ページ(http://example.com/?s=)は正しく絞り込んだ数の記事数とページネーションが表示される
  • 検索結果2ページ目以降(http://example.com/page/2/?s=)は、なぜかトップページの2ページ目以降が表示される
  • カテゴリやカスタムタクソノミの一覧ページは、正しくページネーションされる
  • WebサーバはNginxを利用

原因

  • Nginxのlocation / の設定が上手くいっていなかった
location / {
    if (!-e $request_filename) {
        rewrite ^.+?(/wp-.*) $1 last;
        rewrite ^.+?(/.*\.php)$ $1 last;
        rewrite ^ /index.php last;
    }
}

この記事を参考にしました。

最後に

パーマリンクをデフォルト設定にすると検索結果のページネーションも正常に動いていて、ずっとページネーションか設定、search.phpなどコードの記述方法が間違っていると思い、そのようなキーワード関連で調べていたため、一向に解決できない問題でした。

ふと、Webサーバの設定が間違ってるんじゃないかと思って修正すると、パーマリンクが数字ベースでも正常に動作するようになったので、同じような問題で詰まっている人は参考にしてみてください。

Angular2でのtsconfig, webpack.config, gulpの設定

f:id:ryskit:20160919183535j:plain

Angular2を書いてて、各コンポーネントごとにmain.tsを作って、tscして、さらにwebpackでbundle.jsを作りたくて、うまくいかなかったけど、最近やっと上手くいったので、個人用にメモしておきます。

  • やりたいこと: 各コンポーネントのディレクトリ構造を保ったまま、build/各コンポーネントディレクトリ名/bundle.jsを作りたい

f:id:ryskit:20160919173747p:plain

前提

僕はAngular2を使うにあたってTypeScriptで書いていて、webpackを使っています。 また、tsconfig.jsonのfilesの部分をgulpのプラグインを使って更新をしています。

準備

  • webpackのインストール
  • gulpのインストール
  • gulp-tsconfig-updateのインストール

で多分いける。

gulp-tsconfig-updateは@laco0416さんが作られたgulpのプラグインで、tsconfig.jsonのfilesの部分をgulpで更新できるので、今回すごく助かりました。 記事は、Qiitaの記事で書かれているので、参考にしていただければと思います。

流れ

  1. gulpfile.jsにタスクを書き込む
  2. gulp実行で、tsconfig.jsonを出力
  3. tsc -p . で、tsファイルをjsファイルに変換
  4. webpack で各コンポーネントのbundle.jsを出力

How to

準備に必要なものはインストールされた前提で話を進めます。

  1. まず、gulpfile.jsを作成し以下のコードを書きます。
ファイル名: gulpfile.js


var gulp = require("gulp");
var tsConfig = require('gulp-tsconfig-update');
gulpfile.js

gulp.task('default', ['tsConfig']);

gulp.task('tsConfig', function() {
return gulp.src([
  "node_modules/typescript/lib/lib.es6.d.ts",
  "./app/**/main.ts"
]).pipe(tsConfig());
});

gulp.src()の配列の中の**(アスタリスク2つ)は、"app配下の全て" という意味です。 これで、いちいちコンポーネントを作っては、tsconfig.jsonのfilesにファイルパスを書かなくて済みます。

  1. gulpコマンドを実行

gulpを実行すると、先ほど書いたgulpのタスクが走って、tsconfig.jsonが出力されます。 出力された内容はこんな感じ。

ファイル名: tsconfig.json


{
  "compilerOptions": {
  "target": "es5",
  "module": "commonjs",
  "moduleResolution": "node",
  "outDir": "build",
  "rootDir": "app",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": true,
  "suppressImplicitAnyIndexErrors": true
  },
  "filesGlob": [
    "./**/*.ts",
    "!./**/*.d.ts",
    "!./node_modules/**/*",
    "./node_modules/typescript/lib/lib.es6.d.ts"
  ],
  "files": [
      "node_modules/typescript/lib/lib.es6.d.ts",
      "app/component-a/main.ts",
      "app/component-b/main.ts"
  ]
}

ちなみに、files以外のオプションは自分で書いています。 最初、オプションのrootDirを設定していなくて、tscでビルドされた際にコンポーネントのフォルダ構造が保たれないまま、ビルドされていたので、rootDirを設定するのが肝です。

outDirはビルドしたファイルをどこに出力するかを変更できるので、今回は"build"を指定しています。

オプションの一覧は、この記事とか読んでみると良いかもです。

  1. webpack.config.jsを編集する

webpack.config.jsは以下のように編集しました。

ファイル名: webpack.config.js

var webpack = require("webpack");
var path = require("path");
var glob = require("glob");
var HtmlWebpackPlugin = require('html-webpack-plugin');

var entries = {};
glob.sync("./build/**/main.js").map(function(file) {
  let matchResult = file.match(/\/build\/(.*?)\/.*/);
  let subscript = matchResult[1] + "/" + "bundle";
  entries[subscript] = file
})

console.log(entries);

module.exports = {
entry: entries,

output: {
  path: path.join(__dirname, "test"),
  filename: "[name].js"
},

resolve: {
  root: __dirname,
  extensions: ['', '.webpack.js', '.web.js', '.js', '.ts']
},


module: {
  loaders: [
    {
      test: /\.ts$/,
      loaders: ['ts', 'angular2-template-loader']
    },
    {
      test: /\.html$/,
      loader: 'html'
    }
  ]},
};

var entries にオブジェクトでエントリポイントを指定しています。 entriesのkeyに、各コンポーネントフォルダ名(例: component-a) + /(スラッシュ) + "bundle" entriesのvalueに、エントリーポイントのパスを入れています。

entriesのキーを["component-a/bundle"]のように指定してしているのは、webpackがフォルダ構造を考えてよしなにやってくれるからです。 エントリーポイントの指定の仕方は他にもあるので調べてみてください。

  1. あとは、tsc コマンドと webpack コマンドを実行
tsc -p .
webpack

これで、build配下に各コンポーネントのディレクトリが作成され、各コンポーネントのディレクトリには、ビルドされたjsファイルとbundle.jsが出力されたかと思います。

最後に

Angular2で各コンポーネントごとにエントリーポイント作ってビルドしたりするのが正しいのかはよくわからないですが、この記事が同じようなことで詰まってる人の役に立てれば幸いです。