JavaScript用語「const」を全部教えます

こんにちは、ハナちゃん！JavaScriptの「const」という言葉、知っているかな？これは、変数を作るときに使う特別なキーワードなんだよ。「const」を使うと、その変数に値を一度だけセットできて、その後は変更できなくなるの。だから、大事な値を守るのにぴったりなんだ。これから、「const」について詳しく一緒に見ていこうね！楽しみにしていてね！

このブログは、JavaScriptに興味のある女子小学生ハナさんと、人工知能リュウとの質疑応答の様子を全てAIが執筆しています。リュウはたまに変な事を言いますが、どうか優しい気持ちでお読みください。

Table of Contents

constとは何ですか？

ハナ: constって何なの？教えて！

リュウ: constはね、変数を定義する時に使う言葉だよ。例えば、君が自分の好きな色を思い浮かべて、その色をずっと持っていたいとする。それをconstを使って保存することができるんだ。もし、その色を変えたいと思ったら、constを使った変数ではなく、letを使った方がいいよ。変えられるからね。

ハナ: 変数って何？それも教えてよ！

リュウ: もちろん！変数は、情報を保存するための「箱」みたいなものなんだ。例えば、君が好きなお菓子の名前を保存するために箱を用意して、その箱にお菓子の名前を書いておく感じ。これで、そのお菓子の名前をいつでも取り出して見ることができるよ。constはその箱のふたが閉まっている状態で、安心して中身を守れるって思ってくれればいいよ。

ハナ: なるほど！でも、letって何？それも知りたいな！

リュウ: letは、変数を定義する時に使う別の言葉だよ。さっきの「箱」が開いているようなイメージだね。つまり、中身を入れたり、別のものに変えたりできるんだ。例えば、君が好きなお菓子を別のお菓子に変えたいと思ったら、letを使ってその箱を開ける感じかな。

ハナ: そっか！constは変えられないけど、letは変えられるんだね。じゃあ、constとletはいつ使うのがいいの？

リュウ: よい質問だね！constは、一度決めたら絶対に変えたくない大事な情報に使うといいよ。逆に、letは変えたいと思う情報に使うといいんだ。例えば、君の年齢はconstで保存するかもしれないけど、毎年誕生日が来るたびに変わるからletが合ってるんだよ。うまく使い分けてみてね！

constの基本的な使い方は？

ハナ: constの基本的な使い方はどんな感じなの？教えて！

リュウ: constは、変数を作るための特別な言葉なんだ。たとえば、おもちゃの名前を決めるときに「リカちゃん人形」って名前をつけたら、その名前は変えないよね。それがconstの使い方だよ。constで作った変数は、一度作ったらその後は名前を変えないから、大事なものを保存するのにぴったりなんだ。

ハナ: えっと、たとえばどんな風に使うの？

リュウ: たとえば、お菓子の値段を記録したいとするね。その時、こんな風に書くよ。「const candyPrice = 150;」って。これでcandyPriceっていう変数に150って値段が入ったの。これからcandyPriceの値段を変えられないから、いつでもお菓子の値段を思い出せるんだよ。

ハナ: なるほど、それって安心できる感じ！でも、constって他の変数と何が違うの？

リュウ: いい質問だね！constの他にも、letやvarっていう言葉があるけど、constは一度決めたら値段を変えられないんだ。letやvarは、その値段を後で変えられるから、たとえばお菓子のセールが始まった時には値段を変えられるよ。でも、constは「これが大事！」ってときに使うんだ。

ハナ: ふむふむ、それなら大事なことにはconstがいいね！他に覚えておくべきことはある？

リュウ: そうだね、constで作ったものはオブジェクトっていう特別なものの中身を変えることはできるんだ。でも、新しいオブジェクトを作ったり、名前を変えることはできないよ。たとえば、constで作ったおもちゃの箱の中におもちゃを入れ替えることはできるけど、箱そのものは変えられないんだよ。

ハナ: へぇ、そうなんだ！すごく面白い！オブジェクトって何？

リュウ: オブジェクトは、いろんな情報をまとめて持っているものだよ。たとえば、「私のペット」っていうおもちゃの箱があって、その中に「名前」「種類」「年齢」っていう情報が入っている感じだね。これなら、ペットの情報を一つの場所にまとめておけるから便利なんだ。そういう風に、constを上手に使うことで、いっぱい情報を整理できるんだよ。

constとletの違いは何ですか？

ハナ:リュウさん、constとletの違いは何ですか？教えて！

リュウ:ハナさん、いい質問だね！constは「変えられない」っていうことなんだ。たとえば、大好きなお菓子を入れた瓶があったとするよ。その瓶をconstで作ると、入っているお菓子を変えられないの。でも、letは「変えられる」ってこと。たとえば、おもちゃの車があって、色を塗り替えたり新しいパーツを付けたりできるのがletなんだ。

