Styled Componentsを使う準備
今回はStyled Componentsを使う準備。
最初のインポート等は、Part0を見てください。
styled-componentsの利点と欠点
CSS in JSの一つで、JSの中にスタイルを記述できる。
初学者の方の為に利点と欠点を上げます
利点
- CSSファイルが必要なくなる
- タイプエラーを教えてくれる
- コンポーネント単位で装飾するためReactとの親和性が高い
欠点
- 対応したエディタ/それに対応したプラグインが提供されているエディタ上でなければ、シンタックスハイライトやコード補完がまったく効かず、ひたすら単色の文字列を編集していく地獄を見る（筆者はVScodeを使っているのでクリア、どのエディタで対応しているかは把握出来てないですごめんなさい）
- 必要な依存関係/設定が多いのでめんどくさい
- styled-components の仕組みを理解しないと、パフォーマンスに影響を与えるコードが生まれる
- エディタ上で、どれが styled-components か分からなくなる
以上を踏まえたうえで使うかを判断してください。
準備開始
必要なもののインストールはPart0見てください。
Part0の内容が完了している体で述べていきます。
tsconfig.jsonの変更
VS Code の入力補完を効かせるために tsconfig.json へ typescript-styled-plugin を定義する。compilerOptions内に以下を追加
tsconfig.json
"plugins": [
{
"name": "typescript-styled-plugin"
}
],
次にVS Code の設定。以下のプラグインを追加する。
vscode-styled-components
最後に VS Code の TypeScript バージョンを明示的に指定。
コマンド パレットを開いて Select TypeScript version を実行すると選択可能な候補が表示されるので、ワークスペースのバージョンを使用する。ワークスペース内に複数プロジェクトを開いている場合は入力補完を効かせたいソースのあるものを選ぶ。
（環境によっては選択しなくても補完が出来る場合もあるっぽい？）
長くなりましたが準備完了。
サボる準備はできました。
次回は具体的な使い方です
参考にした記事