React+materialUIが便利という話

初めに

この記事はKogakuin Univ Advent Calendar 2022 – Adventar 4日目です。

最近就職してWeb系のシステムの保守をしているので、興味を持ちそのシステムのAPIを使ってみたら思いのほか便利だったので紹介します。

リッチなWebサイトを作りたい人必見！(ほんとか？)

去年のは払い忘れて消えちゃったけど、今回は三年は残ります

React,MaterialUIとは

まず、ReactとMaterial UI について説明します。

React

ReactとはWebのフロントエンド開発に特化したJavaScriptのAPIです。今回はTypeScriptで書いています。

特徴として

• 動的表示ができる
• 表示が変わる部分のみが更新される
• その為負担が軽い
• アプリの開発などにも使える
• JSXというHTMLみたいな書き方が出来る
• 処理の構造上メモリの消費が多い

といったものがあります。

前述した通り動的表示が多いページにはお勧めのAPIです！

Material UI

Reactの補助ライブラリになります。サイドバーなどのコンポーネントあからじめレイアウトが設定され欲しいものを配置するだけ簡単におしゃれなUIが出来ます。

私みたいなデザインセンスもなければReactに対する理解もない人におすすめのライブラリです。

導入方法

そんな素敵なAPIを導入すればどうすればいいのでしょうか？

めんどいから割愛します。←え？

ひとつ言っておくと業務用とかじゃないなら

npx create-react-app [FileName]

で環境構築しましょう。一から構築するのは大変めんどいので。

実際のコードの例

<Drawer
          variant="permanent"
          classes={{
            paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
          }}
          open={open}
        >
          <div className={classes.toolbarIcon}>
          <div className={classes.drawer}>
          <AccountCircleIcon/>
          </div>
          <Typography
              component="h1"
              variant="h6"
              color="inherit"
              noWrap
              className={classes.drawer}
            >
              管理者
            </Typography>
            <IconButton onClick={handleDrawerClose}>
              <ChevronLeftIcon />
            </IconButton>
          </div>
          <Divider />
          <List>
            <NavLink exact to="/" className={classes.link} activeStyle={current}>
              <ListItem button>
                <ListItemIcon>
                  <HomeIcon />
                </ListItemIcon>
                <ListItemText primary="トップページ" />
              </ListItem>
            </NavLink>
            <NavLink exact to="/products" className={classes.link} activeStyle={current}>
              <ListItem button>
                <ListItemIcon>
                  <ShoppingCartIcon />
                </ListItemIcon>
                <ListItemText primary="商品ページ" />
              </ListItem>
            </NavLink>
            <NavLink exact to="/unti" className={classes.link} activeStyle={current}>
              <div className="push">
              <ListItem button>
                <ListItemIcon>
                  <ChatIcon />
                </ListItemIcon>
                <ListItemText primary="うんち" />
              </ListItem>
              </div>
            </NavLink>
          </List>
        </Drawer>

こんな感じのコードを書くだけで

最後に

卒業しているのに気合い入れて書くのも怠いなと思って適当に書きましたがいかがだったでしょうか。書き方や導入方法は何もわからなかったと思いますが、便利さは伝わったと思います。最後に飽きて止まっている書き途中のWebページを張って終わりにしたいと思います。