Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
今後のWeb開発の未来を考えて AngularJSにしました ~とあるSIerの場合~ 
2014/09/18いまや最も優れたJavaScriptフレームワーク 
「AngularJSリファレンス」出版記念 
小川充(@mitsuruog)
話すこと 
とあるSIerでの… 
AngularJS選定までの経緯 
AngularJSエンジニア育成風景 
(注意) 
AngularJSの細かい技術的なことは出てきません。あしからず。 
所属組織を代表する意見ではありません。あくま...
AngularJS 選定までの経緯
はじめに 
AngularJSの素晴らしさはもうええねん。 
十分知ってる。 
実際に現場で導入できるか。 
(注意)本イベントタイトルです!!
SIer的悩み 
 スキルのばらつきが大きい集団をまとめて1つ 
のプロダクトを作るということ。 
http://ja.wikipedia.org/wiki/三途川 
不揃いな石を積み上げて高い山を作るよう 
なものです。 
途中で崩れると供...
石が崩れないような工夫 
 統制 
 開発プロセス・標準化 
 骨組 
 アーキテクチャ 
自社でできるか真剣に検討してみた。 
悪霊退散
開発プロセス検討 
フロントエンド開発に必要な工程を抽出して、計画・ 管理できるようにする。 
そこにAngularJSが当てはまるか…
開発プロセス検討 
フロントエンド開発に必要な工程を抽出して、計画・ 管理できるようにする。 
そこにAngularJSが当てはまるか… 
AngularJSのカバー範囲 
開発プロセスの一例
開発プロセス検討 
フロントエンド開発に必要な工程を抽出して、計画・ 管理できるようにする。 
そこにAngularJSが当てはまるか… 
AngularJSのカバー範囲 
\(*T▽T*)PMが管理できる形に!!/ 
開発プロセスの一例
フロントエンド開発に必要な構成要素(コンポーネン ト)をMECEで表現する。 
そこにAngularJSが当てはまるか… 
アーキテクチャ検討
フロントエンド開発に必要な構成要素(コンポーネン ト)をMECEで表現する。 
そこにAngularJSが当てはまるか… 
アーキテクチャ検討 
AngularJSのカバー範囲 
アーキテクチャの一例
フロントエンド開発に必要な構成要素(コンポーネン ト)をMECEで表現する。 
そこにAngularJSが当てはまるか… 
アーキテクチャ検討 
AngularJSのカバー範囲 
アーキテクチャの一例 
\開発ガイド!!/
ひらすら文書化 
開発プロセス 
開発ガイド 
etc… 
ひたむきにトレーニング 
標準化検討
ひらすら文書化 
開発プロセス 
開発ガイド 
etc… 
ひたむきにトレーニング 
宣教師の心得で布教活動 
標準化検討 
http://ja.wikipedia.org/wiki/ザビエル
プロセスもアーキテクチャも、AngularJSに依存しているよ うで依存していないところがミソ。 
外部環境の変化に応じて中の実装を取り換えられる工夫をしておく。 
Tips: AngularJSをうまく使う
祝!AngularJS採用 
AngularJSなら 
自社の開発プロセスの枠組みにはまり 
堅牢で維持管理できるアーキテクチャを描け 
誰でも扱えるよう標準化できる 
実際、上とのネゴシエーションが大変だったことはこの際内緒
AngularJS 育成風景
育成風景 
社内Webサービスをトライアル開発して評価・検証。 
有志で集まって頑張っている。(業務後) 
JS初心者が多いため、基礎的な部分はハンズオンを中心にボトムアップ。 
ハンズオンの風景
育成にはクラウドをフル活用 
様々な事情を乗り越えて参加。 
勤務地、業務の忙しさ、家族など 
場所や時間に束縛されない環境を提供する。 
リポジトリ 
開発環境(IDE) 
コミュニケーション
AngularJSの先を見据た育成 
AngularJSを足掛かりに最近のフロントエンド開発に強い組織を作る。 
意欲のあるエンジニアがチャレンジできる組織文化を育成したい。 
組織と個人が相互に高めあえるエコシステムを作りたい。 
開発...
Whoam I? 
小川充(おがわみつる) 
株式会社クレスコ技術研究所 
フロントエンドエンジニア 
2011年よりHTML5の可能性に魅了されてフロントエンドエンジニアへ転身。 最新のフロント技術を業務システムの現場に浸透させるために、技術...
Upcoming SlideShare
Loading in …5
×

今後のWeb開発の未来を考えてangularJSにしました

24,613 views

Published on

今後のWeb開発の未来を考えて AngularJSにしました
~とあるSIerの場合~

いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念イベント発表資料
http://angularjs-jp.doorkeeper.jp/events/14893

Published in: Internet
  • Be the first to comment

