【デザイナー向け】GitpodとSvelte+Windiでブログレイアウトを再現してみよう〜①基礎編〜（社内勉強会資料）

# Gitpodでサクッとカンタン♪ Svelte＋Windiを試してみよう:relaxed:

こちらは社内勉強会資料です。
第2回目はこちら　👉 [【デザイナー向け】GitpodとSvelte+Windiでブログレイアウトを再現してみよう〜②実践編〜（社内勉強会資料）](https://qiita.com/naomunaomu/items/b6b549afe97159beddbf)

## ゴール
1. 既存のスタイリングを改修してみよう
1. コンポーネントの作り方を覚えよう
1. ブログレイアウトをWindiで再現してみよう <-②応用編にて解説します

## こんなひとにオススメ！
- ReactやVueはちょっと難しいけど、イマドキのフロントエンド開発の流れを体験したい
- 開発環境の構築にいつも時間がかかる…ササッと進めたい！

### Windiとは？
![スクリーンショット 2021-06-07 9.26.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/770dd289-2407-f2a7-c20d-2fc2b47f091f.png)
公式:[Windi CSS](https://windicss.org/)

Windi CSSとは、Tailwind CSS2.0に互換性があるutility-firstのフレームワークです。
Tailwind CSSよりもビルド時間を短縮し、リロード時も高速に表示できます。
自分で用意したHTMLに、Windiのclassを付与するだけでスタイリングができます。

![スクリーンショット 2021-06-07 9.40.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/9da1259b-a574-9271-1eee-11cb91a4f962.png)
公式:[Borders | Windi CSS](https://windicss.org/utilities/borders.html)

border-radiusの場合、四方の角ごとの指定も可能等、かなり細かく指定ができます。
チートシートもグラフィカルで、直感的に理解しやすいので、とっつきやすいですよ。

### Svelteとは？
JSのコンパイラーと言われますが、立ち位置としてはReactやVueといったライブラリーに近いです。
とにかく高速で軽量、ベンチマークでReactの35倍、Vueの50倍速いと言われています。
個人的には、変数や値の受け渡しが非常に簡単なため、JSに馴染みがないデザイナーでも、直感的に書きやすいと思います。

参考:[君はVue,Reactの次に来るSvelteを知っているか？](https://qiita.com/oekazuma/items/d3d97f78466be983b19f)

### Gitpodとは？
GitHub・GitLabで使える、オンラインIDEです。
ブラウザ上でVSCode風の開発環境を構築してくれます。
参考:[Gitpodが最強過ぎる件について](https://qiita.com/mouse_484/items/394a4984f749cc201422)


## まずは準備:v:

 :writing_hand:[Githubアカウントの作成](https://github.co.jp/)
上記のサインアップからアカウントを作成
参考：[【2019年1月現在】GitHubアカウント作成方法](https://qiita.com/okumurakengo/items/848f7177765cf25fcde0)

 Githubにログインし、[こちらの勉強会のテンプレート](https://github.com/miinm030/sveltekit-typescript-windicss)にアクセスし、「Use this template」（）を押して、自分のリポジトリにファイルをコピーする
![temp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/502fecec-81b5-c7b1-6c73-a38a0f93284d.png)


自分のリポジトリに移動したら、ページ下部のREADME.mdを右上の鉛筆マークから編集し、下記赤枠内を自分のアカウント名に修正して保存する。
![temp2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/d171639d-ea72-2eb9-fd8d-2f297943a7d1.png)
:warning:ここを変更しないと、コピー元のテンプレを更新してしまうので注意！:warning:

README.mdを保存したら、「Open in Gitpod」からGitpodを起動！
![gitpod.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/50e8f633-3ecd-7415-6988-7c65af96862a.png)

Githubのアカウントでログイン
![スクリーンショット 2021-06-07 10.43.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/c0dc60e6-7802-79be-df77-c2fe3bc3157e.png)

ログインに成功すると、ブラウザ上でエディターが立ち上がります:v:
黄色い枠で囲ったタブでブラウザの表示テストができるので、コードと見比べながら書いてみましょう。
![gitpod2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/cd8b6096-9118-7522-e6cd-c3473acaacb1.png)


### Windiってどうやって使うの？
環境が用意できたら、実際にWindiを使ってみましょう。

Windiはutilityのclassを付与するだけでスタイルが当てられます。
例えば文字色を赤くしたいときは、下記のように設定するだけです。

```sass
<p class="text-red-500">赤くなる</p>
```

カンタンですよね！
このclassはWindiで予め決められており、チートシートとしてドキュメント化されています。
チートシートの使い方もカンタンです♪

[Windi CSS](https://windicss.org/)にアクセスし、⌘+K、または画面右上の検索フォームから、使いたいプロパティ名を検索します。
![スクリーンショット 2021-06-07 18.10.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/5e50ca6d-fdd4-28b3-674b-6aa34e283d43.png)
![スクリーンショット 2021-06-07 18.06.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/850cd7d3-baf1-3d55-c6fe-68ebd7650943.png)

検索結果をクリックすると、該当するプロパティの掲載ページに飛びますので、そこで使用するプロパティを探してみましょう。

![スクリーンショット 2021-06-07 18.07.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/3c15878b-636d-39b2-4248-1f483316b3c5.png)

チートシート便利〜！:qiitan:

#### :hushed:この[hoge-500]の数字って何？
Windiでは、デフォルトでカラースキームが用意されています。

![スクリーンショット 2021-06-07 18.16.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/4ce35309-ad0d-1d2b-8c4a-8203855f705a.png)
公式:[Colors](https://windicss.org/utilities/colors.html)

red-500を指定した場合、#ef4444が表示される仕組みです。

（これらはもちろんカスタマイズできるため、実際に使用する場合は
プロジェクトごとに好きな色へ設定してください）

## やってみよう！ハンズオン編:v:

### ①先程のチートシートを参考に、色や書体など、自由に変えてよう！

### ②子コンポーネントの文言を変更してみよう！

----

以下箇条書きで追加

#### そもそもコンポーネントってなんだっけ？
簡単にまとめると、UIを使い回し可能な状態にまとめた部品のことです。
WEBサイトで例えると、複数のページで共通して使用する、headerやfooter等が該当します。

#### コンポーネント化するメリット
主なメリットとして以下2点があります。

1. 修正や更新の保守がしやすい
1. 複数人で開発がしやすい

例えば100ページ以上あるECサイトにて、headerやfooterを1ページずつ更新するとなると、気が遠くなりますよね…
コンポーネント化しておけば、それらの更新は1箇所のみでOKです！
また、デザイナー以外がページを修正する際も、レイアウトをコンポーネント化することで、
見た目を崩さず、文章や画像だけを修正することができます:relaxed:

#### コンポーネントの親子関係について
Svelteコンポーネントには、親子関係の概念があります。

例えばIndexページでカード型のUIを使用する場合、
レイアウトだけ共通化して、文章や画像は適宜変えたい・・といったことがありますよね。

この場合、カード型のレイアウトだけを1つのコンポーネント（Card.svelte）として切り出し、
適宜変更したい文章や画像をIndexページで管理することができます。

こうした構造を、Index.svelte（親）からCard.svelte（子）へ情報を受け渡す親子関係と言います。

----

以上のコンポーネントの親子関係を踏まえて、親子関係にあるコンポーネントの文章を変更し、
コンポーネントの概念を学んでみましょう📖

#### Card.svelte（子）の赤枠内のdescriptionを変えてみましょう！
![スクリーンショット 2021-06-07 18.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321220/dc7776cc-7e7c-bae2-9cf2-d56207e542d4.png)

先程の親子関係の説明の通り、
子コンポーネントの文章を変更する場合は、親コンポーネントに変更を加えます。
大丈夫、こちらの変更もカンタンです:relaxed:

```vue:Index.svelte
      <Card
        title="タイトルタイトルaaa"
        category="お昼ご飯"
        description="山路を登りながら、こう考えた。智に働けば角が立つ。..."
      />

```

上記のdescriptionの項目を変更するだけでOKです！
他のtitleやcategoryも自由に変更して、遊んでみてください。


### ③自分で子コンポーネントを作ってみよう！

予め用意してあるheaderコンポーネントを参考に、footerを自分でコンポーネント化してみましょう。


### ④自由にページや子コンポーネント作ってみよう！👍
ここまでで一通りの作り方を覚えたので、自由にコンポーネントを作ってみてください。


## まとめ

いかがでしたか？SvelteもWindiもカンタンでびっくりしませんか？:thumbsup:
次回は②実践編として、実際にブログレイアウトを再現していきましょう！

②実践編こちら　
👉 [【デザイナー向け】GitpodとSvelte+Windiでブログレイアウトを再現してみよう〜②実践編〜（社内勉強会資料）](https://qiita.com/naomunaomu/items/b6b549afe97159beddbf)