ラーニングパス「初心者向け Web 開発」で JavaScript の書き方をお勉強したので、練習がてら React と Fluent UI をつかってみた。
これといって作るアプリは決めてなかったけど、「とりあえず UI まわりをいじれるようになったら面白いかなぁ」みたいな軽いノリで進める。ちなみに Fluent UI はマイクロソフトの UI フレームワーク。
準備
導入方法は上記のリンク先にあるので、それ通りに進める。まずは Fluent UI のパッケージを導入。
npm install @fluentui/react
ファイル数がかなり多いので、Git を使う場合はパッケージを導入した時点でコミットしておくといいかもしれない。次に、Fluent UI テンプレートを使用してプロジェクトを作る。
npx create-react-app my-app --template @fluentui/cra-template
そして、いつものごとくエラーが表示される。（なんで毎回こういうエラーが表示されるのだろうか）
While resolving: my-app@0.1.0 Found: react@18.0.0 node_modules/react react@"^18.0.0" from the root project Could not resolve dependency: peer react@">=16.8.0 <18.0.0" from @fluentui/react@8.62.4 node_modules/@fluentui/react @fluentui/react@"^8.0.0" from the root project Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
どうやら、依存関係で問題があるようだ。エラーはわかったけど解決策がよくわからなかった。--legacy-peer-deps を使えば解決できそうだけど、どのコマンドに対して使えばいいのかがわからない。npx で作成したときなのか、npm でパッケージを導入したときなのか。ものは試しなので npx のほうにつけることにした。いったん古いプロジェクトを削除して再生成。
npx --legacy-peer-deps create-react-app my-app --template @fluentui/cra-template
すると、コマンドが走りだした。しばらく待っていると、Happy hacking と表示されたので解決できたのかもしれない。ということで、早速 npm start で鯖を立ち上げてみる。
良かった。とりあえずプロジェクト作成はできたっぽい。ただ、これ JavaScript じゃなくて TypeScript なんですよね。。。書き方全くわからんので、Fluent UI 触りながら TypeScript 習得目指して頑張りますかね。。。
ちょっと書き換える
TypeScript よくわからんのですが、とりあえずそれっぽいところにフォームを作ってみます。
import { TextField } from '@fluentui/react/lib/TextField';
import { PrimaryButton } from '@fluentui/react/lib/Button';
export const App: React.FunctionComponent = () => {
return (
<Stack horizontalAlign="center" verticalAlign="center" verticalFill styles={stackStyles} tokens={stackTokens}>
<!--なんか色々書いてある-->
<TextField label="Text Field UI" name="inputStr"/>
<PrimaryButton text='Submit' onClick={showAlert}/>
<Text variant="large">For a guide on how to customize this project, check out the Fluent UI documentation.</Text>
<!--なんか色々書いてある-->
);
};
function showAlert(): void {
alert("Hello!");
}
これで実行してみると、マイクロソフトのサイトでよく見るような UI が表示された。
本当はもっと色々やりたいけど TypeScript わからんな状態なので、勉強しながら試してみたい。
イベントのお知らせ
2022年4月24日（日）に MS Tech Camp #14 を開催します。今回は私「たくのろじぃ」主催で、Blazor を使ったポートフォリオサイト製作と Azure Static Web Apps へのデプロイをやります。 興味がある方は（社会人、学生問わず）ぜひご参加ください！ Youtube での配信ですので、休日はごろごろしながらご覧いただければと思います。もちろん、一緒にやっていただいても結構です！