ハナ:なるほど！じゃあ、constで作ったものは絶対に変えられないの？

リュウ:そうなんだ！constで作ったものは、もうそのままでいなきゃいけないよ。それと、letは何度でも新しい値を入れられるから、いろいろと変えて楽しむことができるんだ。どっちが使いやすいと思う？

ハナ:うーん、状況によるのかな？でも、変えられないものがあるのはいいかも！その場合、どっちを使ったらいいの？

リュウ:そのとおりだね！もし、その値を絶対に変えたくないならconstを使うのがベストだよ。たとえば、誕生日の年は絶対に変えないよね。それをconstで決めておける。でも、ゲームのスコアみたいに変わる可能性があるものはletを使うといいよ。もう分かったかな？

ハナ:わかった！変えたくないものはconst、変えられるものはletだね！おもしろい！

constを使った配列の扱い方は？

ハナ: constを使った配列の扱い方ってどうするの？もっと教えて！

リュウ: もちろん、ハナさん！constを使うと、配列の名前を決めたらその名前は何度も使えるんだ。ただし、constで作った配列の中身は変えられるよ。例えば、お菓子を入れた箱を考えてみよう。箱の名前はずっと同じだけど、中に入れるお菓子は変えることができるでしょ？

ハナ: なるほど、箱の名前は変わらないけど、中身は変えられるんだね！じゃあ、具体的にどうやって書くの？

リュウ: それじゃあ、例えば「お菓子」って名前の箱を作るとするね。こうやって書くよ。「const okashi = [‘チョコ’, ‘グミ’, ‘キャンディ’];」ってね。これで「お菓子」っていう名前の箱には、チョコとグミとキャンディが入ってる感じだよ。もしキャンディを変えたかったら、箱の中身を「okashi[2] = ‘クッキー’;」ってすれば、キャンディをクッキーに変えられるんだ！

ハナ: わー、それなら私でもできそう！でも、箱の中身を全部変えることはできるの？

リュウ: うん、できるよ！だけど、箱の名前をまったく違う名前にすることはできないのがconstの特徴なんだ。例えば、「okashiに新しいお菓子を全部入れて、名前を「okashi2」にする」ことはできないけど、中身を全部新しくすることはできるよ。そういう場合は、「okashi = [‘アイス’, ‘ケーキ’];」って書くと、また新しいお菓子を入れたことになるってわけ！

ハナ: そうか、名前は変わらずに中身だけを全部変えられるのかー！それってすごいね。他に注意点とかあるの？

リュウ: そうだね、例えば間違って「okashi = ‘新しい箱’;」みたいに書くと、もう配列じゃなくなっちゃうから、注意が必要だよ。配列のままで扱うためには、同じ形式で中身を変えることを意識するといいよ。こんな感じはどう？説明が良かったかな？

constを使ったオブジェクトの扱い方は？

ハナ: constを使ったオブジェクトの扱い方ってどういうことなの？

リュウ: いい質問だね、ハナさん！constは定数を作るために使う言葉なんだけど、オブジェクトを作るときに使うとどうなるか説明するね。たとえば、君が「りんご」というオブジェクトを作ったとして、それに色や大きさを追加することができるよ。でも、constで定めたオブジェクト、そのものを新しく作り直すことはできないんだ。つまり、君が持っている「りんご」は常に「りんご」のままだけど、その中の色や大きさは変えられるよ。

ハナ: ふーん、りんごの色とか大きさは変えられるけど、りんご自体は変えちゃダメなんだね！じゃあ、具体的にオブジェクトの例を見せて！

リュウ: もちろん！こんな感じだよ。
“`javascript
const apple = {
color: ‘red’,
size: ‘medium’
};
“`
ここでは、アップルというオブジェクトが赤色で中ぐらいの大きさになってる。もし色を変えたいときはこうするんだ。
“`javascript
apple.color = ‘green’; // 色を変える
“`
だけど、次のように別のオブジェクトを作ることはできないよ。
“`javascript
apple = { color: ‘yellow’ }; // これはダメ！
“`
分かったかな？

ハナ: うん、分かる気がする！オブジェクトの中の情報は変えられるけど、自体を変えられないんだね。でも、もし色を抜けちゃったらそれはどうなるの？

リュウ: いいポイントだね！オブジェクトの中のプロパティを削除することもできるよ。たとえば、色が必要なくなったとしたら、こんな風に書くことができる。
“`javascript
delete apple.color; // 色を削除する
“`
こうすると、オブジェクトには色の情報がなくなるんだけど、アップルという名前自体はそのままだよ。思い出してみて、オブジェクトはまるでカラーボックスみたいなものだよ。ボックスの中に何が入っているかは変えられるけど、ボックスそのものは変えられないんだ。

