まずは実装スタート時点の画面
create-react-appでプロジェクトを作ったので、react-scriptsが画面起動を用意してくれています。
$ yarn start
するとhttp://localhost:3000/ に画面が…!!
枠を表示するコンポーネントを追加
Style in JSを実現するstyled-componentsをインストール
$ yarn add styled-components
TypeScriptのtypeも要るので@typeも入れる。
$ yarn add @types/styled-components
表示するコンポーネントを作成
まずは週間天気の枠を表示するコンポーネント
WheatherWeek.tsx を作成
import React from 'react'
import styled from 'styled-components'
const Container = styled.div`
display: flex;
width: 80vw;
margin: 0 auto;
`
const Wheather = styled.p`
border: solid 1px black;
flex: 1;
height: 80px;
`
const Box = styled.span`
line-height:80px;
`
export const WheatherWeek = () => {
return (
<Container>
<Wheather className="monday"><Box>晴れ</Box></Wheather>
<Wheather className="tuesday"><Box><Box>雨</Box></Box></Wheather>
<Wheather className="wednesday"><Box>曇り</Box></Wheather>
<Wheather className="thursday"><Box>晴れ</Box></Wheather>
<Wheather className="friday"><Box>雨</Box></Wheather>
<Wheather className="sataday"><Box><Box>曇り</Box></Box></Wheather>
<Wheather className="sunday"><Box><Box>晴れ</Box></Box></Wheather>
</Container>
)
}結果です。
下の方に週間天気を表示するボックスができましたね。
まだ中身はベタ書きです。
この中身を「今日の天気情報」を取得して反映したいですね。
・・・ということを次回やりましょうー。
さて
今回の学び・課題
export か export defaultを使うか？
一長一短あるようですけど、exportのほうが良さそうですね。
一人で開発する分にはどちらでも良いかもです。
でも、確かにコードの保守性とか考えるとコンポーネントのネームが固定された方が後々に微妙なネーミングが量産されなくて良さそうです。
参考：
https://engineering.linecorp.com/ja/blog/you-dont-need-default-export/
Box要素内のテキストを縦中央位置に置く
これが、意外と、時間かかりました…..！
vertical-align: middle;
これでイケる…..わけではないのですね。
どうやらインライン要素でしか効かないみたいです。
では、FlexBoxの：
Flexbox
display: flex;
align-items: center;
justify-content: center;
これでいけるかと思えば、そうではない。。
flex itemの位置を調整するだけで、item内の縦位置とは別なわけなのですね。
色々やり方があるみたいですけど、item内にもう一つインライン要素を作って
line-height:80px;
としました。
80pxなのはflex itemの縦幅と同じにしています。
参考：
http://www-creators.com/archives/391#i-2
コンポーネントをもっと細かくしてもいいのかも
今回、まずは週間天気の枠を表示するコンポーネントを作りました。
一日分の枠はまたそれ一つでコンポーネントにした方がいいですね。
実装記録のテンプレートを作りたい
この実装記録ですけど、毎度構成を考えるのも大変なのである程度は記事構成の標準化したいですなぁ。
- タイトル
- 前回のリンク
- 初回へのリンク（アプリの目的とか）
- Commitへのリンク記述
では、また〜。
コメント