JavaScriptで「変数」と「配列」を扱う方法を学習しよう！

JavaScriptなどのプログラミング言語を0から学ぼうとすると、とても大変です。

知らない概念が多く、新しく覚えなければならないことが沢山あるからです。

しかし、【iOSショートカットで学ぶ！プログラミング教室】シリーズで、プログラミングの基本を身につけた皆さんであれば、他の方よりもはるかにプログラミング言語の学習効率が良くなります。

「これって、ショートカットのアレと同じか…」
と対比できれば、0から新しいことを学ぶよりも理解しやすいからです。

これから3回にわたって、これまでの【iOSショートカットで学ぶ！プログラミング教室】の内容を元に、JavaScriptの”超基本”を学習していきます！

厳密性や正確性にはこだわりすぎず、プログラミング初学者の方が理解しやすいように解説していきたいと考えています。

最後の実践編では、JavaScriptのコードを自分で書くところまでやっていきます。

今回はその助走段階として

• 変数の設定と呼び出し方
• 配列の使い方

について学んでいきます！

今後の内容すべての土台となりますので、時間をかけてしっかりと理解していきましょう！

それでは、Let’s プログラミング！

変数の設定と呼び出し方

まずは、JavaScriptで変数を設定する方法を解説します。

「変数ってなんだっけ？」
と思われた方は第３回の記事で詳しく解説していますので、復習しておきましょう。

あわせて読みたい

【徹底解説！】「変数」って何？iPhoneショートカットを作りながらマスターしよう！ iOSショートカットの作成において、「変数」は非常に重要です。 「変数」を制すものがショートカットを制す、と言っても過言ではないでしょう。 しかし、ショートカット…

「変数はデータを入れる箱」でしたね。

ショートカットでは「変数を設定」アクションや「マジック変数」などを使って、変数を利用していました。

JavaScriptにおいても、変数は必要不可欠な要素になりますので、その設定方法は理解しておかなければなりません。

JavaScriptで変数を設定するには、以下のようなコードを書きます。

var name = “山田”;

このように記述することで、以下のような”箱”が用意されます。

宣言（var）とは

JavaScriptでは、変数を使うときに「宣言」をします。

「これは変数です！」と”宣言”するわけです。

その宣言が「var」の部分です。

var name = “山田”;

宣言の仕方は、「var」以外にも「let」や「const」などあり、宣言の仕方によって変数の性質が変わってきます。

ここでは一旦、「宣言＝var」とだけ覚えておきましょう。

変数名とデータ

var name = “山田”;
宣言が済んだら、「name」の箇所で変数名を決め、「= ”山田”」という箇所でデータを設定します。

変数名は自分の好きなように決められますので、nameでもNameでもnamaeでも、なんでも構いません。

ただ、注意点としては、「大文字と小文字は区別される」ということです。

例えば、nameとNameは違う変数として認識されるということです。

そして、データには数字や文字列など様々なものを設定することができます。

var name = “山田”;

以上の例では、山田を「””」を囲っていますよね。

これは「『山田』は文字列です！」とコンピューターに認識させています。

つまり、変数のデータに文字列を設定したい場合は、「””」で囲ってあげる必要があるということです。

逆に数字などは「””」で囲う必要はありません。
var number = 1;

ここまでの情報を図にすると以下のようになります。

「なんか文末に変なのついてるけど、あれは何?」
と気になった方もいると思います。

「;」はセミコロンと呼び、「これでこの文は終わりですよ！」とコンピューターに知らせるものになります。

「;」は必要な場合と不必要な場合があるのですが、変数の設定する際にはとりあえず書いておけば間違いないと考えておけば大丈夫です。

変数の呼び出し方

これで、変数を設定することができましたが、設定しただけでは意味がありません。

変数は呼び出して、中身のデータを加工したり表示したりしてこそ価値が生まれます。

「変数の呼び出し」と聞くと難しそうに感じるかもしれませんが、実はとても簡単です。

変数を呼び出すには、変数名を書くだけでOKです。

例えば、
var name = “山田”;
というように変数を設定したのであれば、「name」と書くだけで「山田」というデータを呼び出すことができるのです。

これでJavaScriptにおける変数の基本（超入門者向け）はOKです。

より詳しい内容は必要となった時に覚えていけば大丈夫です！

配列（リスト）

続いて、「配列」について解説していきます。

変数は1つにつき1つのデータしか扱うことができないので、複数のデータを扱うために「配列」というものが用意されています。

これは、ショートカットで言う「リスト」だと考えてください。

「リスト」では、複数のデータを扱うことができましたね。
詳しい解説は第５回でしていますので、忘れてしまった方は復習してみてください。