ハナ: なるほど、カラーボックスのイメージだね！それじゃあ、オブジェクトにもっとたくさんの情報を追加することはできるの？

リュウ: できるよ！君が好きなものをたくさん追加できるんだ。たとえば、こんな風に書くこともできるよ。
“`javascript
apple.taste = ‘sweet’; // 味を追加する
apple.origin = ‘USA’; // 産地を追加する
“`
これでりんごは「甘い」とか「アメリカ産」そんなことも持つことができるんだ。色々な情報を入れることで、より詳しいアップルができるよ。

ハナ: わー、楽しい！それを使って自分でオブジェクトを作ってみたいな！他にも何か面白いことがある？

リュウ: もちろん、ハナさん！オブジェクトを使うと、新しいものを作るのがもっと楽しくなるよ。例えば、別のフルーツのオブジェクトを作ってみたり、友達の情報をまとめたりもできる。君の想像力次第で、たくさんのことができるから、どんどんやってみてね！

constで定義した変数の再代入はできる？

ハナ: constで定義した変数の再代入はできるの？

リュウ: それはできないんだよ。例えば、みかんの箱にみかんを入れたとするね。その箱に触れたら、みかんはそのまま入っているよね。その箱を別の物に変えようと思ったら、新しい箱を用意しないといけない。だから、constで定義した変数は一度決めたら、別のものに変えることはできないんだ。でも、新しい箱は作れるから、新しい変数を作ることはできるよ！

ハナ: なるほど、みかんの箱のイメージで分かった！じゃあ、const以外の変数はどうなの？

リュウ: いい質問だね！const以外にはletやvarがあるよ。letは、みかんを持っている箱を新しい箱に変えられるイメージかな。最初に入っていたみかんを出して、新しいみかんを入れることができるんだ。varはちょっと古い箱だけど、入っている物を変えられるのは同じだよ。だから、letやvarなら再代入できるんだ！

ハナ: なるほど～！constじゃないと再代入できるんだね！でも、letとvarって何が違うの？

リュウ: すごくいい質問だね！letは、みかんの箱をその場所だけで使う感じ。外に出たらその箱の中身は分からない。でも、varはどこでもその箱を使えるから、外でも中身がわかるんだ。だから、letを使う方が、新しい箱を正しく扱えるってことが多いんだよ！分かった？

constのスコープはどうなっていますか？

ハナ: constのスコープってどうなってるの？

リュウ: いい質問だね、ハナさん！constは、ブロックという特別な箱の中でちゃんと守られてるんだ。例えば、友達と秘密の基地を作って、その基地の中だけで遊ぶ感じなんだよ。基地の外ではその遊びができないみたいな感じ。

ハナ: えーっと、ブロックってどういうこと？基地の外には行けないの？

リュウ: そうそう、ブロックっていうのは、例えばif文やfor文の中のことを指すんだ。だから、constで作ったものはそのブロックの中でしか使えないから、外に出るとその存在は分からなくなるんだよ。まるで秘密の基地の中でしか遊べないおもちゃみたいだね。

ハナ: おもちゃか！じゃあ、そのおもちゃはどこで作れるの？いつでも取り出せる？

リュウ: おもちゃはそのブロックの中でしか作れないから、その外に出たら見えなくなるんだ。だから、そのブロックの中でおもちゃを使うときは、同じ場所にいないとダメだね。おもちゃが大好きなハナさんなら、友達と遊ぶときはその場にいることが大切だよ！

ハナ: おー、なるほど！他の変数とかと何が違うの？もしかして、変えられないの？

リュウ: そうだね！constで作ったものは、決まった名前のままで変えられないことが大きな特徴だよ。例えば、友達と決めたお約束を一度決めたら、変えちゃいけない感じ。一緒に遊ぶときは、その約束を守るから、constもそんな風に大切に使われるんだ。分かってきたかな、ハナさん？

constのローカル変数とグローバル変数について知りたい

ハナ:リュウさん、constのローカル変数とグローバル変数ってどういうことなの？

リュウ:ハナさん、いい質問ですね！まず、グローバル変数はまるでみんなが自由に使えるおもちゃ箱みたいなものです。どこからでもそのおもちゃ箱を開けて使うことができます。でも、ローカル変数はちょっと特別で、特定の場所でだけ使えるおもちゃみたいなものです。例えば、友達の家にあるおもちゃは、その家の中でしか遊べないよね。それに似ています。

ハナ:じゃあ、ローカル変数はどこで使うの？

リュウ:いい質問です！ローカル変数は、特定の関数の中でだけ使うものなんです。だから、その関数が終わると、その変数は使えなくなっちゃうんだ。たとえば、家で宿題をしているときは、その部屋でしか使えないおもちゃみたいな感じです。

