ライスC#やらUnityやらを勉強していて、これはメモっといたほうがええやろ、ということを書くつもりですこの広告は、90日以上更新していないブログに表示しています。Razor前回の記事spi8823.hatenablog.comさて、前回はBlazor用のテンプレートプロジェクトを作成してデバッグ実行してみるというところまでやりました。これだけでは何のありがたみも面白味もありません。この記事では「BlazorによってどのようにHTML内にコードを埋め込むことができるのか」を説明します。前提知識こういう技術的記事は前提とする知識をあらかじめ言っておくのがいいらしい。C#で「for文」とか「if文」とか基本的なロジックを書くことができるHTMLで文字列を表示したりボタンを表示することができるJavaScriptでHTMLで表示したボタン押下時の処理を書くことができるWebアプリケーションを作りかけたことがあるこれくらいでしょうか。この記事に興味がある人ならばだいたい大丈夫だと思います。Razor構文HTML内にC#を埋め込むための文法を「Razor構文」と呼びます。この「Razor構文」というものはもともとかなり前からC#のWEBアプリケーションフレームワークである「ASP.NET」というものに含まれていたものです。この時はRazor構文をあらかじめサーバー側で解釈してHTML+javascriptとしたものをブラウザに送っていたという程度のものだったようです(詳しくは知らないがまあ今となってはどうでもいいでしょう)普通のHTML文書の中に「@」で始まるコードを書くとそれがC#のプログラムだと解釈されていろいろやってくれます。以下のように書くことができます。番目の文字列</p>」といったようにHTMLを記述することができます。そのHTML要素の中でもC#の変数である「@i」という書き方ができるのもわかります。このように、BlazorではRazor構文を使ってHTMLの中にC#コードを埋め込むことができます。ちなみにBlazorというのも「Web」+「Razor」から来た造語らしいです。RazorファイルRazor構文はRazorファイルという「*.razor」という拡張子のついたファイルに記述する必要があります。(「*.cshtml」というファイルも存在しますがこれはレガシーだという話をどこかで見た気がする)この「*.razor」というファイルを一つのクラスとして考え、Razor構文ではそのメンバ関数やメンバ変数などを記述していくという解釈をすると考えやすいでしょう。以下にこの記事で説明したい事項を詰め込んだRazorファイルを記述します。例文Sample.razor見ての通りなんの感情も入っていないコードですが、以下ではこの例文をもとにしてRazor構文を見ていきます。「@page」で始まる記述のことを「pageディレクティブ」と呼んでいるようです。このように書いて実行すると、例えば「localhost:12345/sample」というアドレスからこのRazorファイルによって記述されたページにアクセスすることができます。(12345の部分は環境に応じて変化します)すなわち、pageディレクティブではページのルーティングを設定することができます。System.Collections.Generic」この行は通常のC#の「using」と同じことをしています。}」この部分のように先頭に「@code」と記述し波かっこでくくったブロックによってメンバ変数やメンバ関数を定義することができます。13行目で「StateHasChanged();」としていますが、これはもとからRazor構文内で利用することのできる関数で、ページ内の変数などが書き換えられたことを明示的に通知しページの再描画を促します。これを記述せずとも自動で更新されることもありますが、どのようなタイミングで更新されるのかは把握できていないです。(おそらくボタンクリック時に更新するようになってる?)15行目「Click!!」この部分ではHTMLのbutton要素を表示しています。"AddText"」という部分ではボタンがクリックされた時のイベントにあらかじめ定義しておいた「AddText」という関数を設定しています。}」この部分ではC#のforeach文を使ってメンバ変数である「Texts」の要素をそれぞれpタグによって出力しています。「Texts」の中身はボタンクリック時に「AddText」関数で追加されていきますから、それと同時に行数が増えていきます。実行結果このファイルがある状態でデバッグ実行し、「~~/sample」へアクセスすると以下のようなページが表示されます。ボタンを数回クリックすると以下のようになります。次の記事ではRazor構文によって記述したものを別のRazorページから利用するRazorコンポーネントについて触れる予定です。World」までこの記事ではインストールから初めのデバッグ実行までを順を追って案内します。2019の最新版をインストールvisualstudio.microsoft.comこことかからダウンロードしてインストールしましょう。同じVS2019でもバージョンが古いものは対応していないので最新版に更新しましょう。下の図のように「ASP.NETとWeb開発」の項目を含めてインストールすることに注意してください。3.0のランタイムをこことかからダウンロードしてインストールしましょう。Studioが正式に対応した今は必要ないかもしれません(未確認)。「新しいBlazorアプリを作成します」と表示されるので、「Blazorサーバーアプリ」を選択して作成。WebAssembly」と書かれた2つはこの記事が執筆された時点では正式なリリースではないので無視してかまいません。ここまですれば自動的に実行できるプロジェクトが作成されます。Express」と書かれたボタンをクリックしましょう。world!」と出力されたページが表示されています。このページがどこで書かれているかを少し覗いてみましょう。プロジェクトの「Pages」というフォルダを見ると「Index.razor」というファイルが作られています。このファイルに先ほど出力されていた文字列が記入されています。world!」の正体、というわけです。これだけではまだC#らしいことは何もしていません。次の記事ではHTML内にC#を記述するための「Razor構文」について見ていきたいと思います。Frameworkやりたいこと例えば商品(Product)をデータベースで管理したくてかつ商品が会社(Company)の情報を持っていて欲しいとき。クラスの入れ子になっているクラスをデータベース管理したいとき。hogehoge)しようとしても次のように怒られると思う。Companyに主キーが無いぞ!出直してこい!!これはCompanyというクラスを別のテーブルに突っ込んで管理しようとしてるからだ(と思う)が、わざわざそんなことしてくれんでもええのに......となる。要は別のテーブルにではなくProductのテーブルに突っ込んでくれればすむ話である。}}親のテーブルに突っ込みたいクラスに「Owned」という属性をつけているだけである。これを使うにはNugetとかでMicrosoft.EntityFrameworkCoreを入れておく必要がある。することによってProductのテーブルに「Maker_Name」とか「Maker_Location」とかのカラムが追加されてそこからMakerが読み取られるようになる。Makerを別のテーブルに突っ込んでたりもしないので「Companyに主キーが必要だ!」とかも言われずにデータベースを作ることができる。Formsでいうコントロールみたいなものだと思う。詳しくはこのページに書いてある。/>こうすることでHogeというコンポーネントが作られたことになる。[Parameter]という属性を付けた変数はこのコンポーネントを使用するときに外部からアクセスすることができる。このコンポーネントは外部からTextという値に代入された文字列をテキストボックスに表示して編集できるようにしている。作成したHogeというコンポーネントを使用するには以下のようにすればよい。/>}見ればわかる通り、作成したRazorコンポーネントのファイル名を普通のHTMLタグと同じ感じで書くことでRazorコンポーネントを使うことができる。3.0ではこういう風にしてWEBアプリケーションを作っていくことになるのだと思う。試したわけではないので多々間違っているところもあると思うが許してほしい。Programに登録するこのあたりを見るヨロシ。versionが最低でも18932でないとダメだよ。WSL2のインストール方法はこの辺りをみれ。Homeでも動くじゃん!!って思ってたので肩透かしを喰らった感。Home向けに来ると信じて待つか......。Homeにインストールすることはできない模様。issueとかで「WSL2で動いてるLinux上でDockerを動かすのがいいよ」って言ってたのでおとなしくそれに従いましょう。3.0+RazorでHTMLを描画する関数を作る方法@helperとかHtmlHelperとかIHtmlContentとかいろいろ惑わされたのだけど、次のようにするとよさそう。}}この書き方は以下のgithubのissueに書いてあった。したりしましたがエラーが出てコンパイルできないようです。privateやprotectedでも同じことを言われるのでそもそもこれはrazor独特の書き方であり普通のC#と一緒には考えられなさそうです。3.0+RazorでHTMLを描画する関数を作る方法Tweet広告を非表示にするコメントを書くもっと読む2019-07-17プライバシーポリシーなんか書けって言われた当サイトに掲載されている広告について当サイトでは、第三者配信の広告サービス(Googleアドセンス)を利用しています。使用することがあります。当サイトが使用しているアクセス解析ツールについて当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。