Next.js × Express で日記アプリ制作 part2

ひとし

2020年4月15日 22:46

part2ではBoostrapを利用してトップページと日記投稿ページを作成していきます。

part1ではシンプルなNext.jsの雛形を作りboostrapをインストールしていますので、まだ見ていない方はこちらから見ることをお勧めします。

トップページ作成

トップページの完成イメージは下記の通りです。

スクリーンショット 2020-04-18 17.48.21

トップページはpagesファイルの中に作成してあるindex.jsを編集していきます。下記の様に編集すると上記の画像の様になります。

//index.js
import { Button ,Navbar, Row, Col, Card, ListGroup, ListGroupItem} from 'react-bootstrap';

export default function index(){ 
 return(
   <div>
     <Row>
       <Col xs={12} md={{span: 6, offset: 3}}>
         <Navbar variant="light" bg="light" style={{border:"solid 1px #c2c2c2 ",borderRadius:"5px"}}>
           <Navbar.Brand href="/">Daily-app</Navbar.Brand>
         </Navbar>
       </Col>
     </Row>
     <Row className="mt-2">
       <Col xs={12} md={{span: 6, offset: 3}}>
         <Button href="/addDaily" block>
           日記を追加する
         </Button>
       </Col>
     </Row>
     <Row className="mt-4">
       <Col xs={12} md={{span: 6, offset: 3}}>
         <Card>
           <Card.Header>日記一覧</Card.Header>
             <ListGroup className="list-group-flush">
               <ListGroupItem>
                 <Card.Title>今日のできごと</Card.Title>
                 <Card.Subtitle className="mb-2 text-muted">
                   2020/04/15
                 </Card.Subtitle>
                 <Card.Text>
                   遊んだ
                 </Card.Text>
               </ListGroupItem>
             </ListGroup>
         </Card>
       </Col>
     </Row>
   </div>
 );
}

2行目のimport ~ でBoostrapから使うものを呼び出しているのがわかります。

Boostrapはグリッドシステムと呼ばれるデバイスの画面を12分割し、管理する仕組みを使っています。グリッドシステムは、一連のコンテナー、行、および列を使用してコンテンツをレイアウトおよび配置することができます。またフレックスボックスで構築されているため様々なデバイスに対応します。

次にトップページをこのままにしてもいいのですが1ページの記述量が多く可読性が低いためヘッダー部分と日記一覧をコンポーネント化し分割していきます。

コンポーネントとは

何らかの機能を持ったプログラムの部品を作ることです。したがって機能ごとにファイルを分けていきます。

コンポーネントの作成

初めに下記の赤枠で囲まれているヘッダー部分をコンポーネント化していきます。

スクリーンショット 2020-04-18 17.48.21

daily-appフォルダの中にcomponentsフォルダを作成し、さらにその中にHeader.jsを作っていきます。

Header.jsファイルは下記の様に編集します。

//Header.js
import {Navbar, Row, Col} from 'react-bootstrap';

export default function header(){
 return(
   <Row>
     <Col xs={12} md={{span: 6, offset: 3}}>
       <Navbar variant="light" bg="light" style={{border:"solid 1px #c2c2c2 ",borderRadius:"5px"}}>
         <Navbar.Brand href="/">Daily-app</Navbar.Brand>
       </Navbar>
     </Col>
   </Row>
 );
}

これによりindex.jsでは下記の様にヘッダーを記述できる様になります。

//index.js
import { Button , Row, Col, Card, ListGroup, ListGroupItem} from 'react-bootstrap';
import Header from "../components/Header"

export default function index(){ 
 return(
   <div>
     
     <Header />

     <Row className="mt-2">
       <Col xs={12} md={{span: 6, offset: 3}}>
         <Button href="/a" block>
           日記を追加する
         </Button>
       </Col>
     </Row>
     <Row className="mt-4">
       <Col xs={12} md={{span: 6, offset: 3}}>
         <Card>
           <Card.Header>日記一覧</Card.Header>
             <ListGroup className="list-group-flush">
               <ListGroupItem>
                 <Card.Title>今日のできごと</Card.Title>
                 <Card.Subtitle className="mb-2 text-muted">
                   2020/04/15
                 </Card.Subtitle>
                 <Card.Text>
                   遊んだ
                 </Card.Text>
               </ListGroupItem>
             </ListGroup>
         </Card>
       </Col>
     </Row>
   </div>
 );
}

変更点は2行目と6行目です。

ブラウザーでの見た目の変化はありませんがindex.jsでのヘッダーの記述は8行から2行に減少しました。

日記投稿ページ作成

完成イメージは下記の通りです。

スクリーンショット 2020-04-15 22.36.07

日記投稿ページはpagesフォルダの中にaddDaily.jsを作成し下記の様に編集します。

//addDaily.js
import { Row, Col, Card, Form, Button} from 'react-bootstrap';
import Header from "../components/Header"

export default class addDaily extends React.Component{
 render(){
   return (
     <div>
       <Header />
       
       <Row className="mt-4">
         <Col xs={12} md={{span: 6, offset: 3}}>
           <Card>
             <Card.Header>lulu</Card.Header>
             <Card.Body>
               <Form>
                 <Form.Group>
                 <Form.Label>タイトル</Form.Label>
                 <Form.Control/>
                 </Form.Group>
                 <Form.Group>
                   <Form.Label>内容</Form.Label>
                     <Form.Control
                       as='textarea'
                       rows='3'
                     />
                 </Form.Group>
                 <Button variant="primary" type="submit">
                   追加
                 </Button>
               </Form>
             </Card.Body>
           </Card>
         </Col>
       </Row>
     </div>
   )
 }
}

またトップページから日記投稿ページに移動するためindex.jsのBottonを下記の様に編集します。

//imdex.js
<Button href="/addDaily" block>
　　日記を追加する
</Button>

ファイルの拡張子を抜いたファイル名がhref=""の中に対応します。

まとめ

part2では日記アプリのトップページと日記投稿ページを作っていきました。

コンポーネント化やboostrapの使い方を覚えるとアプリ制作の生産効率が向上しますので下記の参考から詳しく見ることができますので一読することをオススメします。

次回はMongoDBとこの日記アプリを繋げたいと思います。

参考

美味しいご飯に使わせてもらいますmm