![映画チケットの購入
会員登録 個人情報の登録 入力情報の確認 映画の選択へ
会員ログイン 映画の選択へ
映画の選択
時間?日付の選択
作品一覧から選択へ
作品の選択から時間?
日付の選択に来た場
合、座席の選択へ
作品の選択
時間?日付の選択へ
時間?日付の選択から
作品の選択に来た場
合は座席の選択へ
座席の選択 購入枚数と座席指定 会計 購入内容をメール送信
【React UIモデル】
（会員番号：非表示、初期生成）
氏名：必須
メールアドレス：必須
パスワード：必須
電話番号の下4桁：必須
[誕生日：オプション]
[性別：オプション]
[ジャンル：オプション]
【Reactビューモデル】
会員番号
氏名
メールアドレス
パスワード
電話番号の下4桁
誕生日
性別
ジャンル
【ASP.NET永続化モデル】
会員番号
氏名
メールアドレス
パスワード
電話番号の下4桁
誕生日
性別
ジャンル
購入履歴](https://image.slidesharecdn.com/reacthelmetcontrolesspa-200725052017/85/Reacthelmetcontrolesspa-14-320.jpg)
![【React UIモデル】
（会員番号：非表示、初期生成）
氏名：必須
メールアドレス：必須
パスワード：必須
電話番号の下4桁：必須
[誕生日：オプション]
[性別：オプション]
[ジャンル：オプション]
【Reactビューモデル】
会員番号
氏名
メールアドレス
パスワード
電話番号の下4桁
誕生日
性別
ジャンル
【ASP.NET永続化モデル】
会員番号
氏名
メールアドレス
パスワード
電話番号の下4桁
誕生日
性別
ジャンル
購入履歴
【映画の選択時】
（会員番号：非表示、初期生成）
[ジャンル：オプション]
【ビューモデル：永続化モデル不要】
会員番号
ジャンル
映画タイトル
スクリーン
日時
ログインまたは会員登録からの
遷移時に単に転送されるだけ、
マイクロサービスは経由しない
単にDBからのクエリ結果、
読取のみ](https://image.slidesharecdn.com/reacthelmetcontrolesspa-200725052017/85/Reacthelmetcontrolesspa-15-320.jpg)
More Related Content
What's hot (20)
Similar to Reacthelmetcontrolesspa (20)
![[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://cdn.slidesharecdn.com/ss_thumbnails/net20122asp-netmvc4beta-120225025400-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More from Takao Tetsuro (20)
Recently uploaded (6)
Reacthelmetcontrolesspa
- 3. Micro service ASP.NET MVC React
- 5. ステートレス ステートフル … … … … … … … … … … Blazor React Angular Vue などのモデル ASP.NET MVC のモデル
- 6. ステートレス ステートフル … … … … … … … … … … Blazor React Angular Vue などのモデル ASP.NET MVC のモデル
- 7. ステートレス ステートフル … … … … … … … … … … Blazor React Angular Vue などのモデル ASP.NET MVC のモデル
- 13. 映画チケットの購入 会員登録 個人情報の登録 入力情報の確認 映画の選択へ 会員ログイン 映画の選択へ 映画の選択 時間?日付の選択 作品一覧から選択へ 作品の選択から時間? 日付の選択に来た場 合、座席の選択へ 作品の選択 時間?日付の選択へ 時間?日付の選択から 作品の選択に来た場 合は座席の選択へ 座席の選択 購入枚数と座席指定 会計 購入内容をメール送信 サブドメイン ログイン?ステート 予約日時?ステート 予約座席?ステート 予約購入?ステート ステート管理
- 14. 映画チケットの購入 会員登録 個人情報の登録 入力情報の確認 映画の選択へ 会員ログイン 映画の選択へ 映画の選択 時間?日付の選択 作品一覧から選択へ 作品の選択から時間? 日付の選択に来た場 合、座席の選択へ 作品の選択 時間?日付の選択へ 時間?日付の選択から 作品の選択に来た場 合は座席の選択へ 座席の選択 購入枚数と座席指定 会計 購入内容をメール送信 【React UIモデル】 （会員番号：非表示、初期生成） 氏名：必須 メールアドレス：必須 パスワード：必須 電話番号の下4桁：必須 [誕生日：オプション] [性別：オプション] [ジャンル：オプション] 【Reactビューモデル】 会員番号 氏名 メールアドレス パスワード 電話番号の下4桁 誕生日 性別 ジャンル 【ASP.NET永続化モデル】 会員番号 氏名 メールアドレス パスワード 電話番号の下4桁 誕生日 性別 ジャンル 購入履歴
- 17. PowerShellで、プロジェクトを作成する フォルダに移動し dotnet new reactnet-webpack Visual Studioで、 「React.Sample.Webpack.CoreMvc」を 選択してデバッグ実行 ファイルが出来上がるので
- 21. Webpackで作ったプロジェクトを ステートマシンにしていきます ビュー用モデルビュー 永続化用モデルをまとめる フォルダを作成 ログイン?ステート 予約日時?ステート 予約座席?ステート 予約購入?ステート React Router React Helmet Styled Components
- 25. https://www.google.com/permissions/logos-trademarks/https://ja.facebookbrand.com/ Facebook Google
- 30. Index.chtml （_Layout.chtml）でログ インボタンをクリック Accountコントローラー のSigninアクションを呼 び出す。 Microsoft Azure Active Directory Endpointの OAuthフローによって Homeコントローラーの Indexアクションに遷移 Authorization Codeを取 得してアクセストークン を要求 アクセストークンを使っ て、ログインした人の情 報をMicrosoft Graph APIから取得する ユーザー情報を保存し てログイン?ステートを管 理する
- 36. accessaccess
- 37. accessaccess
- 45. accessaccess <head> <title data-react-helmet="true">ReactJS.NET Demos</title> <meta charset="utf-8" /> <link rel="stylesheet" href="/Sample.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" /> <script type="text/javascript" src=/slideshow/reacthelmetcontrolesspa-237232866/237232866/"https:/alcdn.msauth.net/lib/1.2.1/js/msal.js" integrity="sha384- 9TV1245fz+BaI+VvCjMYL0YDMElLBwNS84v3mY57pXNOt6xcUYch2QLImaTahcOP" crossorigin="anonymous"></script> <style data-styled="" data-styled-version="4.4.1"></style><style type="text/css" id="server-side-styles"></style> </head> ViewBag.HelmetTitle ViewBag.ServerStyles
- 49. Orleans: Distributed Virtual Actors for Programmability and Scalability https://www.microsoft.com/en-us/research/publication/orleans-distributed-virtual-actors-for-programmability-and- scalability/ Design patterns for modern web APIs https://blog.feathersjs.com/design-patterns-for-modern-web-apis-1f046635215 Atomic Design Methodology https://atomicdesign.bradfrost.com/chapter-2/
Editor's Notes
- #2: タイトルは「React helmetでASP.NET Core Web app」となっていますが、中身は「ASP.NET Core Web appでReact helmet」という感じなのでご了承ください。これは、マイクロサービスのステートフルミドルウェアを何で実装するかによって主語が変わってきますので、そのあたりの話に注目して聞いてみてください。本資料は49ページありますから設計の話を中心にして、実装に関してはかなり急ぎで説明します。そのため、事前に資料とソースコードをダウンロードして聞いていただけると良いかと思います。
- #3: 【読む】
- #4: 本日は3部構成になっています。マイクロサービスの設計では、以前.NETラボでお話しした話を交えながらステートレスなSPAのステートをステートフルミドルウェアで管理する意味をお話しします。 二番目に実装のお話し、最後にReact Helmetで遷移管理するお話しをします。
- #5: まずはマイクロサービスの設計のお話しをします。ASP.NET Core web appでマイクロサービスを作るときの注意点として、サービスはステートフルで、ページはステートレスであるべきですというお話をします。 続けてReactを使うことでASP.NET MVCで扱う取り回しの良いモデルをエッジ側で型解決する話をします。これはステート管理の話でなく、型解決の話になります。そもそもASP.NET MVC web appでは、controllerとchtml間で型解決できています。これはサービスサイドでモデルレンダリングをしてエッジ側に渡しているからです。渡された後にエッジ側でモデルに対して何かしらの操作をしたい場合、またそれをサービス側に渡したいというシーンはリアルビジネスの中では当たり前のように必要です。これにはJavaScriptオブジェクトにするかBlazorのようなWebassemblyにする必要があります。今回は、JavaScriptモデルとサービスサイドのASP.NET MVCのモデルの連携をお話しします。 マイクロサービスの最後では、ステートレスなSPAのステートを管理するためにサービスサイドのステートフル?ミドルウェアをASP.NET MVCで構築する話をします。
- #6: 永続化层【クリック】をステートマシンにすることなくスケーラブルで変更に强いソリューションを作る场合は、【クリック】何かしらの各ファンクションがサービスファブリックやサービスファブリック?メッシュのようなマイクロサービス基盘で稼働して、それぞれの永続化层に业务ステートに依存することのない滨翱を行うように设计すると思います【クリック】。これはマイクロサービス设计时のパターンアンドプラクティスです。この.狈贰罢ラボでは何回かお话ししていますが、まだ読まれていない方は本资料の巻末のリンクに、マイクロソフトリサーチのバーチャル?アクターパターンのレポートがありますのでぜひご一読ください。【クリック】
- #7: 問題解決領域ではステート管理は必須ですが、Webサービスとエッジ側UIの間はステートレスにする必要があります【クリック】（これはWebアプリを設計する際のパターン&プラクティスです）。こちらも巻末にリンクを載せています。Mediumの「Design patterns for modern web APIs」という記事ですが非常によくまとまっています。【クリック】 これを両立させるため、Restful APIやステートフル?ミドルウェア【クリック】という選択が行われるわけですが、ASP.NET MVCで取り回しの良いモデルを使っていてもエッジ?サイドのWebページでそのモデルが使えなければ不便です【クリック】。【クリック】
- #8: ASP.NETはサービスサイド?モデルレンダリング（この場合はシリアライズです）によって型解決を実現しています。エッジ?サイドにはBlazorという選択肢（この場合WebAssemblyでデシリアライズすることになりますね）がありますからどちらを使ってもかまいません。私はさまざまなソリューションの設計を評価する場合、トランザクション境界【クリック】に対して型解決とステート管理の2つをどのように設計しているか？で品質を評価します。つまり、どの技術や基盤を使っているかに関係なく、この2つの設計がソリューション内で統一されており変更に強い設計になっているかを評価します。【クリック】 本日はこのステートレスなWebページに対して、ASP.NET MVCのモデルとReactのモデルが業務のステートをどのように転送していくかという話をします。その話の中で型解決とステート管理の2つの側面でお話しします。
- #9: ではReactの概要からお話しします。 ReactJS.NETは、ASP.NET MVCの型解決を実現してくれます。ASP.NET MVCの型をJavaScriptで扱うということを行います。エッジ側はJSXで実装できるためJavaScriptのモデル（ASP.NET MVCのモデルがエッジ側Webページに伝搬したもの）とHTMLを作成、保守する際に可読性が向上します。この可読性の部分についてはRazor構文やBlazor構文と同じ効果を期待できます。 一方、React HelmetはページのHEAD部分を管理する際に利用できます。ASP.NET MVCでも_Layout.chtmlにViewBagを渡すことができますので、HEADタグに異なる値を動的に割り当てることができます。ここで注意が必要なのは、今回の設計の基本はあくまでステートレスなWeb UIの作成の話であり、_Layout.chtmlをステートマシンにするわけではない（セッションステートを使うわけではない）ことに注意してください。SPAのステートマシンについては後述します。ReactはあくまでSPAの実装に使います。
- #10: ReactJS.NETのテンプレートには代表的なものとしてVanillaとWebpackがあります。VanillaはASP.NET Core MVCの基本的なテンプレートで、WebpackはReactJS.NETのサービスサイドのモデルレンダリング版です。ルーティング機能やリンク生成機能も含みます。ですからASP.NET MVCとRazorの組み合わせと同じです。C#を書きなれている方は、わざわざWebpackを選択する必要はありません。JavaScriptでサービスサイドのルーティング、リンク生成、モデルレンダリングとページレンダリングを行いたい人向けです。ステート管理については別のフレームがありますので、後でご紹介します。
- #11: dotnetのSPAテンプレートはほかにもありますので、「dotnet new -l」で確認してみてください。
- #12: エッジサイドのモデルとサービスサイドのモデルのタイプリゾルビングにはこのような種類があります。本日はReact Helmetのお話しをしたいのでReact Webpackテンプレートを利用してサンプルを作成していきます。React HelmetはHeadタグを生成するので、サービス側でHTMLをレンダリングします。
- #13: 本日のお話のもう一つのテーマであるステート管理についてお話しします。ステートフル?ミドルウェアとして利用できるいくつかのJavaScript用のステート?マネージメント?フレームワークがあります。今回は、ステートマネージメント自体を説明したいので、これらのフレームワークを使わず、React HelmetとASP.NET Core MVCを使ってステートマシンを作成していきます。
- #14: React、Vue、Angularなどのエッジ?サイドのモデルレンダリング?アーキテクチャは、目的の一つとしてSPA（Single Page Application）によってViewのプレースホルダーとそこに表示するデータ（これはモデルによって渡されるのが本来の姿）を分離することで、わざわざViewの再構築のためだけにサーバーとの通信を行うことを避けたいという意図があります。 Viewの再構築とは、たとえば問題解決領域のサブドメイン?スコープでページの一部だけ書き換えたいときなど、サービス?サイドのデータを表示している部分があるページではページ全体を読込することはしたくないわけです。だからと言って、インターネットにあふれているサンプルのように1ページだけで業務の複数のサブドメイン?スコープが完結するようなWebアプリはこの世の中にありません。 単なる映画チケットの購入であっても4つのSPAでサブドメイン?スコープを分離する必要があり、4つのSPAのステートを管理する必要があります。 本来であれば、このほかにもポイントや会員特典、特別上映会や舞台挨拶などの制御についてステート管理が必要になると思います。
- #15: たとえば、この2つのSPAを例にしてモデルの転送を考えてみましょう。会員登録の際の個人情報の入力と確認は同じページで表現できます。つまりモデルは同じです。ではモデルのステータスを管理する必要があるかどうかというと、必要ありません。入力ボックスが必要なのかラベルのように表示するかだけかのビュー?ステートであり、登録完了までは画面遷移する必要もサービスと通信する必要もありません。エンドユーザーが入力途中のものを保存してあげるといったユーザビリティの向上については、サービスとの通信は必要かもしれませんが、これはステートの管理ではありません。 このビュー?モデルと永続化モデルの考え方は、XAMLやBlazorのバインドの考え方と同じです。ステートフル?ミドルウェア内のビュー?モデルとマイクロサービスが永続化するモデルは必ずしも同じではありません。必要のないプロパティをステートマシン内で持ち歩く必要がないように作成することは、永続化層にステートを持ち込まないマイクロサービスの基本的な考え方であり、これにより永続化層とのIOは低減されます。
- #16: 映画の選択時に初めてステート管理が必要になります。ログインしているかどうか、会員番号と映画（タイトルまたは映画の作品IDとスクリーン）、日時が紐づいているというステータスが生成されます。このステートは座席選択のマイクロサービスへと引き継がれます。 したがって、ステート管理とビューステートを混同することなくステートマシンを設計する必要があります。
- #17: では実際にプログラムを作っていきましょう。プログラムの部ではテンプレートで作ったプロジェクトに変更を加えていきます。ASP.NET MVCでステートマシンを作りますので、ログインのステートを管理するナビゲーションバーを作っていきます。OAuthログインフローとMicrosoft Graphは最も小さなマイクロサービスであることを確認します。この際にルーティングについても言及します。
- #18: 開発の準備は非常に簡単で「dotnet new reactnet-webpack」で大丈夫です。
- #19: ただ、現在（2020/7/9時点）ではnpm がcode 2で終了します。Vanillaの方は問題なくデバッグの「ReactDemo」で正常にデバッグできます。
- #20: うまく動かない場合はVisual Studioの環境も一度確認してみましょう。ツールのオプションから「プロジェクトおよびソリューション」の「Webパッケージの管理」-「外部Webツール」のパスも確認してみてください。
- #21: それでもうまく动かない场合は骋颈迟贬耻产からダウンロードしてデバッグ実行しましょう。动くことが确认出来たらソリューションの构成を确认します。
- #22: Reactは、サービス側からモデルによって渡されたデータとビュー要素がまとめられたコンポーネントを作成していくアーキテクチャです。【クリック】これをJSXで定義していきます。Webpackのテンプレートには、すでにHelmetも入っていますのでReact.Core名前空間のReactHelmetFunctionsをnewすると機能をそのまま利用できます。【クリック】 HelmetはHTMLページのHEADタグを動的に変更するものなので、サービスサイドでページレンダリングする技術です、そのためReact Routerの機能も入っていて、進む戻る、リンク遷移、サーバーリダイレクトなどのルーティング、ナビゲーション機能を持っていますが、今回はルーティングをASP.NET MVCに変更しASP.NET MVCをステートマシンにします。 ASP.NET MVCが使うモデルはステートを表すものでModelsフォルダを作成し、その中にまとめます。ビューモデルはjsxに、永続化モデルはModelsフォルダの各csファイルに定義するように作成します。
- #23: ステート管理としては、各マイクロサービスとして分离したサブドメインが利用するステートを用意しておきます。これらは永続化されるデータの入れ物になります。
- #24: ログインを管理しますので、まずはログインのインターフェイスを作っていきます。これは简単に贬辞尘别コントローラーの滨苍诲别虫アクションで痴颈别飞叠补驳にログイン状态を入れてあげるという1行と颈苍诲别虫.肠丑迟尘濒のコンテンツを叠辞诲测要素として表示する共通のコンテナとなる冲尝补测辞耻迟.肠丑迟尘濒にナビゲーションバーを作ってやるだけです。
- #25: この_Layout.chtmlの画面写真ではSVGの部分は閉じてますが、詳細は私のブログに書いてありますのでご興味のある方はご参照ください。 コードは、サインインしてなかったらログイン用のSVGを表示してやるという内容が書いてあります。
- #26: すべてのブランドはオフィシャルのブランドリソースがありますので、Method DrawでSVGを作る場合規約に則った描き方をしてください。 こちらはFacebookとGoogleです。
- #27: 础尘补锄辞苍と惭颈肠谤辞蝉辞蹿迟
- #28: すべてのブランドはオフィシャルのブランドリソースがありますので、Method DrawでSVGを作る場合規約に則った描き方をしてください。
- #29: Twitter
- #30: サインインに関しては、SPA用のライブラリをMicrosoftが提供していますので使ってください。ただし、今回はSPAとWebpackを混在してソリューションを構成していますので、これらは使わず自作します。というのも、このMSAL（Microsoft Authentication Library）はサインイン状態のキャッシュなども管理できますので、サインイン状態をステート管理する今回のアプリケーションでは使えません。キャッシュと永続化するステートを同期させる必要があり、費用対効果を考慮すると自作した方が良いからです。
- #31: 【読む】こんな感じのプログラムを作っていきます。ここで意識していただきたいのは、ログインするアカウントを永続化しているのはMicrosoft Azure Active Directoryであること、その認証を使ってユーザー情報を引き出すのはMicrosoft Graph APIだということです。Microsoft Graph APIは認証状態のステートをトークンによって確認し、確認後Azure Active Directoryを含めOffice 365 の各種リソースを返します。つまりマイクロサービスのステートフル?ミドルウェアの実装の一例と言えます。早速実装していきましょう。
- #32: 今回はHelmetでヘッダーを操作すること、つまりサービスサイドのページレンダリングが目的ですのでReact Routerの機能は使いません。 まず、ルーティングをMVCに変更します。Endpointでのルーティングではなく、MVCのルーティングを使うことをStartup.csに定義します。Webpackが設定したConfigure内のUseRoutingとUseEndpointsをコメントアウトしてあります。代わりにASP.NETでおなじみの設定ですが、default名にControllerとActionを設定します。 この際、サービス追加時にオプションを追加するように警告にて促されますのでAddMvcにオプションを追加します。
- #33: アカウントコントローラーを追加してSignInアクションをvoidで追加します。SignInアクションではAzure Active Directory Endpointにリダイレクトさせるだけです。実行してAuthorizationコードがアドレスバーに返ってきていることを確認します。
- #34: Codeを受け取れることがわかったら、HomeコントローラーのIndexアクションでそれを使ってトークンを取得する部分を作成していきます。 Azure Active Directory ApplicationにリダイレクトURLを登録してありますので、Indexアクションの中でcodeを受け取れるわけです。 Microsoft Graph APIにaccess_tokenを受け取るリクエストを送って、受け取ったaccess_tokenでサインインボタンの部分にディスプレイネームを表示するようにViewBagに格納します。
- #35: Azure Active Directory Endpointは、Authorizationコードを受け取って該当の組織で認証されたことを確認出来たら該当の組織で有効なトークンを発行します。プログラムはトークンを取得したらMicrosoft Graph APIに対して自分のプロフィールを要求します。この際、プログラムは誰がログインしているか？を知る必要はありません。認証したユーザーにとっての「自分のプロフィール」を取得します。
- #36: Microsoft Graph APIが返却する型を用意しておくと、JsonSerializerでクラスにデータを格納することができますので、そのまま保存することもできます。ただし、OAuthは認証と認可を分離するところに意味がありますので、このクラスを包含するApplication Userクラスを作って、それをプロパティとして持つログインモデルを作ります。このログインモデルをシリアライズして永続化層に保存することでログインステートを管理できます。
- #37: 保存はDBなどにすると思いますが、ここでは簡単にTextファイルに保存しています。これを行うために2つの作業が必要になります。 まず、ファイルを読み書きする部分を作成します。【クリック】DataAccessLayerというファサードを作ってアプリケーションの外部入出力部分を定義します。インスタンスの際に.NET Coreが提供する物理ファイルのプロバイダーを使ってステートを保存するファイルをURLで指定します。IOの際は、そのファイルインフォの物理パスにストリームライターで読み書きします。 次に、アプリケーションのStartUpでWebから静的なファイルを扱えるように変更します【クリック】
- #38: 厂迟补谤迟耻辫.肠蝉に鲍蝉别厂迟补迟颈肠贵颈濒别蝉を追加します。ここでは飞飞飞谤辞辞迟の肠辞苍迟别苍迟蝉フォルダを扱えるようにしています。
- #40: ReactJS.NETはASP.NETの知識とReactの知識の両方を理解していると非常に作業効率があがるフレームワークです。そこで、ここではページ表示までの流れをお話しします。 まず、ASP.NETはStartUp.csによってConfigurationを設定します。ConfigurationではNugetでインストールされたパッケージ「React.AspNet」を使うようにIServiceCollectionにAddReactが定義してあり、IApplicationBuilderにUseReactを実行することでwebpack.config.jsが読み込まれます。Webpackの構成ファイルでは
- #41: エントリーポイントでは、驳濒辞产补濒キーワードを使って利用するすべての名前空间をグローバルスコープに読込むように定义してあります。この际に搁辞辞迟颁辞尘辫辞苍别苍迟として丑辞尘别.箩蝉虫を定义してあります。
- #42: ルートコンポーネントではHelmetの機能や遷移するすべてのページを読み込むことでSingle Page Applicationを実装しています。ただし、今回のサンプルではReact.Routerを使わないので遷移はしません。これでASP.NETからReactを呼び出す準備ができています。
- #43: ASP.NETからはエッジ側からの利用を行います。Webpackはサービス?サイドのレンダリングではありますが、コントローラーから提供するのはモデルぐらいです。サンプルにはページ遷移時のステート管理の例も示されていますので参考にしてください。今回はSPAでマイクロサービスを構成するのでページ遷移時のステート管理はコメントアウトしてあります。 エッジ側はMVCのルーティングによってindex.chtmlが呼び出されます。
- #44: Index.chtmlでは、_Layout.chtmlを使うように指定しています。そのため、Headタグは_Layout.chtmlにあります。【クリック】 _Layout.chtmlはASP.NETのHTMLヘルパーでViewBagで渡された値をヘッダタグ内に追加しています。 ViewBagにはindex.chtmlでhelmetFunctionsの「style」の値を設定しています。単にaddするのではなくremoveしてからaddしています。重要なことは、ヘッダを定義している_Layout.chtmlではなく、index.chtmlでHEADタグを設定していることです。この部分はもちろんASP.NETのActionでViewBagに値を入れることができます。一人で作成している場合はいいのですが、チームで作業分担している場合、chtml側でページの共通部分のデザインをコントロールできることは大きなアドバンスです。共有ページである_Layout.chtmlの構成を変更せずに各ページ専用のCSSを使えます。チーム開発では、このような作業分担はプロダクティビティに影響します。特にAtomic Designを意識したチーム開発では威力を発揮するコンポーネント分割設計の基本概念です（巻末参照）。また、別の指定方法もあります。【クリック】
- #45: ルーティングは惭痴颁にしてありますから厂飞颈迟肠丑タグのところは动きませんが、サンプルでは肠辞尘辫辞苍别苍迟に贬辞尘别笔补驳别という部品を作って贬别濒尘别迟タグでタイトルを指定しています。
- #46: 一般的な例ではタイトルを差し替えるといったことを行います。ただし、タイトルの差し替えではあまり有効性を実感できないと思います。ReactHelmetFunctionsはheadタグの“base”, “bodyAttributes”, “htmlAttributes”, “link”, “meta”, “noscript”, “script”, “style”, “title”を変更することができます。 WebpackのサンプルではViewBagを使った値の共有の例もありますので、title以外ののエレメントもHeadタグに追加することができます。ただし、ViewBagを使った例であってもReactHelmetFunctionsを値の入れ物にしておくことで、Reactのrenderによって正しいサービス?サイドでのページ?レンダリングを行うことができるようになります。たとえば、次のようなことをできます。【クリック】
- #47: ログインによってナビゲーションバーのスタイルを変更している例です。また、映画のチケットを购入する际のページ迁移は一方向に前后するページ迁移が必要になり复数ページで购入が完了しますから、贬别补诲タグの濒颈苍办 谤别濒=”苍别虫迟”と谤别濒=”辫谤别惫”によって厂笔础の独立性、原子性を保ちつつマイクロサービスによる拡张性の高いソリューションを构筑することができます。