前回 Fluent UI を使ってなんか Web アプリっぽいの作ってみたいなぁ
と思ったが、Fluent UI を使うには TypeScript の知識が必要で、そもそもフロントエンドのフレームワーク React の知識が必要、しかも React をやるには JavaScript の知識が必要になるので、芋づる式に前提知識がたりないことに気づいてしまった。
結局、Fluent UI を触るためには JavaScript を知り、React を知り、TypeScript を知る必要があるという結論に至る。とりあえず学習コンテンツを漁っていたら、ありました。MS Learn に。
まずは GitHub からサンプルをクローンしてきて、その環境内で色々作っていくようだ。
Hello, World
とりあえずプログラミングの第一歩は Hello, World ということで実装。 public や src があるが、public には html ファイル、src には JavaScript ファイルを置いていくみたい。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Recipes</title> </head> <body> <div id="app"></div> <script type="module" src="/dist/index.js"></script> </body> </html>
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<h1>Hello, World</h1>,
document.getElementById('app')
);
この jsx という拡張子は JavaScript + HTML が記述できるみたいで、基本的に render 関数の中にマークアップしていけば良さそう。Blazor だと Razor 構文といって HTML の中に C# を組み込むので、対称的になっていてい面白い。ただ、引数の中に HTML を記述していくのは個人的になんか違和感を感じる。
さらに dst/index.js を見てみると、createElement で HTML 要素を生成するような記述があることがわかります。なるほど。
コンポーネント
src に App.jsx を作成して、こんな風に書く。
import React from "react";
function App() {
return (
<article>
<h1>Recipe Manager</h1>
</article>
)
}
export default App;
function で関数 App を作成して、return にマークアップを書くとそれが戻り値として反映されるということかな。
次に App を呼び出すために index.jsx を変更する。
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App';
ReactDOM.render(
<App/>,
document.getElementById('app')
);
これで、render で App コンポーネントを呼び出されるので、Web ページ上に App 関数で返したマークアップが描画されるわけですね。このへんは Blazor と少し似ているところがあって、Blazor の場合も razor 形式のファイルを作成すればそのままコンポーネントとして扱うことができますね。
動的データの表示
src ディレクトリに RecipeTitle.jsx を作成して記述。
import React from "react";
function RecipeTitle() {
const title = "Mashed potatoes";
return (
<h2>{ title }</h2>
)
};
export default RecipeTitle;
コンポーネントを作るときの手順と同様に、どの要素にはさみたいかを指定すればいい。サンプルでは App.jsx で定義していた h1 タグの下に追記。
import React from "react";
import RecipeTitle from "./RecipeTitle";
function App() {
return (
<article>
<h1>Recipe Manager</h1>
<RecipeTitle/>
</article>
)
}
export default App;
これでマッシュポテトが追加された。あと、動的なデータは { } で囲むみたいでハンドル言うらしい。これだけでは動的な感じがよくわからないので、RecipeTitle の下に
<p>{ Date(Date.now) }</p>
を追記してみたら、時刻が表示された。更新するたび値は変化するので、動的ということがわかる。
スタイルシートの追加
スタイルシート (css) に関しても src ディレクトリに入れるみたい。とりあえず index.css を作る。
article { margin-left: 10%; margin-right: 10%; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 14px; }
作ったスタイルシートはインポートすれば適用される。article 要素は App.jsx に記述していたので、その先頭に追記。
import './index.css'
いい感じにスタイルが適用されている。とりあえず、作ったファイルを導入するときは import を使えばいいことがわかった。
なるほどなぁ。このあとは React プロジェクトの作成方法についての説明がある。一から環境を作る場合は Snowpack を使うといいらしい。よくわらからんけど、Snowpack があれば jsx ファイルをビルドしたときに、出力先を自動で決められるのと、必要なモジュールを読み込んでくれるのかな？
なんにせよ、今回のラーニングモジュールで学んだのはディレクトリごとにファイルを分けて管理したときは import で参照できるのと、ReactDOM を使って render 関数にコンポーネントとかを書いていけば、HTML に表示される。ただ、複数の要素は直接書けないので、どこかでコンポーネントを束ねる必要があって、それを App.jsx に書いたという感じかな。ただし、レンダリングしたい部分には index.html に "app" 要素と script 要素が必要。
Blazor の前提知識があると、コンポーネントの扱いとかレンダリングとかが何となく分かるかも？とは思った。
イベントのお知らせ
2022年4月24日（日）に MS Tech Camp #14 を開催します。今回は私「たくのろじぃ」主催で、Blazor を使ったポートフォリオサイト製作と Azure Static Web Apps へのデプロイをやります。 興味がある方は（社会人、学生問わず）ぜひご参加ください！ Youtube での配信ですので、休日はごろごろしながらご覧いただければと思います。もちろん、一緒にやっていただいても結構です！
