目次
- 1. 【コード品質】綺麗なReactコード 基本7例
- 2. googoleアカウントでログイン（OAuth認証）で少しハマった
- 3. Web監視システムを作ってみた
- 4. Stripe Webhookで、Payment Links(支払いリンク)の設定漏れをリカバリーする
- 5. TypeScriptで出力したUMDモジュールはグローバルスコープから扱えない
- 6. package.jsonのライセンスの書き方
- 7. 【React】preventDefaultについて【JavaScript】
- 8. VS Codeで*.js, *.ts, *.jsx, *.tsxのみにデフォルトフォーマッタとしてPrettierを設定する
- 9. 【Materialize】JavascriptのDropdownの動かし方について
- 10. AI技術でブランド別取扱商品が一目でわかる！！業務改善アプリを作ってみた。
- 11. あなた、スプレッド構文っていうのね！
- 12. 【JavaScript】closest()(クロウセスト)の使い方
- 13. vistaでphotoshop その4
- 14. vistaでphotoshop その3
- 15. ウェブサイト作成用備忘録・２１号：javascriptのuse strictの適用範囲の疑問点について
- 16. vistaでphotoshop その2
- 17. vistaでphotoshop
- 18. package.jsonのバージョン番号の書き方
- 19. javascriptでクエリストリングを取得する
- 20. Electron Tips ~便利なモジュールや小技~
【コード品質】綺麗なReactコード 基本7例
# 初めに
– Reactは，HTMLやJSを混同して記述できるJSXが使われているだけあって多様な書き方で実装できてしまう
– 多様な書き方のコードが複雑に絡み合えば，説明，保守は難しくなる
– 最低限統一するルールは持つべきである##### 超基本
✅ Prettierやformatterの設定は，開発者間で共有されていること
✅ Warning, 例外処理
✅ 無駄なconsoleはない
✅ 最低限度のコーディング規約は把握していること# 良いコード例 基本
最低限意識して欲しいポイント7つを紹介します
## 1. 文字連結は直感的で分かりやすく“`jsx
// NG
const apiUrl = origin + ‘/api/v2/user/’ + userId;// Good?
const apiUrl = `${origin}/api/v2/user/${userId}`;
“`## 2. ifの乱用は行数を多く取る
“`jsx
// NG
if (status == ‘JPN’) {
return;
}
googoleアカウントでログイン（OAuth認証）で少しハマった
#### 概要
需要は少ないと思いますが、ハマる人もいるかもしれないと思ったので覚書。
下記は、googleアカウントでログインのサンプルコードです。
ここで、コールバック関数**onSignIn**の定義に**let onSignIn = fucntion(){…}**を使用すると、コールバック関数が呼ばれなくなりました。
詳細は、下記詳細をご覧ください。“`sample.html