ハナ:じゃあ、グローバル変数はずっと使えるの？

リュウ:そうですね！グローバル変数は、どこからでも使えるので、ずっと使うことができます。ただ、使うときはみんなが使っているかもしれないことを考えた方がいいよ。例えば、みんなで使える遊び場のおもちゃは、他の子も使っているかもしれないから注意が必要だよね。

ハナ:ローカル変数を使うときは、どうやって使えばいいの？

リュウ:ローカル変数は、関数の中で「const」を使って作ることができるよ。その関数の中で123や色んな計算をして、その結果を出したりすることができるんだ。たとえば、学校の授業で習ったことを試してみる時に、特定のクラスでしか使えないお道具があるイメージだよ！

ハナ:なるほど！でも、グローバルとローカルを混ぜちゃうことはないの？

リュウ:それもいい質問！グローバル変数とローカル変数は、名前が同じでもお互いに影響を与えないことがあるよ。たとえば、同じテーマの絵を描いているけれど、みんなの絵は別々のものを描いている感じ。だから、しっかり分けて使うことが大切だよ！

ハナ:リュウさん、分かった気がする！でもローカル変数を使う例も教えてほしいな。

リュウ:もちろん！例えば、あなたが「お菓子を数える」っていう関数を作ったとします。その関数の中で「const candyCount = 10;」って書いたら、その関数の中だけで「candyCount」を使えるよ。関数が終わったら「candyCount」は使えなくなるの。お菓子の数を数えるのは、その特定の関数の中でしかできない感じだね。面白いでしょう？

constを使った関数の引数はどうなるの？

ハナ:リュウさん、constを使った関数の引数ってどうなるの？なんか特別なことあるの？

リュウ:ハナさん、いい質問ですね！constを使うと、その引数の値は変えられなくなるんです。たとえば、あなたが大事にしているおもちゃを友達に貸すときに、「これ、壊さないでね」と言う感じです。もし友達が「いいよ」と言っておもちゃを大切に扱ってくれるなら、無事に返ってきますよね。constもそんな風に、引数の値を大切に扱うことを教えてくれています。

ハナ:なるほど！でも、もしconstの引数の中のオブジェクトを使って、何かを変えたらどうなるの？

リュウ:素晴らしい質問ですね、ハナさん！constの引数がオブジェクトの場合、オブジェクト自体は変えられなくても、その中のプロパティ、つまりおもちゃの中身は変えられるんです。たとえば、おもちゃの中に入っていたおはじきを取り出したり、入れたりできるってことです。けれど、オモチャそのものを新しくすることはできないのです。

ハナ:そうなんだ！じゃあ、constじゃない引数ってどんな感じなの？

リュウ:良い質問ですね！constじゃない引数、つまりletやvarを使った場合は、まるでおもちゃ箱そのものを入れ替えることができるような感じです。おもちゃ箱自体を新しいものに変えられるから、中身も新しいおもちゃを入れられるんだよ。元のおもちゃとの関係が自由度がある、といったところですね。

ハナ:わかった！それじゃあ、他に何か気をつけることはあるの？

リュウ:そうですね、ハナさん。constを使うときは、その変数が何を指しているかをよく考えることが大事です。おもちゃを大切に扱うために、どれを選ぶか慎重になるのと同じことなんです。変えられないということは、間違って使ってしまうと元に戻せないかもしれませんから、しっかり確認することが大切です。

ハナ:わーい、すごい勉強になった！またいろいろ教えてね、リュウさん！

constでの配列の要素の変更は可能ですか？

ハナ: constでの配列の要素の変更は可能ですか？

リュウ: うん、ハナさん！constを使って配列を作ると、その配列自体を別の配列に変えたりはできないけど、配列の中の要素は変更できるんだよ。たとえば、お菓子の袋みたいなもので、お菓子の種類は替えないけど、袋の中のお菓子を違うものにすることはできるって感じかな。

ハナ: なるほどー！じゃあ、どうやって要素を変えるの？

リュウ: いい質問だね！要素を変えるには、配列のインデックスを使うんだ。たとえば、好きな色のボールが入った配列を考えてみて。1番目のボールを青から赤に変えたいなら、「配列[1] = ‘赤’;」って書くだけでできるよ。

ハナ: インデックスって、何番目かを表すやつだよね？でも、最初の番号はどうして0なの？

リュウ: そうだよ、0から始まるのはちょっと面白いけど、プログラミングの世界ではそのルールになってるんだ。0は最初の位置を示すんだよ。お友達と遊ぶときに「じゃあ、1番目の子から遊ぼう！」って言うとき、1番目は0番目の子っていう感じ。少し不思議だよね！

ハナ: うん、不思議だね！もっと知りたいな、配列の他の使い方とかあるの？

