初心者必見!まず最初にJavaScriptで覚えるべき基本構文はコレ!


そもそもプログラムってどうやって書くんだろう
JavaScriptのプログラミングがよく分からない
初心者が覚えておくべき基本構文って何だろう

これからJavaScriptを学習しようという方にとって、プログラミングとは何か?どうやって勉強を進めていけばいいのか悩むケースも少なくないでしょう。

特に、JavaScriptに関してはネット上にさまざまな情報が散乱しており、まず最初に何から手を付けて良いのか迷いますね

この記事では、初心者でもJavaScriptにおいてまず覚えておくべき基本構文を理解するための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

プログラミングとは?

みなさんはプログラミングにどのようなイメージがあるでしょうか?

昔も今も、コンピュータは何らかの指示がないと何も動きません。例えば、Aという処理をしたら次にBの処理を実行してね…というような指示が必要なわけです。

この指示を与える行為がプログラミングであり、どんな指示をするのかを記述したものがプログラムになります。

また、現在ではPython, Ruby, PHP, Java, C#…など、さまざまなプログラミング言語があります。これは利用するPCや環境・目的によって使い分ける必要があるのですが、ブラウザ上で実行できる唯一の言語がJavaScriptなのです。

そのため、Web開発において必ず学習する必要のある重要な言語であり、本記事ではJavaScriptをこれから学習する方に向けて最低限覚えておくべき基本構文について解説していきます。

変数

この章では、プログラミングに必要となるもっとも基本的な変数について解説していきます。主に、変数の役割や使い方について学習していきます。

変数とは?

プログラムを書くうえで必要不可欠なのが変数です。

変数はさまざまな値を一時的に保存することができて、いつでもプログラムから呼び出して利用することができます。また、好きな変数名を設定できるので、変数の中にどんな値が格納されているのかを把握しやすくしてくれます。

例えば、ユーザーがログインした時に以下のようなメッセージを表示するとしましょう。

これは【太郎】というユーザーがログインしたときに表示するメッセージです。

次に、【次郎】さん【三郎】さんの場合も用意してみましょう。

このようにユーザーごとにそれぞれ異なるメッセージを用意しなければいけません。では、ユーザーが1,000人いたらどうでしょうか?もしくは、100万人のメッセージを用意することを想像してみてください。

どう考えても非効率ですよね。

ところが、変数を使うとたった1つだけメッセージを用意すれば良いのです。例えば、【太郎】という文字列が格納された変数があれば次のように記述できます。

実行結果

このようにメッセージの中に変数を挿入すれば、変数に格納されている文字列を画面に出力させることができます。

つまり、変数の値を変えるだけで異なるメッセージを出力できるようになるわけです。

変数はプログラムを効率よく記述するための基本的な考え方になるのでよく理解しておきましょう。

変数の作り方

それでは、実際に変数を作ってみましょう!

これまでのJavaScriptでは変数を作る時にvarが使われていましたが、現在ではletかconstを使うのが主流なのでこれから学習する方はこちらを使うようにしましょう。

letとconstを使って値を格納するには次のように記述します。

let / constに続けて好きな変数名を記述し = で値を格納することができます。

格納された値が文字列や数値など、どんなものが格納されているのかは自動的に認識されます。また、このサンプル例だけを見るとletもconstも同じような使い方ができるように思いますよね?

しかし、大きな違いとしてconstで定義した変数は再代入ができません。

そのため、次のように違う値を同じ変数に続けて格納するとエラーになるのです。

対して、letの場合は再代入ができます。

プログラムの途中でうっかり変数の中身を変更したくないようなケースは意外と多いので、2種類の定義方法を使い分けられるようになりましょう。

また、さらなる活用事例やより深い変数についての知識を学びたい方は、次の記事に詳しくまとめているのでぜひ合わせて参考にしてみてください!

JavaScriptの変数って何? varで宣言や初期化をしてみよう!
更新日 : 2019年4月26日

配列

この章では、複数の値を格納することができる配列について見ていきましょう!主に、配列の役割や作り方、値の取得・変更について学習していきます。

配列とは?

前章で学んだ変数は、基本的に1つの値しか格納することができません。

しかし、配列を使うと複数の値をまるで1つのデータのように扱うことが可能になるので、より複雑な処理を効率化することができるわけです。

例えば、次のように複数の文字列を格納する場合を考えてみましょう。

このように変数は1つの値しか格納できないので、必要な文字列だけ変数も用意することになります。これが100個とか1000個必要だと考えると大変ですよね。

