こんにちは！
朝家を出るときは寒いなと思っているのに、会社に着く頃にはじわりと額に汗が滲む山﨑です。
ご近所でも、「あの子はよく額に汗が滲んでいる」と評判です。
さて、前回はOpsチームで行った、AWSの環境構築についてでしたが、
今回はDevチームにて、Angular Materialを利用したWebページの作成について研修を行いました。
入社初日に先輩社員から
「研修の中でJavaでMacのコマンド作るんすよ大変スよー」
と言われていたので、日曜から月曜の通勤電車の中まで、みっちりJavaの基礎から勉強していた私。
蓋を開けると
「いやでもそれツマンナイから実際にフロントの開発やってみようか(*^^*)」
との事。
( ﾟдﾟ) 。。。
( ﾟд ﾟ ) エッアッハイ
そっと家から持ってきたJavaのテキストをしまいます。
Javaなんてなかった。いいね？
というわけで、今回はAngularについて(私が作業をした範囲でざっくり)書かせていただきたいと思います。
あなた、Angular Materialっていうのね！
Angular Materialは、AngularJSという主にGoogleが開発しているJavaScriptのフレームワーク上で動作する、
カッコイイデザインを簡単に実現できるようにするためのUIコンポーネントライブラリです。
UIコンポーネントというのは、こういうボタンとか、こういうカレンダーとかのような、
ブラウザ上で動作する、ページを構成する出来合い物の部品の事と思ってよいと思います。
GMailやその他のGoogle製Webアプリケーションを利用する時に実は結構よく目にしている気がします。
ちなみにJavaScriptのフレームワークと書きましたが、厳密にはTypeScriptという、
JSを拡張したような言語(Microsoft製)で書きます。
ただし今回の研修では表示部分を作るだけなのでそんなに使う機会はなく、
HTMLとCSSでモックをガリガリ書いてゆきました。
学習内容
正直な所、一朝一夕でどうにかなる話ではないにしても、
まだAngularをあまり理解できていないために書ける事が少ないので、
今回は全体的に感じた印象を書いておこうと思います。
１）日本人のユーザーが少ない？
名前はよく聞くAngularですが、Googleで検索してもそんなに日本語の情報が出てこない印象。
先輩社員によると、日本人でAngularを利用している層が、アウトプットするような余裕の無い事が多いのではとのこと。
２）Angular MaterialってAngularのバージョンとかじゃないから！
既に上で書きましたが、Angularはフレームワーク、Materialの方はライブラリです。
「Angular Material 書き方」とか調べても、導入方法は出てきても、
Angularの書き方自体はほぼ何も出てこないわけです。
jQueryとjQuery Mobileみたいな距離感でしょうか。いえ、jQueryはライブラリなのですが。
３）HTMLでAngularっぽい動きをさせたいときは、基本的にタグの属性にAngularのAPIを指定する
https://qiita.com/ne-peer/items/c1074bdbf752b831f749
このページが非常にわかりやすかったです。
この辺もjQueryなんかと一緒ですね。
４）MVW
Model View Controller・・・ではなく、最後のWはWhatever(何でも)のよう。
Angularはコンポーネントと呼ばれる単位で画面や画面上の部品(とその機能)を表現するのですが、
HTMLとCSS（View）と、Component.ts（Controller）が１つのディレクトリに置かれています。
その他にモデルの役割を果たすモジュールがあるようですが、今回は触れていません。
取り敢えずのところ、パッと見た感じではMVCモデルによってAngularは成り立っていそうなのですが、
実際の所MVVM（MとVとVM（View Model））とかでも宜しい様子。
でもでも、ViewModelってあまり具体例が思いつかないのでぐぐってみます。
http://torokonbu.blogspot.com/2011/10/viewmodel.html
こちらによると
ViewModelの状態変化はViewの状態変化をもたらし、また逆にViewの状態変化はViewModelの状態変化をもたらします。
と、あります。
ここでふと思います。もしかして今俺CoCo壱の10辛が食いたいんじゃないのかなと
これってもしかして双方向データバインディングの事じゃないのかなと。
そうすると、Component.tsにビジネスロジックを持たせるのか、
ViewとModelの橋渡しだけをさせるかによってMVCとMVVMを使い分けできるという事。
ですか！？わかりません！すみません誰か教えろください！
５）双方向データバインディング
急にカッコイイ単語がでてきましたか？
カッコイイのでもう１度書きます。双方向データバインディングです。意味はあまり良く知りません。
Modelのデータをコントローラなどが書き換えたり、Ajax等によって新しくリストに要素が加わったりなどしたときに
Modelの状態をViewに反映させたり、あるいは逆に、Viewの内容をユーザが書き換える事によって
その都度変更内容がModelに反映されたりする仕組みのようです。
つまるところ、ViewとModelを双方向に紐づけするという意味で双方向データバインディングという事ではないかと思います。
これがある事によって、いちいちjQueryのように.append()とかしなくても
自動でDOMが追加されたり削除されたりするわけで、
ModelをListenerで監視して、変更があったら画面を再描画！みたいな事をしなくてよい様子。
以上、まだGitとかGitとかGitの操作に困った話が書ききれていないのですが、
ひとまず今回はAngular(Material)についてでした。
研修中は、覚える事が非常にたくさんでてきた２週間でしたが、
逆に覚えなければいけない事が体験によって洗い出せた２週間でもありました。
まずは１つ１つ潰していくしかありますまい。です。がんばります！
それでは！