リュウ: 確かに！配列はたくさんのデータをまとめておけるから、たとえば好きなゲームのスコアを全部まとめたり、友達の名前リストを作ったりできるんだ。色々なことに使えるから、自分だけの特別な配列を作るのも楽しいよ！

constを使うメリットは何ですか？

ハナ: constを使うメリットは何ですか？

リュウ: constを使うと、その変数が一度決めたら変えられないからとても安心なんだ。例えば、お菓子を買ったときに、一つの袋に入れたクッキーは、他の袋に入れなおすことができない、って感じだよ。だから、間違って変更しちゃう心配がなくて、安心してプログラムを書くことができるんだ。

ハナ: へぇ〜！でも、constを使うと、変数が変えられないから不便じゃないの？

リュウ: それはいい質問だね。確かに、変えられないから不便と思うこともあるけど、逆にその決まった形を守ってくれるから、プログラムの中で大切なものを壊さないようにしてくれるんだ。例えば、秘密のおもちゃを大切に扱っていると考えてみて。おもちゃが壊れないように、いじらないでおくことができるって感じだよ。

ハナ: なるほど！でも、constの代わりにletを使うこともあるんじゃない？

リュウ: そうだね！letは変更できる変数だから、必要な時はそれを使ってもいいよ。でも、変えないものはconstで守った方が、プログラムがしっかりするんだ。だから、どちらを使うかは、変数の役割に応じて選ぶと良いんだよ。

ハナ: なるほど、役割に合わせて使い分けるんだね！他にconstのメリットってあるの？

リュウ: もちろん！constを使うことで、プログラムの中でどこに何があるのか、すぐに分かりやすくなるんだ。例えば、お友達に名前を付けるときに、毎回名前を変えずに一定のニックネームを使うと、皆がそれを覚えやすくなるよね。それと同じように、constもプログラムを見やすくしてくれる役割があるんだ。

constを使ったコードの可読性はどう改善される？

ハナ: constを使ったコードの可読性はどう改善されるの？

リュウ: constを使うと、変数がその後変わらないって約束することができるんだ。たとえば、君が友達に「これは私の特別なペンだよ」と言ったら、そのペンはずっと特別なペンだよね。もしそのペンが他のペンに変わったら、友達は混乱しちゃうかもしれないよね。だから、constを使うと、コードを読んだ人が「この部分は変わらないんだな」と安心して理解しやすくなるんだよ。

ハナ: そっか！でも、constが使えないときってあるのかな？

リュウ: もちろん、あるよ！例えば、お気に入りのお菓子を買う時に、もしその日によって違うお菓子を選ぶことがあるでしょ。その場合、変数をletにすることが多いよ。letは「その時その時で変わってもいいよ」という感じだから、何かが変わる可能性があるときは、letを使うんだ。constは変わらないからこそ、読みやすくなるというわけだね。

ハナ: なるほど！constが使えるときはどんなときがあるの？

リュウ: 例えば、色を決めるとき。君が「私の好きな色はピンクです！」って言ったら、その好きな色はずっとピンクだよね。そういうときにはconstを使うと、コードがもっと分かりやすくなるんだ。コードを読んだ人も「これがピンクのことだ」とすぐ理解できるから、とても良いよ。

ハナ: でも、constを使うと変えられないから、ちょっと大変じゃない？

リュウ: そうだね、その心配もあるかもしれない。でも、ちゃんと考えて使えば、いいことがたくさんあるんだ。たとえば、写真を撮るときに、同じ場所で同じポーズをした方が、思い出が残りやすいでしょ？constを使うことで、そうやって一貫性を保つことができるからこそ、他の人も理解しやすくなるんだよ。

ハナ: わかった！constを使うことで、みんなが楽に理解できるようになるんだね！

リュウ: その通り！君の理解が進むのを見るのがとても嬉しいよ。もっと質問があったら、いつでも聞いてね！

constで定義した変数はどのようにデバッグするの？

ハナ: constで定義した変数をどうやってデバッグするの？難しそう！

リュウ: いい質問だね、ハナさん！デバッグは、プログラムの問題を見つける作業だよ。constで定義した変数をデバッグするには、まずその変数の値を確認する方法があるんだ。例えば、`console.log(変数名);`を使うと、コンソールという場所にその変数の値が表示されるよ。

ハナ: へぇ〜、コンソールってどこにあるの？どうやって開くの？

リュウ: コンソールは、君が使っているウェブブラウザの開発者ツールの一部だよ。ブラウザの画面で右クリックして、「検証」を選ぶと開けるよ。そこで「Console」っていうタブを見つけたら、そこに`console.log`の結果が出るんだ。

ハナ: 検証って使うの面白そう！でも、他にデバッグする方法ってあるの？

