ChiYo

こちらの記事を参考にGatsbyを使って私のおすすめマンガを紹介するサイトを作ってみる

ChiYo

ここのサイトも全体の仕組みとして分かりやすかった

ChiYo

そもそもReactってなんだろう？

JavaScriptライブラリのこと
Reactの特性のおかげで、高速な処理ができるらしい
しかもコンポーネントベースで開発できるから修正とかに対応しやすくなっている

しかも色々なフロントエンドに利用されているとのこと

ChiYo

ライブラリ？フレームワーク？って何のこと？

すごく分かりやすかった！！

ライブラリ→IKEAに家具を買いに行く（もう家は作ってある）
フレームワーク→モデルハウスを建築する（カスタマイズの幅が狭い）

つまりこれから部品を色々使ってサイトを作っていくのか！

ChiYo

インストールして画面表示する所まで来れた！
ファイルの中身を変えても保存するだけで秒で反映される👀

docusaurusの時はページの中身を変えたらbuildとかdeployしないといけなかったからめちゃめちゃ爆速に感じる🚀
これがGatsbyの力・・・

ChiYo

今日のYWT

Y

・Reactについて調べる
・ライブラリとフレームワークについて調べる
・Gatsbyをインストールして、ページを作って編集する

W

今まで名前しか知らなかったReactが何者か分かった
分かったお陰でこれから何を使ってサイトを作ろうとしているのか理解することができた👌🏻

docusaurusとの使い勝手の違いにも気がつけた

T

このサイト作りがひと段落したら、他のライブラリを使ってサイトを作って比べてみたい

今日はここまで！
続きは明日〜🏃🏻‍♀️

ChiYo

srcディレクトリの中にCSSを入れるためのディレクトリを作って、スタイルシートを作った

作ったCSSが反映されるようになるためには、importを使う！
これはjsのモジュールを他のファイルから読み込むシンクタックスとのこと

ChiYo

シンクタックスってなに？？

構文・文法・書き方のルール的なことらしい
なるほど
（会話で使うことはなさそう・・・😅

https://wa3.i-3-i.info/word18357.html

ChiYo

export default function Home() {
  return <div className="message">Hello ChiYo world!</div>
}

ここら辺の書き方はCSSの勉強をした時にやったな〜

ChiYo

gatsby-browser.jsファイルを作ってグローバルなスタイリングを指定した

Bootstrapのような外部CSSライブラリを読み込みグローバルに適用したい場合もこちらの手法を用いますのでぜひ覚えておきましょう。

とのことなので、他のコンポーネントセットを使う時にお世話になるのかもしれない

ChiYo

ついにサイト用のプロジェクトを立ち上げ！！

$ gatsby developを実行すると、開発用のページのビルドとサーバーの立ち上げが行われる
サーバが立ち上がっている間は、ページの更新を自動で検知して反映してくれるから、
更新するたびにコマンドを実行させなくてもいい
ここがこの前やったdocusaurusと違う所

ChiYo

$ gatsby new <site-name> <starter-url>やった直後に$ gatsby developやったら失敗した〜！
ちゃんとcd使って新しく作られたディレクトリに移動してから実行しないとダメですね

ChiYo

ブログ用のプロジェクト作るのはこっちだった〜
$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-hello-world
<blog>の所がサイト名になって
https://github.com/gatsbyjs/gatsby-starter-hello-worldがスターターライブラリになるのか

ChiYo

haaderを作ってゆくぅ🤟🏻

ChiYo

exportを使ってheaderの実装をする

そもそも`export`なんだろう？

モジュールを作成する時に使う構文
import文を使用した他のプログラムが使用できるようになる

ChiYo

こんなのが出てきた👀

Something is already running at port 8000
? Would you like to run the app at another port instead? › (Y/n)

どういうことなんだろう・・・

ChiYo

どうやら最初に練習で作ったHello-Worldがport 8000を使っていることが原因らしい
とりあえずHello-Worldには消えてもらう

ここがめっちゃ参考になった

ChiYo

いざHello-Worldを消そうと思ったらHello-WorldのPID（プロセスID）が分からない！！！

実行中のPIDを調べるには$ psを使う

ここまでやって気がついたけど、最初に$ lsof -i :8000やった時にもうPID教えてくれてた😅

最初見方分からなかったけど、多分上下でこういう感じに区切られているんだと思う
ここはターミナルのちょっと分かりにくいところかもしれない

ChiYo

headerできたけどお手本とだいぶ違う・・・
どうしてこんなに違うんだろう
お手本

できたもの

ChiYo

試しにロゴの大きさを0にしてみたけど変化なし

ロゴの画像がおかしいのかな

ChiYo

layoutの方を変えたら変化はあった

ChiYo

コードに間違っているところはなさそうだから、画像をお手本と同じにしてみる

おかしいままだ・・・

ChiYo

スペルミスしてた〜〜〜！！
と思って直したら逆に超小さくなった、あっているのか🤔

数字いじったら大きさとか変わるし合っているのかも

ChiYo

ヒーローコンポーネントを作った

なんだか色々と気になるところはあるけれど、あとで調節すればいい感じになるか・・・？

ChiYo

cssの初期化的なことをしていないから、左側に変な余白があるのかもしれないな〜🤔

ChiYo

とりあえずちょっと調節してみた

ChiYo

-wedkit-line-clamp: 2;の所がなぜか使えない？感じになってる
なにがいけないんだろう

ChiYo

書き直したら行けるようになった
よかった

ChiYo

すごい！！！！
とてもぽい！！！

ChiYo

画像の所は参考として出してくれたサイトを見て、自分が「いいね」した画像が来るようにした
https://source.unsplash.com/user/{USERNAME}/likes/640x360
でもどうやら3つとも同じ画像が出るようになっているので、工夫する必要がありそう

https://source.unsplash.com

ChiYo

footerもできた！

ChiYo

Contentfulの無料プランを作ろうとしたら、そんなプランが表示されなかった
最初にデフォルトで無料のスペースができていることが原因なので、このサイトを参考にデフォルトの無料スペースを削除した

ChiYo

Contentfulのフィールド作成完了！

ChiYo

記事を書いて公開するところまで来た

ChiYo

allContentfulPostが出ない・・・
連携とかに特にエラーは無いんだけど・・・

ChiYo

そもそもExample Key1が作られるって言ってるのに作られてないもんな〜
blogってやつは作られたけど・・・
これじゃいけなかったのかな・・・

ChiYo

最初から確認してみたけど、やっぱりおかしなところはなかった
今日はもう時間切れ・・・・

ChiYo

ここがヒントになるかもしれない
でもgatsby developを実行すると「もうport8000は使われているよ！どうする？」
ってなるから、ここをどうしたらいいのか考える必要がありそう
今実行中のプロセスを殺して大丈夫なのかな？
それともyesを選択して8001のポートを使うか・・・
とにかくもう寝よう😌

https://sixaxd.com/blog/202002161402/