前回のお話
ツール作成に使用する言語を何にするか悩んだ結果、Web系で作成することに。
手を動かすも構築がよくわからない
とりあえず考えるより行動、まずMaterial UIを動かすところから始めることにしました。
一通り入れて起動はできましたが改めてやってみるとよくわからず解決したことが多いので手順メモです。
まずMaterial UIとは
Install Material UI, the world's most popular React UI framework.
なるほど、Reactで使えるUIフレームワークなんですね。
Material UI uses Emotion as its default styling engine.
Emotionというスタイリングエンジンをデフォルトで使用しています。なるほど。
Material UI uses the Roboto font by default.
Robotoというフォントをデフォルトで使用しています。ふむふむ
実行するコマンド
コマンドの前に参考記事紹介
非常に参考にさせていただいた記事です、手順はこちらをほぼなぞっています。
とりあえず打ち込むコマンドはこれだけで良さそう
npm install @mui/material @emotion/react @emotion/styled
npm install @fontsource/roboto
楽勝じゃん、即終わるわねこんなの。フフーン
・・・と思うじゃん？
実際打ってみたらエラーを吐きました。
当然、そもそもこれはReactで使えるものなので、前提のReactを入れないといけません。
実際はReactが原因じゃないんですけども。
React入れればいいじゃんと思うじゃん？
そもそもnpmが実行できません。まずNode.jsを入れましょう。
yarnやら色々ありますが、コマンドプロンプトで実行するための記述が違うので一旦npmにしています。
違いについては先人が記事を書いてくださっている～！！！！大感謝～～～～！！！！！
個人的には圧倒的に処理速度が早かったので、npmよりyarnが好きです。
Reactを構築
このコマンドでtestappフォルダにReactの開発環境を作成します。
npxで雛形をダウンロードして構築することができます。
npx create-react-app testapp
Enterを押すとこの文章が出てくるので、y押してEnter押します。
create-react-app@5.0.1
Ok to proceed? (y)
しばらくするとnpmのコマンドがいくつかでてくるすこし上のところに、この文章が出てきます。
Created git commit.
Success! Created testapp
Success！やったね
Reactが構築できたか確認
まず先ほどのコマンドで作成したフォルダ（testappフォルダ）に移動します
cd testapp
そしてこのコマンドを実行すると、ローカルで初期画面が表示されるように
npm start
Compiled successfully!
と出てきたらここにアクセス
http://localhost:3000
びえ～～～～！！！やったよ！！動いてるよ～～～～～！！！！！！！！
コマンドプロンプトを閉じたらサーバーも閉じてくれます。
閉じずにそのまま続行します
いよいよMaterial UIを導入
コマンドプロンプトで先程のtestappフォルダに移動し、これを打つだけ。
npm install @mui/material @emotion/react @emotion/styled
フォントはなくても動きますが、見た目は本当に大事、フォントだけに
npm install @fontsource/roboto
これでひとまず、Material UIが動くようになりました！
次にやりたいこと
まずは画面をどうするか、大まかなデザインに入りたいと思います。
①家計簿アプリと②ゲーム特化タスク管理アプリの2つを考えていますが、②が先ですね・・・
なにしろ私がめちゃくちゃほしいので・・・・・・・・
お読み頂きありがとうございました。エルシアでした
参考記事