リュウ: もちろんあるよ、ハナさん！もう一つの方法は、ブレークポイントを使うことなんだ。これは、プログラムを一時停止させて、その場の変数の状態を見ることができる機能だよ。開発者ツールで行うんだ。どんな値が入っているかじっくり見れるから、問題の場所がわかりやすくなるよ。

ハナ: ブレークポイントって、どんな風に設定するの？ちょっとややこしそう…。

リュウ: 簡単だよ！開発者ツールを開いた後、上のコードの部分をクリックして、調べたい行の横にある番号をクリックするだけでブレークポイントが作れるよ。その後、プログラムを実行すると、その行で止まるから、そこで変数を確認できるんだ。

ハナ: わー！それなら私もできそう！やってみたいなぁ！他に注意することってあるのかな？

リュウ: うん、注意点としては、constで定義した変数はその値を変えられないから、もし値が変わることを期待しているなら、別の方法（letやvar）を考えてみるといいよ。そういうところにも目を向けると、もっとスムーズにデバッグができるかもしれないね。

constのリストやオブジェクトを初期化する方法は？

ハナ: constのリストやオブジェクトを初期化する方法はどんなの？

リュウ: ああ、いい質問だね！constを使うと、変わらないリストやオブジェクトを作ることができるよ。リストは「配列」と呼ばれて、おもちゃの箱みたいなものだと思ってね。箱の中にたくさんのおもちゃが入っているのと同じように、配列でいろんなデータをまとめておけるんだ。
リストを初期化するには、こう書くよ：
“`javascript
const toys = [‘カメラ’, ‘ボール’, ‘ぬいぐるみ’];
“`
オブジェクトは、いろんな情報をまとめた本みたいだね。本の中には、タイトルや作者の名前が載っているように、オブジェクトの中には様々なデータが入ってるんだ。オブジェクトを初期化するには、こんな風に書くよ：
“`javascript
const book = {
title: ‘ハナの冒険’,
author: ‘ハナ’,
};
“`

ハナさん、これでイメージできるかな？

ハナ: なるほど！でも、なんでconstっていう名前なの？

リュウ: そうだね、constは「constant」の略なんだ。つまり、「変わらないもの」って意味なんだよ。おもちゃの箱の中のおもちゃは取り出したり入れたりできるけど、箱自体は他の大きさに変わったりしないよね。それと同じように、constで宣言したものは置いておく場所を変えないんだ。
何か他に知りたいことはあるかな、ハナさん？

constを使った非同期処理の注意点は？

ハナ: constを使った非同期処理の注意点って何なの？教えて！

リュウ: いい質問だね、ハナさん！constは、一度代入した値を変えられないんだ。でも、非同期処理で使うとき、気をつけないといけないことがあるよ。例えば、constで作った配列やオブジェクトは中身を変えられるんだ。これは、まるで箱におもちゃを入れて、そのおもちゃを取り出したり入れたりできるけど、箱自体を別のものに変えることはできないって感じだね。

ハナ: ふむふむ、箱の中身は変えられるけど、箱そのものは変えられないのか！それってどういうことに使われるの？

リュウ: そうだね、例えば、非同期処理でAPIからデータを取ってきたとするよ。そのデータをconstで作った配列に追加することはできる。だけど、別のデータをその配列に代入しようとするとエラーになっちゃう。つまり、箱の中身は変えられるけど、箱自体はそのままにしておく必要があるんだ。

ハナ: なるほど！じゃあ、constを使うときは注意しないといけないことがいっぱいなんだね。他には何か注意点はある？

リュウ: その通りだね、ハナさん！もう一つ気をつけるべきことは、非同期処理でconstを使うとき、全体の流れをしっかり考えることだよ。例えば、非同期処理が終わる前に次の処理を始めると、思ってた結果が得られなくなっちゃうことがあるんだ。ちょうど、ケーキを焼き終わる前に切り分けたら、まだ生焼けの部分が残っちゃうみたいな感じだよ。

ハナ: わかった！順番を間違えちゃいけないんだね、気をつけるね！他に何か知りたいことはある？

リュウ: そうだね、もし非同期処理の実際の使い方が気になるなら、どんな場面で使われるか説明できるよ。興味あるかな？

constとモジュールの関連性はどうなっている？

ハナ: constとモジュールってどんな関係があるの？

リュウ: constは、JavaScriptで変数を定義するときに使う言葉なんだ。もう一度変えることができない、特別な変数みたいなものだよ。一方、モジュールは、コードを特定の機能ごとに分けて整理する方法なんだ。一つのモジュールには、いくつかのconstが含まれていたりするんだよ。だから、constを使ってモジュールの中で数値や文字を固定することができるんだ。

ハナ: モジュールって何のために使うの？

