# javascript 開発で出会った TypeError

期待された型以外に代入されると js がびっくりしてタイプエラー吐き出します。undefined と null の値でよく発生します。フロントエンド開発なら誰しも一度あったことがあると思いますが、TypeError のいろいろを調べてみました。

Mozilla TypeError についての説明 (opens new window)

TypeError エラーの原因

予期しない型があった
undefined または null の値でしばしば発生

エラーキャッチ

try {
  null.f();
} catch (e) {
  console.log(e instanceof TypeError); // true
  console.log(e.message); // "null has no properties"
  console.log(e.name); // "TypeError"
  console.log(e.fileName); // "Scratchpad/1"
  console.log(e.lineNumber); // 2
  console.log(e.columnNumber); // 2
}

エラー生成

try {
  throw new TypeError("Hello message", "someFile.js", 10);
} catch (e) {
  console.log(e instanceof TypeError); // true
  console.log(e.message); // "Hello message"
  console.log(e.name); // "TypeError"
  console.log(e.fileName); // "someFile.js"
  console.log(e.lineNumber); // 10
  console.log(e.columnNumber); // 0
}

# TypeError: Cannot read property '0' of undefined

console log に出たエラー

TypeError: Cannot read property '0' of undefined
    at l.<anonymous> (6.ff9fb8e6.js:1)
    at l.e._render (app.c2acb957.js:7)
    at l.r (app.c2acb957.js:7)
    at pn.get (app.c2acb957.js:7)
    at new pn (app.c2acb957.js:7)
    at e (app.c2acb957.js:7)
    at l._n.$mount (app.c2acb957.js:7)
    at init (app.c2acb957.js:7)
    at app.c2acb957.js:7
    at f (app.c2acb957.js:7)

該当ソース

{{ page.frontmatter && page.frontmatter.tags[0].toUpperCase() }}

修正後



 



{{
  page.frontmatter &&
    page.frontmatter.tags &&
    page.frontmatter.tags[0].toUpperCase()
}}
2020-11-19
  • javascript

関連記事

Javascript 非同期処理 async と await のメモ
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
javascript reduce 連想配列の合計計算覚えよう
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
開発におけるコーディングルール・規約