このような場合、複数の文字列をたった1つの配列へ一気に格納することができるわけです。

配列の作り方

それでは実際に配列を作ってみましょう!

基本的な作り方は変数と同じなのですが、格納する値を [ ] で囲んだ中に記述していくのが基本になります。

この場合は、arrayという名称の配列に3つの文字列を格納しています。

[ ] の中に必要なだけ値を格納することが可能で、【,(カンマ)】を使って値を区切っていきます。

また、値は文字や数値が混在していても問題ありません。

さらに、配列の中に別の配列を格納することも可能なので、複雑なデータ構造を作ることもできるようになります。

配列要素の取得

配列の作り方が分かったところで、格納されている値を取得する方法についても見ておきましょう。

先ほど配列に値を格納する時に [ ] で囲んだ中に1つずつ値を記述していきました。実は、この順番はインデックスと呼ばれており、0,1,2,3,4・・・という感じで番号が自動的に割り振られているのです(0から数える点に注意しましょう)

例えば、先ほど作成した配列をもう一度見てみましょう。

この場合、0番目のインデックスに格納されているのが【リンゴ】であり、1番目が【200】になるというわけです。

このインデックス番号を利用することで、配列に格納されている値を次のように記述することができます。

実行結果

配列名に続けて [ ] の中にインデックス番号を記述するわけです。つまり、array[0]と記述すると0番目のインデックスに格納されている値を取得することができるのです。

配列についてはさまざまな活用方法があるため、次の記事で体系的に学習しておくことをオススメ致します!

【JavaScript入門】配列の使い方と操作まとめ(初期化・追加・結合・検索・削除)
更新日 : 2019年4月21日

制御構文

この章では、プログラムを組み立てるのに必須となる制御構文について見ていきましょう!主に、制御構文の役割や代表的なIF文・for文について学習していきます。

制御構文とは?

制御構文というのは、一般的にプログラムを分岐させたり繰り返したりといった処理を実現する構文を指すことが多いです。

代表的なのはIF文やfor文でしょう。

例えば、とある条件の時に任意の処理を実行したいという時はIF文がよく使われます。

条件を作成することで、複数の処理に分岐させるという複雑な処理をプログラムすることができるわけです。

また、ある条件下の間は任意の処理を繰り返し実行させたい…という場合にfor文がよく使われます。

設定した条件に合致している間は、任意の処理をずっと繰り返し実行し続けます。

このようなプログラムを意図的に制御することができる構文を制御構文と呼ぶわけですね。

IF文による条件分岐の作り方

それでは実際にIF文を使って処理を分岐させてみましょう!

例えば、変数の値が100より小さい場合のみ任意の処理を実行するには次のように記述します。

この例では、条件式をnum < 100としているので変数の値が100より小さい場合のみコンソールログへ文字列を出力します。 ちなみに、elseを使うことで条件に合致しなかった場合の処理も同時に記述することができます。

このように、条件式に当てはまるかどうかでプログラムを分岐させることができるので便利ですね。 IF文については他にもさまざまな活用方法が用意されているので、次の記事で体系的に学習を進めてみてください!

for文による繰り返し処理の作り方

今度はfor文を実際に作ってみましょう!

例えば、10回繰り返し処理を行うためには次のように記述をします。

実行結果

for文は初期値として設定された変数を指定した量だけカウントアップしていきます。この例であれば、初期値iに対してi++というカウンタを作成しているので、1ずつカウントアップしていきます。

つまり、初期値iが条件式(i<10)をもとに10未満の間は処理を繰り返すという意味になります。 このfor文は処理を繰り返すという特性から、配列の要素をすべて取得するようなケースでもよく使われます。

実行結果

このように配列要素のインデックス番号をfor文の繰り返し処理を使って、1つずつ取得していくわけですね。

また、for文は他にもfor-in文、for-of文、forEach文があり、それぞれ目的に応じて使い分けると効率の良いプログラムを作成することができます。詳しくは次の記事で体系的にまとめているのでぜひ参考にしてみてください!

【JavaScript入門】for文のループ処理はこれで完璧! for-in / for-of / forEach文も徹底解説!
更新日 : 2019年7月4日

まとめ

今回は、JavaScriptを学習するうえで覚えておくべき基本構文について見てきました!

最後に、もう一度ポイントをおさらいしておきましょう!

  • 変数はlet / constを使い分けられるようになろう
  • 配列は複数の値を1つのデータのように扱える
  • 制御構文には主にIF文、for文がある

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説