初めに
先日初の制作物として自分用のポートフォリオサイトを公開しました。
その時に使っていたStyled-Componentsについてまとめていきます。
自己紹介
こんにちは。yabuです。
今年大学に入りプログラミングの勉強を始め、少しずつプログラミングがどんなものなのか、プログラミングで何をすることができるのかがわかってきました。
今の制作物はポ－トフォリオサイトのみですがこれからたくさん作っていきたいと思っています。
この記事は備忘録や自分で成長を感じるため、そしてなによりもアウトプットのために書いています。
おまけに共有できたらなと思っています。
初心者視点だとこのような考えもあるのだな程度に見ていただけたら幸いです。
Styled-Componentsとは?
まずStyled-Componentsって何と思われた方がいるかもしれません。その方のために少しだけ説明させていただきます。
Styled-ComponentsとはCss in Js のうちの一つ。 Javascript内にCssを書いても動作するようなプログラミング方法です。
これを使うことによって要素に名前を付けて見やすくなったり要素ごとにCssをかき分けたりできます。
本来ならreturnないに下のような形で書くと思います
<div className='Profile'>
<h3>My Name</h3>
<p>My Profile</p>
</div>
.Profile{
background-color:#f9f9f9;
padding:20px;
border-radius:5px;
}
.Profile h3{
font-size:40px;
}
.Profile p{
font-size:8px;
}
このように書くと思いますが、Styled-Componentsではまずはインストールします。
npm install styled-components
これでインストール出来たら下のように記述して、コードを書いていきます。
import React from 'react';
import styled from 'styled-components';
const ProfileContainer = styled.div`
background-color:#f9f9f9;
padding:20px;
border-radius:5px;
`
const Title = styled.h3`
font-size:40px;
`
const Description = styled.p`
font-size:8px;
`
const App = () => {
<ProfileContainer>
<Title>My Name</Title>
<Descripion>My Profile</Descripion>
</ProfileContainer>
}
export default App;
このように記述します。
それでは感想を次のところで書いていきます。
メリットに感じたこと
メリットに感じたことはclassの名前を考えることがなかったので簡単だった。
これはとても自分にとってはメリットでした。
一目で何を書いているタグなのかがわかりやすく情報の管理が適切にできた。
これも重要で、分かりやすいことでタグの中に<ListContainer>とかがあれば、
ここにlistがたくさんあるんだなーなどと感覚で分かるようになるのでかんがえることが減ってやる気も維持できます。
そして、Cssファイル分の一つのファイルが減ること。
また、Reactはコンポーネントとしてファイルが増える傾向がある？？ので一つ一つのCssのファイルを減らせるのならこれだけで多くのメリットなのではないでしょうか。
デメリットに感じたこと
こちらがとても大きく感じましたが、初心者ゆえのものだと思うのであまり気にしなくてもいいでしょう。
Cssでいうところの
*{}がわからず作りずらかった。
そして、レスポンシブ対応がしずらかったことと、
ひとつひとつのものにstyledを付けるのが少しめんどくさかったということ。
これら３つが目立ったが、上手なプログラマーはこの課題をどのように解決してコードを書いているのか、気になっています。
それらを調べて、脱初心者を目指します！！
最後に
今回はサイトを作るときにStyled-Componentsを使ってメリットデメリットを感じながら作っていまして、わたしにとってはcssファイルを共有して、インポートしてしまった方法が一番楽に感じました。ほかにもcssを付ける方法があるのでそれもしてみようかなと思います。