JavaScriptのReferenceErrorって何？
JavaScriptを書いているとコーディングのミスなどでエラーになることはよくある話です。
JavaScriptに限らず他のプログラミング言語でもそうですが、永らくプログラミングをしていると「とりあえずやっつけで作ってみたから、あとは動かして出たエラーに対処することで完成度を高めよう」みたいにエラー待ちになったりします。
プログラミングをしていると頭の中でこんな風に作ればいいかなってイメージするのですが、作ろうとしている機能が他の機能と絡んでいたりして「ここをこうしたらあっちはどうなっちゃうんだ？」とかいろいろ考えちゃったり、そもそもうまくイメージができなかったり、頭の中だけだと煮詰まってしまうので、なんとなくでいいからとりあえず手を動かして書いてみるとよかったりします。そうすると「あー、ココをこうすればいいんだな」みたいにイメージが沸いたり、次にやるべきことがわかったりします。
ちょっと脱線しましたが、そんなこんなで初めから完璧なプログラムを作るのはなかなか大変なので、プログラミングをするにあたっては都度発生するエラーに対応する必要があります。
今回はJavaScriptの「ReferenceError」について紹介したいと思います。
ReferenceErrorとは
そんな変数はありませんよ、という意味になります。
Referenceとは日本語で参照という意味でうまく参照できなかった時のエラーということですね。
JavaScript
window.onload = function() {
const fruits = {name: 'apple'}
const car = {name: 'aventador'}
console.log(fruits.name)
console.log(car.name)
console.log(animals.name)
};
試しにわざとエラーを出してみました。
console.log()は開発者ツールのコンソールに出力する関数なのですが、
apple、aventadorと出力された後に「Uncaught ReferenceError: animals is not defined」と出力されていますね。
これは「console.log(animals.name)」で起こってるエラーです。どうしてそうわかるかというと右側にtest.html:9と書いてあるからです。test.htmlの9行目がエラーですよという意味になります。上で紹介したコードは一部でHTMLファイルとしては9行目に位置します。
ちなみにエラーメッセージの「animals is not defined」はanimalsという変数が定義されていませんという内容になります。
このエラーが出たらどうするの？
大抵はコーディングミスなので、以下の点を今一度確認してみましょう。
- スペルミスしてないか
- コーディングの途中で消した変数を参照しようとしていないか
普通に考えたらまったく書いた覚えの無い（あるいは見た覚えの無い）変数を使おうとすることはあまりないと思います。
なので、起こるとすれば微妙にスペルを間違えている可能性があります。（疲れている時とかはやってしまうかも）
スペルミスの場合はスペルを直せば解決です。
消した変数を参照している場合はその変数が必要なものかを確認しましょう。必要であれば消してしまった変数を復活させましょう。不要であればエラーが出ている箇所も不要なはずなので消しましょう。
エラーにならない場合がある？
ReferenceErrorは定義されていない変数を参照した時に起こるエラーでしたが、実は以下の場合はエラーにはなりません。
JavaScript
window.onload = function() {
const fruits = {name: 'apple'}
console.log(fruits.type)
};
結果はundefinedと出力されて終わります。
fruitsという変数はnameというプロパティを持ったオブジェクトになりますが、プロパティ名が間違っている場合はエラー扱いにはならないんですね。なんでそうなのかはよくわかりません。
まとめ
プログラミングをやっていると必ずどこかで出くわすエラーですが、その意味を知っておくことはとても大事です。プログラマーはそのエラーを解析して正しいプログラムに修正していかなければなりません。
エラーの種類は他にもいろいろありますが、今回紹介したものは初歩的で比較的わかりやすいものになります。
したっけ！
- ReferenceErrorは定義されていない変数を参照しようとした時に起こるエラー
- よくある原因はスペルミスです。よく確認しましょう。
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy