Zenn
Open32

SvelteKit + microCMS チュートリアル

Svelte
hagiwarahagiwara

へー

TypeScriptはJavaScriptのスーパーセットであり、型情報を追加するための機能が追加されています。TypeScriptでは、引数の型の後に ? を追加することで、その引数がオプショナルであることを示すことができます。

hagiwarahagiwara

なるほど

JavaScriptにはオプショナルな引数の概念はありますが、? を使った表現はありません。
代わりに、JavaScriptではデフォルト引数や undefined のチェックを使ってオプショナルな引数を実現します。

hagiwarahagiwara

めっちゃあるな

TypeScriptでは、さまざまな方法で型注釈を書くことができます。以下にいくつかの一般的な方法をリストアップします。

これらは、TypeScriptで型を記述するための一般的な方法の一部ですが、他にも機能やパターンがあります。詳細は、TypeScriptの公式ドキュメントを参照してください。

TypeScript: Documentation - Everyday Types
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

hagiwarahagiwara

VS Code で？型チェックを無効にする方法

  1. ファイルごとに型チェックを無効にする:
    ファイルの先頭に以下のコメントを追加して、そのファイルでの型チェックを無効にします。

このコメントを追加すると、そのファイル内のすべてのコードに対して型チェックが行われなくなります。

// @ts-nocheck
  1. ワークスペース全体でJavaScriptファイルの型チェックを無効にする:
    プロジェクトのルートディレクトリに jsconfig.json ファイルがあるか確認してください。もし存在しなければ作成し、次の内容を追加します。

この設定により、ワークスペース内のすべてのJavaScriptファイルで型チェックが無効になります。

{
  "compilerOptions": {
    "checkJs": false
  },
  "include": ["**/*.js"]
}
hagiwarahagiwara

あっはい

ただし、型チェックを無効にすることで、コードの品質が低下する可能性があることに注意してください。型チェックはバグや予期しない動作を事前に検出するのに役立ちます。そのため、可能な限り型チェックを有効にしておくことをお勧めします。

hagiwarahagiwara
+page.svelte
<section>
  <h1>{data.title}</h1>
  <img src={data.eyecatch.url} alt="" />
  <div>{@html data.content}</div>
</section>

<style>
  ....

  img {
    width: 100%;
  }
</style>

この場合、

  • コンポーネントに直接記載されてる <img> には CSS が効く（コンポーネント用の class 属性値がつく）
    • img.s-xxxxxxxx { width: 100%; } 的な CSS が出力される
  • が、{@html data.content} で読み込んだデータ内の <img> には効かない
  • ので、全ての <img> に適用したいような場合は、:global() 修飾子を使う
    • img { width: 100%; }
+page.svelte
...

<style>
  ...
  :global(img) {
    width: 100%;
  }
</style>
hagiwarahagiwara

他にも画像があることを想定した場合は ↓ とかの方がいいのかな？

section :global(img) {
  ...
}
hagiwarahagiwara

Docs • Svelte https://svelte.jp/docs#component-format-style

<style>
<style> ブロック内の CSS は、そのコンポーネントにスコープされます。

これは、影響を受ける要素にクラスを追加することで動作し、そのクラスはコンポーネントのスタイルのハッシュに基づいています (例えば svelte-123xyz)。

<style>
	p {
		/* これはこのコンポーネントの <p> 要素にのみ影響します */
		color: burlywood;
	}
</style>

スタイルをグローバルなセレクタに適用するには、:global(...) 修飾子を使用します。

<style>
	:global(body) {
		/* これは <body> に適用されます */
		margin: 0;
	}

	div :global(strong) {
		/* これは、このコンポーネント内の <div> 要素の中にある
			 任意のコンポーネント内の <strong> 要素に
			 適用されます */
		color: goldenrod;
	}

	p:global(.red) {
		/* これは、このコンポーネントに属し、red クラスを持つ
			 すべての <p> 要素に適用されます（class="red" が
			 最初のマークアップに現れず、実行時に追加された場合
			 でも）。これは要素の classList プロパティを直接
			 更新するなど、要素のクラスが動的に適用されるときに
			 便利です。 */
	}
</style>
hagiwarahagiwara
git push -u origin main

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
hagiwarahagiwara

既存のHTTPS経由でクローンされたリポジトリをSSHに切り替える場合は、以下のコマンドを実行してリモートリポジトリのURLを変更します。

git remote set-url origin git@github.com:your_username/your_repository.git
hagiwarahagiwara
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@    WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!     @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!
Someone could be eavesdropping on you right now (man-in-the-middle attack)!
It is also possible that a host key has just been changed.
...

こっちもエラー

hagiwarahagiwara

Mac 変えてから使ってなかったんだっけ？？？

このエラーメッセージは、GitHubのホストキーがknown_hostsファイル内で記録されているものと異なっていることを示しています。これは、ネットワーク攻撃（中間者攻撃）の可能性もありますが、GitHubのホストキーが変更されたり、異なるデバイスやインストールからSSH設定が変更された場合にも発生することがあります。

hagiwarahagiwara

この問題を解決するには、known_hostsファイルから古いホストキーを削除し、新しいホストキーを追加する必要があります。以下の手順を実行してください。

  1. known_hostsファイルから該当する行を削除する
  2. GitHubのホストキーを再度受け入れるようにローカルマシンを設定する
    ssh-keyscan github.com >> /Users/tenkao/.ssh/known_hosts
hagiwarahagiwara

参考）
ブランチ名の変更

git branch -M main
hagiwarahagiwara

デフォルトのブランチ名を変更

git config --global init.defaultBranch main
hagiwarahagiwara

Webhook の設定

  • microCMS で記事を追加・更新したらビルド＆デプロイされるようにする
  • GitHub への push はすでになってるらしい

Webhook先にCloudflare PagesとVercelが追加されました | microCMSブログ
https://blog.microcms.io/webhook-cloudflare-vercel/

hagiwarahagiwara

アイキャッチ画像がない場合の処理を書いてないのでビルドが失敗してた
ので追加した

hagiwarahagiwara
  • Git の使い方全然忘れちゃってた
  • ChatGPT, Warp AI ありがとう