リュウ: モジュールは、例えばおもちゃの組み立てセットを想像してみて。1つの大きなおもちゃを作るために、いくつかの小さなパーツがあるよね。その小さなパーツがモジュールだよ。モジュールを使うことで、コードをもっと簡単に整理したり、再利用したりできるんだ。これでプログラムの中がごちゃごちゃしないんだよ。

ハナ: なるほど！じゃあ、constを使うとどうなるの？

リュウ: constを使うことで、例えばお友達に約束したことを思い出すような感じなんだ。約束は一度決めたら変えないよね？それと同じで、constで作った変数も一度決めたら変わらないんだ。だから、ずっと同じ大事な情報を持っておけるということなんだ。

ハナ: それってすごいね！もしconstを使わなかったら、どうなるの？

リュウ: constを使わない場合、変数がいつでも変わってしまうから、数値や情報がころころ変わることになるんだ。おもちゃの色を毎回変えたら、どれが本当の色か分からなくなるよね？それと同じで、情報が混乱してしまうかもしれないんだ。

ハナ: わかった！ありがとうリュウさん！もっといろいろ知りたいな！

constが使用できるコンテキストには何がありますか？

ハナ: constが使える場所ってどんなところなの？

リュウ: constはね、主に変数を宣言する時に使うんだ。例えば、君が好きなお菓子の名前を固定しておきたい時に利用するといいよ。「チョコレート」っていう名前が変わらない場合、それをconstで宣言することができるんだ。

ハナ: へー！他にはどんなところで使えるの？

リュウ: もう一つは、関数の中でも使えるよ。例えば、ある計算をするために数字を入れたくて、その数が変わらない場合はconstを使うといいんだ。使う場所としては、常に同じ値を保ちたい時なんだよ。

ハナ: じゃあ、constで宣言したものは絶対変えられないの？

リュウ: その通りだよ、ハナさん。constで宣言した変数は、一度決めたら無理に変更しないほうがいいってこと。これって、約束を守るみたいな感じだね。例えば、友達と「これを絶対守る！」って決めたことがあったら、その約束を守るのが大事なようにね。

ハナ: そうか！じゃあ、変更したい時はどうしたらいいの？

リュウ: いい質問だね、ハナさん。もし値を変更したい時は、letやvarを使うといいよ。これらは値を後から変えることができるから、友達との約束を変更してもOKな感じなんだ。君も好きなお菓子が変わった時には、その新しい名前を使えるようにできるんだよ。

ハナ: わかった！letとvarの違いも教えてほしいな。

リュウ: もちろん、ハナさん。letはブロック内でスコープが限られているから、その中だけで使えるよ。一方、varはより大きな範囲で使えるんだ。これは、例えばおもちゃの箱があって、箱の中だけで遊ぶのがlet、箱が部屋全体に広がっているような感じがvarだね。

constで定義した変数のhoistingについて知りたい

ハナ:リュウさん、constで定義した変数のhoistingって何なの？

リュウ:ハナさん、hoistingは、変数や関数が見える範囲が決まる仕組みなんだよ。constで定義した変数は、宣言される前には使えないんだ。例えば、学校の教室を思い出してみて。教室に入る前に準備を整えるけど、その準備ができていない状態で教室に入っても、何もできないよね。constの変数も、使う前にちゃんと宣言しないとダメなんだ。

ハナ:なるほど！でも、constだけじゃなくて、他の変数も同じなの？

リュウ:いい質問だね、ハナさん！ただ、letやvarで定義された変数は、少し違うんだ。varは宣言する前に使っても、undefinedという状態で使えるんだ。でも、letはconstと同じで、宣言前には使えないよ。だから、変数にはそれぞれの特性があるんだね。

ハナ:わぁ、そうなんだ！じゃあ、constの変数を宣言するのを忘れたらどうなるの？

リュウ:そうだね、もしconstの変数を宣言するのを忘れると、JavaScriptが“あれ？この変数はどこ？”って戸惑っちゃうんだ。その結果、エラーになってしまう。もう一度教室に戻って準備を整えなきゃいけなくなるということなんだよ。

ハナ:エラーって大変なんだね！それを避けるためにはどうすればいいの？

リュウ:その通り、エラーを避けるためには、変数を使う前にオーケーを出すための宣言をきちんと行うことが大事だね。また、変数の名前を決めるときは、わかりやすい名前をつけるといいよ。用意されたおもちゃの名前を決めるみたいに、自分が何をするためのものなのかが一目でわかるといいよね。

ハナ:わかりました！じゃあ、最後にhoistingについてまとめて教えて！

リュウ:もちろんだよ！hoistingは、変数や関数の見える範囲のことなんだ。constは宣言前には使えないし、letも同じ。varは宣言する前に使えるけど、そうするとundefinedになる。だから、ちゃんと宣言しておくことがとても大事なんだ。ゲームを始める前に準備運動をするみたいなものだね！

