一回触ってみたいと思っていたAngular2をようやく触ってみた。最近は新しいフレームワークやライブラリを触る場合はゲームを作ってみるか、Reactのチュートリアルをやるようにしていて、今回はReactのチュートリアル(コメントフォームのやつ)をAngular2でやってみることにした。基本的には環境構築周りは以下のシェルスクリプトマガジンとAngularのSlackチームng-japanのビギナー用に紹介されていた手順を踏んでいる。Slack!なにか間違いやより良い方法などありましたらご指摘願います。1.8.10で試している。Repositorygithub.com作業ログインストールAngular2関連のパッケージは@angular/xxxxxという形式になっているよう。前まではangular2/xxxxxだったのかな。一点注意が必要なのはRx.jsのバージョンが上がって、symbol-observableが必要になった点でしょうか。その他はほぼ、slackで紹介されていた手順だと思う。install"},typescriptの設定。}}system.jsの設定。この辺りよく作法を理解していないので要復習。Commentボックスの実装app/main.tsから呼ぶのをcomponents/comment-boxに修正。...components/home.tsをcomponents/comment-box.txに修正して、以下のように修正した。}}こうなるまで結構右往左往したんだけど、ひとまず結果だけを載せておく。ポイントとなりそうな箇所を以下に記載しておく。コンポーネントAngular2ではコンポーネントはDecoratorを使用して以下のような形で記述するらしい。...省略selector他のコンポーネントからこのコンポーネントを呼ぶ場合はこの名前を使って呼ぶ。上記の場合であれば<comment-box></comment-box>とする。/>とは書けないよう。)また、カスタムディレクティブの場合は使用するディレクティブを次のdirectivesで指定する必要があるっぽい。directives使用するカスタムディレクティブをここで指定する。CommentFormというディレクティブを使用する。providersInjectするサービスを指定する。Viewに関心のない処理などはサービスとして切り出してInjectするらしい。このコメントシステムであればサーバとAjax通信する処理をサービス(CommentService)として切り出して、Injectしている。Injectされる側(CommentService)は後述する。templeteテンプレートストリングを使用して、以下のように書く。`また、templateUrlを使って次のように別ファイルのhtmlを使用するこもできるっぽい。'foo/bar.html'どっちが主流なのだろうか。デザイナーとの協業であれば後者のほうがやりやすいだろうし、チームの体制に左右されるだろうか。テンプレートストリングだとエディタのシンタックスハイライトとかインデントが死んでてみんなどうしているのって感じ。classデコレートされる側のclassは以下のようになっている。Hooksを使うためのもの。今回はReactでcomponentWillMount相当する(?あってる?)タイミングでサーバへリクエストを投げたかったので、OnInitを使用している。以下によくまとまっていた。blog.yuhiisk.comconstructorでは後述するcommentService(主にサーバとのAjax通信するサービス)を受け取って、ngOnInitでポーリングする処理を呼んでいる。handleCommentSubmitでは子コンポーネントのcomment-formからのデータを受け取りcommentServiceに渡すことで、コメントを投稿している。startIntervalFetch()、add()ともにobservableが返ってくるのでsubscribeしてcommentsを書き換えたり、追加したりしている。comment-list基本的にはcomment-boxでの知識があればほぼほぼ書けた。comments;}新しいポイントは以下。@Input()親コンポーネントからディレクティブに対する入力は@input()で定義する必要がある。directivesと呼ぶらしい。他には、*ngIf="condition"等が用意されている。instead!という警告がでる。ここではcommentsの要素数分繰り返し<comment-item></comment-item>に渡している。詳細は以下を見ると良さそう。angular.iocomment-formフォーム部分については以下のようになった。}}新しい要素は以下。stylesコンポーネントのスタイルはstyleで指定できる。CSSを実現しているという話しをちらっと聞いていたんだけどどのように実現しているか見たら以下のようになっていた。スコープはどのように実現しているか確認すると以下のようになっていた。attributeを使用して擬似的にスコープを実現しているように見える。50px;}またstyleUrlsによりcssファイルを使用することもできるっぽい。/>のようにしてkeyupイベントで値をセットし、反映している。この辺りは以下のように書くことで1wayか2wayか選択できるっぽい。/>また、changeだとハンドラが呼ばれるのはblurのタイミングっぽくて、ReactでいうonChangeのタイミングで呼びたかったらkeyupイベントを使うのが良さそうに見える。angular.io@output@input()があったように出力は@output()を使用するっぽい。ここではフォームの内容をEventEmitterを使って<comment-box></comment-box>まで引き上げている。Componentを意識するとこういうことになるんじゃないかと思う。comment-item特筆すべき箇所はないが、この時点でmarkedを追加した。あと、タグを使用する場合は[innerHTML]を使用するっぽい。}comment-serviceCommentServiceに使用するHttpモジュールについては以下を参考にした。}}startIntervalFetch()では1秒ごとにサーバにコメントを取りに行って、add()でコメントを追加している。この時点でjson-serverをインストールしてやり取りはそっちと行っている。@Injectable()@Injectable()でDIを可能にする。使う側(components/comment-box.ts)は以下のようになる。}package.jsonpackage.jsonは最終的に以下。store脳な自分には状態を一元管理するような方法があるとありがたいng-reduxとか?あまりいい評判は聞かない。テスト周りがわからん。10:32関連記事2019-01-04Deno用のpretty_assertを作ったあけましておめでとうございます。2018の21日目です。12引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。