あわせて読みたい

「繰り返す」や「リスト」をiPhoneショートカットで使いこなそう！ 「繰り返す」「リスト」といったアクションは、「便利そうだけど、使い方がよく分からない…」と思っている方が多いと思います。 しかし、実際には難しいことはなく、正…

配列の設定方法

では、JavaScriptの「配列」はどのように設定すれば良いのでしょうか？

「複数のデータを扱うってことは、変数より難しい文を書くことになりそう…」
と思うかもしれませんが、

実は、「配列」の設定方法は、ほとんど変数と同じです。
以下の図を見てください。

「var」で”宣言”し、名前をつけ、データを設定する。

この流れは変数の設定方法と全く一緒ですよね！

変数の場合と違うのは、設定するデータの形です。

配列は、複数のデータを[ ]で囲みます。

そして、[ ]内の値と値との間をカンマ「,」で区切ります。

以上の点を押さえておけば、配列の設定方法は大丈夫です。

一応、具体例を見て理解を深めておきましょう。

var nameList = [“山田”, “鈴木”, “佐藤”];
var number = [1, 2, 3, 4]

配列の呼び出し方

変数と同様に、配列も呼び出し方を知っておく必要があります。

変数は呼び出したい変数の名前を書くだけで中身のデータを取り出し加工したりすることができましたね。

変数と同様にして、配列も呼び出したい配列の名前を書くと中身のデータを取り出すことができます。

しかし、配列は変数とは違って、複数のデータを持っています。

配列のデータ全てに対して変更を加えたりするときは、配列の名前を書くだけで十分なのですが、配列の個々のデータを取り出したいときなどは呼び出し方を変えなければなりません。

と言ってもイメージが湧きづらいと思いますので、それぞれの具体例を紹介しておきます。

配列のデータ全てに対して変更を加える時の例は以下の通りです。
・配列のデータ”全てを”削除する。
・配列の中身の文字列を”全て”大文字にする。

配列の個々のデータにを取り出し変更を加える時の例は以下の通りです。
・配列の”2つ目のデータだけ”削除する。
・配列の”3つ目の文字列だけ”大文字にする。

後者の配列の個々のデータを呼び出す方法は少々特殊なので、順を追って解説していきます。

まず、以下のような配列を用意したとします。
var nameList = [“山田”, “鈴木”, “佐藤”];

このnameListという配列から「山田」という文字列を取り出したい時は以下のように記述します。

nameList[0]

続いて、「鈴木」という文字列を取り出したい時は以下のように記述します。

nameList[1]

最後に、「佐藤」という文字列を取り出したい時は以下のように記述します。

nameList[2]

つまり、配列から個々のデータを取り出すには、
配列名[取り出すデータが○番目かを示す番号]
というように記述すれば良いというわけです。

しかし、
「いや、”山田”は1番目だし”佐藤”は2番目のデータなんだから、さっきの呼び出し方はおかしくない？」
と思った方が多いはずです。

先ほど、nameListという配列の1番目のデータである「山田」を取り出す時、
nameList[0]
と記述しました。

実は、ややこしいことに配列の番号は「0番目, 1番目, 2番目, …」と数えていく決まりがあるのです。

配列の番号は、ショートカットの「繰り返し」の「Repeat Index」に相当するものですが、この数え方に違いがあるのです。
（「Repeat Index」は1番目、2番目…と数えます）

プログラミング言語で番号を扱うときは、一般的に「1」からではなく「0」から数えます。

この数え方は慣れないうちは違和感があると思うので注意です。

終わりに

今回は、JavaScriptにおける

• 変数の設定と呼び出し方
• 配列の使い方

について解説しました。

これまでの記事で既に触れた内容が多く理解しやすかったのではないでしょうか？

一方で、プログラミング言語を扱うことに抵抗を感じた方もいらっしゃると思います。

プログラミング言語を使ってコードを書くのは、「慣れ」が非常に重要な要素となるので、ぜひ自分で書いてみて理解を深めていただきたいです。

次回は、JavaScriptを使った「条件分岐」「繰り返し」の方法について解説していきます。

こちらもショートカットと同じところ、違うところを明確にしながら説明していきますので、お楽しみに！

次回の記事はこちら！

あわせて読みたい

「条件分岐」「繰り返し」をJavaScriptで行う方法を理解しよう！ 【iOSショートカットで学ぶ！プログラミング教室】の第8回となった今回は、 JavaScriptで「条件分岐」「繰り返し」を行う方法を学習していきます。 プログラミングの基…

プログラミング教室の記事一覧