今後のWeb開発の未来を考えてangularJSにしました

  1. 1. 今後のWeb開発の未来を考えて AngularJSにしました ~とあるSIerの場合~ 2014/09/18いまや最も優れたJavaScriptフレームワーク 「AngularJSリファレンス」出版記念 小川充(@mitsuruog)
  2. 2. 話すこと とあるSIerでの… AngularJS選定までの経緯 AngularJSエンジニア育成風景 (注意) AngularJSの細かい技術的なことは出てきません。あしからず。 所属組織を代表する意見ではありません。あくまで個人の意見です。 AngularJS導入で悩めるSIerのヒントに…
  3. 3. AngularJS 選定までの経緯
  4. 4. はじめに AngularJSの素晴らしさはもうええねん。 十分知ってる。 実際に現場で導入できるか。 (注意)本イベントタイトルです!!
  5. 5. SIer的悩み  スキルのばらつきが大きい集団をまとめて1つ のプロダクトを作るということ。 http://ja.wikipedia.org/wiki/三途川 不揃いな石を積み上げて高い山を作るよう なものです。 途中で崩れると供養できない物体に変…ry)
  6. 6. 石が崩れないような工夫  統制  開発プロセス・標準化  骨組  アーキテクチャ 自社でできるか真剣に検討してみた。 悪霊退散
  7. 7. 開発プロセス検討 フロントエンド開発に必要な工程を抽出して、計画・ 管理できるようにする。 そこにAngularJSが当てはまるか…
  8. 8. 開発プロセス検討 フロントエンド開発に必要な工程を抽出して、計画・ 管理できるようにする。 そこにAngularJSが当てはまるか… AngularJSのカバー範囲 開発プロセスの一例
  9. 9. 開発プロセス検討 フロントエンド開発に必要な工程を抽出して、計画・ 管理できるようにする。 そこにAngularJSが当てはまるか… AngularJSのカバー範囲 \(*T▽T*)PMが管理できる形に!!/ 開発プロセスの一例
  10. 10. フロントエンド開発に必要な構成要素(コンポーネン ト)をMECEで表現する。 そこにAngularJSが当てはまるか… アーキテクチャ検討
  11. 11. フロントエンド開発に必要な構成要素(コンポーネン ト)をMECEで表現する。 そこにAngularJSが当てはまるか… アーキテクチャ検討 AngularJSのカバー範囲 アーキテクチャの一例
  12. 12. フロントエンド開発に必要な構成要素(コンポーネン ト)をMECEで表現する。 そこにAngularJSが当てはまるか… アーキテクチャ検討 AngularJSのカバー範囲 アーキテクチャの一例 \開発ガイド!!/
  13. 13. ひらすら文書化 開発プロセス 開発ガイド etc… ひたむきにトレーニング 標準化検討
  14. 14. ひらすら文書化 開発プロセス 開発ガイド etc… ひたむきにトレーニング 宣教師の心得で布教活動 標準化検討 http://ja.wikipedia.org/wiki/ザビエル
  15. 15. プロセスもアーキテクチャも、AngularJSに依存しているよ うで依存していないところがミソ。 外部環境の変化に応じて中の実装を取り換えられる工夫をしておく。 Tips: AngularJSをうまく使う
  16. 16. 祝!AngularJS採用 AngularJSなら 自社の開発プロセスの枠組みにはまり 堅牢で維持管理できるアーキテクチャを描け 誰でも扱えるよう標準化できる 実際、上とのネゴシエーションが大変だったことはこの際内緒
  17. 17. AngularJS 育成風景
  18. 18. 育成風景 社内Webサービスをトライアル開発して評価・検証。 有志で集まって頑張っている。(業務後) JS初心者が多いため、基礎的な部分はハンズオンを中心にボトムアップ。 ハンズオンの風景
  19. 19. 育成にはクラウドをフル活用 様々な事情を乗り越えて参加。 勤務地、業務の忙しさ、家族など 場所や時間に束縛されない環境を提供する。 リポジトリ 開発環境(IDE) コミュニケーション
  20. 20. AngularJSの先を見据た育成 AngularJSを足掛かりに最近のフロントエンド開発に強い組織を作る。 意欲のあるエンジニアがチャレンジできる組織文化を育成したい。 組織と個人が相互に高めあえるエコシステムを作りたい。 開発 プロセス 評価 ハンズオン 成長 興味 自習 個人 組織
  21. 21. Whoam I? 小川充(おがわみつる) 株式会社クレスコ技術研究所 フロントエンドエンジニア 2011年よりHTML5の可能性に魅了されてフロントエンドエンジニアへ転身。 最新のフロント技術を業務システムの現場に浸透させるために、技術調査・評価、アー キテクチャ設計、現場に合わせたテーラリング、メンバー教育など、業務システムエン ジニア目線で活動している。 html5jエンタープライズ部スタッフを行うかたわら、enja-oss、html5j英語部にも所 属している。 2014年8月よりHTML5 Experts.jpコントリビューター https://github.com/mitsuruog Twitter: @mitsuruog

×