AngularJSのハンズオンセミナーで、表示切替のRouting機能を動かしてみた

勉強会・セミナーを検索していたら、HTNL5のものを発見。当初は、CSSフレームワークなどがテーマでしたが、最終的にはAngularJSのハンズオンに。

AngularJSには興味があったのでいい機会だと思い、参加してきました。

2014年7月4日、「AngularJSを触って覚えて、モテ女&モテ男になろう!ハンズオンセミナー」に参加しました。

AngularJSとは

AngularJSは、Googleがオープンソースで開発しているJavaScriptフレームワークです。AngularJSは2009年に発表されて、2013年11月にはAngularJS 1.2のバージョンがリリースされています。

AngularJSは、GoogleがGoogleのメールやマップ、カレンダーといった大規模Webアプリケーション開発を通して学んだ教訓が凝縮されている注目のJavaScriptフレームワークです。

ちなみに、アンギュラージェイエス、と読みます。

Webサイトを構築するときにはブラウザ上で様々な動作を実現するためにJavaScriptを使うことが多いです。

効率よく実装するためにJavaScriptフレームワークを利用するのも一つで、JavaScriptフレームワークの中でも注目されているのが「AngularJS」です。

GoogleではAngularJSで書き換えたことでフロントエンドのソースが1万7000行→1500行になったとのこと。

AngularJSの特徴

AngularJSの特徴的な機能としては、データバインディングがあります。

HTMLにJavaScriptのコードをゴリゴリ書かなくても、AngularJSの書き方をすれば、データから自動的にユーザーインターフェイスに反映するといったものになります。とはいえ、アニメーション機能などリッチな機能も取り入れており、AngularJSは機能を充実させる方向で発展しています。

AngularJSを使うことで、複雑化するフロントエンド開発を効率よくすることが可能になるというわけです。

AngularJSのハンズオンセミナー

2014年7月4日、「AngularJSを触って覚えて、モテ女&モテ男になろう!ハンズオンセミナー」に参加しました。

会場は、名古屋の国際センターで、参加者は20名くらいでした。

IMG_3099a

講師の佐川さんからAngularJSについて簡単にまず概要説明がありました。

そのあとはコードを記述&説明があり、、参加者が実際に自分のPCでコードを記述して動かしていきました。

ハンズオンセミナーの内容

ハンズオンでは、主に以下の機能を実装してみました。

  • 入力値の計算・表示
  • バリデーションチェック
  • ループ処理
  • 検索
  • 表示切替

AngularJSの特徴ある基本機能を一通り触ってみた感じで、2時間程度のハンズオンセミナーは充実していてあっという間でした。

まとめ・感想

AngularJSはシンプルだけど、表示、検索、切り替えといった機能が充実していて驚きでした。

今後も注目してAngularJSを頑張って勉強していこうと。特に最後の表示切替で使ったRouting機能あたりは良かったです。