【Angular2】ハンズオンに参加してきました

10cmです｡こんにちは｡先日､ng_japan主催のAngular2ハンズオン勉強会#3に参加してきました｡

勉強会に参加するのは今回が初めての私ですが､Angular2は事前に学習していたため､内容はすんなりと入ってきました｡

細かい質問にも丁寧に答えてくださったスタッフの方々､ありがとうございました｡

前起きはこれくらいにして､今回はハンズオンの内容と､個人的にためになった内容を幾つか記載していこうと思います｡

ハンズオンの内容

ハンズオンでは､Angular2公式のチュートリアル､"Tour of Heroes"を行いました｡公式と違う点は､日本語で丁寧に解説されている資料があることと､"angular-cli"を用いていたことでしょうか｡

Angular2では､公式ツールとして"angular-cli"があります｡

自分の記事でも過去にご紹介したことがありますが､Angular2の開発を行う上で欠かせないツールとなるでしょう｡

ハンズオンでは､ツールの細かい使い方も丁寧に教えて下さいました｡このツールの欠点は､プロジェクトの初回生成時の遅さにあるそうです｡

確かに､家のネットワークなどでやっていても2~3分はかかっています(会場では一度にみなさんがやったせいか､回線がパンクしていましたね笑)

ただ､個人的に使っていても気になる点はそこだけで､本当に使いやすいツールです｡

改めて知ったAngular2のいいところ

自分はフロントエンドに足を突っ込んでまだ2年目の新参者です｡もとは､CやらC++やらをガッツリやっていました｡

そんな自分は､CSSを書くときにクラスを指定したり､あるIDに対してのみ設定したりと､面倒なぁって思うことがありました｡

Angular2では､Componentに閉じてCSSを記載することができる!

Componentが巨大にならない限りIDを意識したりする必要がない!(巨大化してたらそもそも分割できそうですが)

CSSに対してスコープという概念が出てきたのは驚きでした｡(そうでもないのかな?)

カッコにはきちんと意味があった

AngularJSの1系を触っている自分には､Angular2で馴染めない部分がありました｡その一つがカッコでした｡

AngularJSでは､"ng-model"や"ng-click"など､ng-***でテンプレートに対して記載していました｡

Angular2では上記のものは､[(ngModel)]､(click)となり随分と様変わりしました｡

や()ってなんやねん｡ってのがハンズオンを受ける前の自分でした｡しかし､きちんと以下のように規則性がありました｡

• ⇛ Templateに値をComponentから渡す場合に設定
• () ⇛ Templateから値をComponentに渡す場合に設定

これを聞いたとき､ngModelにが[( )]になっているわけがわかりました!

この辺も公式ドキュメントに記載されているらしいのですが､勉強不足でした(> <)

終わりに

ハンズオンの後は､主催者､サポートしてくださったかた､参加者で懇親会を行いました｡

ひよっこSierの自分にはレベルの高い話ばかりでついていけないことのほうが多かったですが､楽しく飲ませていただきました｡

これを気に勉強会の参加を増やして知識と人脈を増やしていけたらなと思います｡