やりたいこと
・JavaScriptでReactアプリを作る
・アリババ社のCSSフレームワークであるAnt Designを導入する
①Reactアプリを作る
まず、Reactアプリを構築
npx create-react-app react-app
すると、react-appというフォルダが作られ、フォルダへcdしてください
cd react-app
Reactアプリに必要なモジュールが自動で入れられ、package.jsonがこんな感じ
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
フォルダ構成がこんな感じ
アプリを起動してみてください。
npm start
ブラウザで開くと、
http://localhost:3000/
Reactの画面が出たら成功！
②Ant Designを入れてみる
まず、react-app配下にAnt Designの必要なモジュールを入れる
npm install antd --save
すると、package.jsonのdependenciesがこうなるはず
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"antd": "^5.13.2", #ここが追加された
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
これでAnt Designのソースコードが書けるようになった！
③Ant Designで画面を作る
srcフォルダの下にあるファイルは、Reactのコンポーネントなので、ここでAnt Design風の画面を作る
まず、初期段階で作られたindex.jsを微修正
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Test from './Test'; #これから作るAnt Designのコンポーネント
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Test /> {/* Ant Designで作ったコンポーネントを入れ替える */}
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
次に、Test.jsというコンポーネントを作成し、src配下に入れる
このソースでは、シンプルな入力フォームとボタンを配置している～
import React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const App = () => (
<Form
name="basic"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
style={{
maxWidth: 600,
}}
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: 'Please input your username!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
export default App;
すると、もう一度で動作確認
http://localhost:3000/
このように、画面が出たら成功！
終わりに（Ant DesignとCloudScapeそれぞれ使った感想）
このまえ、CloudScapeバージョンのほぼ同じ内容の記事を作ってました（(笑)
CloudScapeとAnt Design両方を試した感想として、個人的にAnt Designが好きだと思います！
Ant DesignはCloudScapeより、実現できる画面設計がもっと幅広く、より細かいCSSの微調整ができ、よりお客様の要望に答えられそうかなと思います。
CloudScapeにはいろいろ制限があり、例えば、各要素の間隔調整のやり方はCloudScapeコンポーネントの属性により調整しないといけないようで、sサイズ、mサイズ、lサイズなど、パラメータが結構限られて、、、AWS風の画面しか作られないか感じました。
一方で、Ant Designは、コンポーネント属性による調整以外に、styleで直接CSS文を打つことで、24pxとか、color: #FFFFFFとか、いろんな微調整が一緒にできます「提供された綺麗なコンポーネント+伝統的なCSSでの微調整」で、より細かい画面設計ができます。
しかし、CSSがもともと苦手な人だと、Ant Designを使う場合、まずpaddingやmarginなど、基礎的なCSSの概念を勉強したほうがいいかもしれませんね。
CloudScapeはシンプルという特徴があっで、あまりCSSが詳しくない人でもコンポーネントをインポートすれば、すぐAWS風の画面がとりあえず作れます。
開発者のCSSスキルや、画面設計の要望、開発時間などを考慮しながら、必要なCSSフレームワークを選定することが大事だと、今回改めて感じました！
参考サイト