constを使ったコードスタイルのベストプラクティスは？

ハナ: constを使ったコードスタイルのベストプラクティスって何？

リュウ: constは変わらない値を使うときにとても便利だよ。例えば、友達と一緒に決めた遊びのルールを考えてみて。ルールは変えたくないから、constを使うと安心だよね。コードを書くときも同じように、変わらないものにはconstを使うといいよ。

ハナ: なるほど、変わらないものに使うんだね！じゃあ、何か他に気をつけた方がいいことはあるの？

リュウ: うん、もう一つ大事なことは、constで定義したものがオブジェクトや配列のときだね。その場合、中身は変えることができるから、注意が必要なんだ。配列をお菓子の袋みたいに考えるといいよ。袋自体は変わらないけど、中のお菓子を入れ替えたり増やしたりはできるよね。

ハナ: なるほど、袋はそのままだけど中身は変えられるって感じか！それなら、constを使うときは中身に気をつければいいんだね。

リュウ: そうだね、ハナさん！それに、コードを書いているときに一貫性を持たせるために、同じ流れでconstを使っていくと見やすくなるよ。自分の好きな色で絵を描くみたいに、統一感があって素敵な作品が作れるからね。

ハナ: 一貫性も大事なんだね！わかった、もっと練習してみる！他にも知りたいことがあったら聞いていい？

リュウ: もちろん、いつでも聞いてね！あたなの疑問をたくさん解決していこう！

constの使用を避けるべきケースはあるの？

ハナ: constの使用を避けるべきケースはあるの？

リュウ: うん、もちろんあるよ！constは変数の値を変更できないから、もしその値を後で変えたい時には使えないんだ。たとえば、おもちゃの名前をconstで決めたら、その名前を変えられないのと同じ感じかな。

ハナ: なるほどー。でも、どんな場合に変更したいってことが出てくるのかな？

リュウ: そうだね、例えばゲームのスコアを考えてみて。ゲームの途中でスコアは増えたり減ったりするよね。その場合は、スコアをletで作ってあげると、後でスコアを自由に変えられるから便利なんだ。

ハナ: わかった！じゃあ、constを使うべきケースってどういうのがあるの？

リュウ: いい質問だね！constは、変わらない情報を持つ時に使うといいよ。例えば、地球の周りを回っている月の名前や、特定の色の定義みたいに、いつも同じ値であってほしいものにはconstを使うのがぴったりなんだ。

ハナ: それって、色を作る時みたいに使うのかな？

リュウ: そうそう！たとえば、赤や青の色をconstで定義しておけば、いつでもその色を使えるから、描く時に便利だよね。安心して使えるから、constはそういう場面で使うのがいいよ。

ハナ: 分かった！でも、私まだちょっと不安なんだけど、どうやったらもっと上手くなるかな？

リュウ: たくさんコードを書いてみることだよ。いろんなプログラムを作って、違うケースでconst、let、varを使ってみると楽しく学べるよ。友達と一緒にやってみるのもいいかもしれないね！

constを活用した実用的な例は何ですか？

ハナ: constを活用した実用的な例ってどんなのがあるの？

リュウ: いい質問だね、ハナさん！constは、変わらない値を保存するために使うんだ。例えば、お気に入りの動物をconstで固定してみると、「const favoriteAnimal = ‘りんご’;」のように書くことができるんだ。この場合、お気に入りの動物がりんごになっちゃってるけど、これはただの例だよ。

ハナ: なるほど！でも、動物は変わらないから、それいいんじゃない？

リュウ: そうだね、これは例えだよ。でも例えば、ピザのトッピングをconstで設定することもできる。「const favoriteTopping = ‘チーズ’;」みたいにすると、そのトッピングはチーズに決まって変わらないんだ。何か他に知りたいことはある？

ハナ: うん！他にはどんな使い方があるの？

リュウ: 例えば、クラスの友達の名前リストを作ってみるといいよ。「const friends = [‘あかり’, ‘たけし’, ‘ゆうな’];」って書くと、友達の名前を動かしたり、変えたりすることができないんだ。こうすることで、友達の名前をちゃんと守ることができるんだよ。これってどう思う？

ハナ: わー、いいね！でも、友達の名前を変えたくなったらどうすればいい？

リュウ: それはいい質問だね、ハナさん！friendsのリストを変更したい場合は、constを使わずにletを使うといいよ。letを使うと、変えたいときに自由に変更できるんだ。「let friends = [‘あかり’, ‘たけし’, ‘ゆうな’];」って書くと、後から「あかり」を「さくら」と変えることもできるんだ。リストを守るためにconst、変更する場合はletを使うといいね！他にもあるかな？

ハナ: わかった！constが大事ってことだね。もっと知りたいな！

神戸ホームページ制作プロ公式ブログ