Tips

VSCode

Restart Server

Ctrl + Shift + Pで出てくるコマンドで言語周りのサーバーを再起動できる。
コード補完関係の設定を変更した後、適用されない場合は試してみること。

JavaScript

• JavaScript の Array.some と Array.includes の使い分け、値・参照型の動作の違い
• Map - JavaScript | MDN

TypeScript

• オプショナルチェーン (optional chaining)

型定義

自作のものはグローバルに読み込ませるより、必要な時にだけ読み込ませる方が良い。

• TypeScriptでグローバルな型定義ファイルを用意する
• 自作の型定義ファイルに ".d.ts" と付けない方がいい

Vite

公式：https://ja.vitejs.dev/guide/

• Vite 環境で index.html から環境変数を参照する
• Viteの中で環境変数の使用
• Vite ＋ React + TypeScript で 環境変数ファイルを作成する

React

公式：https://ja.reactjs.org/docs/hello-world.html

• React:関数コンポーネントとクラスコンポーネントの違い
• Vite + React で path alias を使いたい！
• create-react-appで作成したプロジェクトにimportのaliasを設定する
• react-helmetでサイトにHeadタグをつける
• react-helmetを設定したらWarning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code.と怒られた
• 2022年版：OGPの正しい設定方法まとめ。確認方法や画像サイズも

faviconとOG画像の画像形式について

faviconはSVGを使う。OG画像はJPG, PNG, WEBP, GIFのいずれかを使う（SVGはサポート外）

Highcharts

公式：https://www.highcharts.com/docs/chart-concepts/understanding-highcharts

• highcharts Y軸タイトルを上部に水平に記述する
• Highchartsメモ

GitHub Actions

公式：https://docs.github.com/ja/actions

• カスタムワークフローで GitHub Pages デプロイが可能に
• GitHub Actions のトリガーで任意のファイルやフォルダーを指定する・除外する (Paths フィルター)
• github actionsのartifactsを使ってuploadしたファイルを別jobで呼び出す

if文

• ifelseやswitch文のようにGitHub Actionsのステップの実行を制御したい
• [GitHub Actions] branch conditional（if分岐でブランチを条件にする場合の記述について）

Secrets

機密性の高い環境変数を設定する場合

• [便利] GitHub ActionsのSecretの使い所と使い方