【JavaScript入門】変数とデータ型、型の変換と強制

JavaScript
スポンサーリンク

初心者の独学でのプログラミング学習はとてもツライ…

プログラミングをマスターしたい!

今のIT業界はプログラミングエンジニアが不足していると言われています。
高収入の職業とも言われる分野もありますし、AI、機械学習、ディープラーニング、IOTといった注目される分野が目白押しです。

でも、いざ初心者がプログラミングをマスターしようとすると…

  • 本を読んだりネットの記事で自力で勉強しているけど限界を感じる
  • プログラミングスクールに定期的に通うのは面倒だ
  • 地方に住んでると家の近くにプログラミングスクールなんてない
  • どのプログラミング言語を学べばいいのか悩む
  • 実際の就職や転職にプログラミングが活かせるのか心配だ

など、プログラミングを自分で勉強しようとすると悩みが尽きません。

プログラミングに詳しい友人に教えてもらおうと思っても、そんな友人なんて滅多にいません。いたとしても細かく教えてくれるほど時間に余裕がある人はいないでしょう。

そんな独学でプログラミングをマスターするのに限界を感じてる方に、オンラインプログラミングスクールをがおすすめです。

おすすめのオンラインスクールはこちら

JavaScript入門として、基礎的なところから扱っていきましょう。

ここでは、変数とデータ型、型変換と型強制について扱って扱ってみようと思います。

実行環境とファイル構成はこちらでやったものを引き続き使っていきます。

【JavaScript入門】JavaScriptを始めよう!実行環境構築とコンソール表示
JavaScriptは軽量なクロスプラットフォームのオブジェクト指向プログラミング言語です。近年、サーバーサイドでも利用され、Web開発に重要な言語となっています。ここでは実行環境の構築し、JavaScriptコンソールで結果を確認します。

ではやっていきましょう。

スポンサーリンク

変数とデータ型

前回使った実行環境のscript.jsファイルをテキストエディタで開いて、次のコードを書いてみます。

前回はconsole.log()に直接文字列を入れて、JavaScriptコンソールに表示しました。

ここでは、まず変数を利用して、そこに文字列を代入しています。

変数を利用するには、変数を宣言する必要があります。最初にvarと書いて変数名を定義します。(varと宣言しなくても実際にはJavaScriptでは機能しますが、グローバル変数と区別する為に宣言しておきましょう。Pythonでは宣言はしませんでしたね)

var 変数名 = 文字列や数値など

ここではfirstNameという変数名にして、エドワードという文字列を代入しました。文字列はクォーテーションで囲む必要があります。ダブルクォーテーションでも動きますが、シングルクォーテーションで囲むのが良いとされています。(ちなみに、エドワードは鋼の錬金術師の主人公の名前)

この変数をconsole.log()に代入して実行します。

このスクリプトをインポートしたindex.htmlを開いて実行してみましょう。

ブラウザのJavaScriptコンソールを開くと、「エドワード」と表示されています。

変数はデータの入れ物とよく言われます。このように変数を定義してデータを渡して一連の処理ややりとりなどをしたものを、この中で一時的に保存するのが変数の役割です。

なお、JavaScriptは新仕様としてECMAScript 6(ES6)から変数の宣言も新しくなっています。

【JavaScript】(ES6) letとconstを使った変数宣言
avaScriptのモダン仕様であるECMAScript 6(ES6)について、ここでは変数宣言のletとconstについて扱います。constは定数で変更不可、letは変数の重複を許さずブロックスコープで参照するという特徴があります。

ここでは、varを使った宣言を使って行きますが、これに限らず新仕様のES6も今後は必要となってきます。このES6の仕様については、また別の機会で扱います。

データ型

ここでは変数に文字列を代入しましたが、変数に代入できるデータ型は次のようなものがあります。

  • 文字列型(String)- クォートで囲まれた0個以上の文字の集合
  • 数値型(Number)- 整数、浮動小数点数
  • 真偽型(Boolean)- true(真)/false(偽)
  • 特殊型 – 未定義(Undefined)/空(Null)
  • シンボル型(Symbol)- シンボルを表す

最後のシンボル型はECMAScript2015の新規格で導入されたもので、これはまた別の機械に触れることにします。

コードを書いてみると次のようになります。

コードをこのように書き換えてブラウザを更新してみると、console.log()にはisHumanしか代入していないので、trueのみが表示されるはずです。

次のようにも書くことができます。

最初は、varで変数を宣言するまででとどめています。ちなみに変数は、カンマで区切って複数宣言することもできます。

そして、あとでこの変数に文字列を定義しています。

実行してJavaScriptコンソールを見てみましょう。

最初のconsole.log()には、値が入っていないのでundefinedと表示されています。代入されたものは内容が表示されています。

変数の書き方

変数は自由に宣言することができますが、ちょっとだけ書き方のルールがあります。

例で示しておきます。

変数は文字かアンダースコア、ドル記号で書き始めます。最初の例のように数字で書き始めたい場合などはアンダースコア(_)を冒頭につけるなどして変数を作ります。

複数の単語を組み合わせて変数を作る場合は、先頭の単語の文字は小文字、以降の単語の冒頭は大文字にして結合します。こういう書き方をキャメルケースと言います。

コメントアウトした「if」の場合などは、JavaScriptで使われている予約語で、変数に使うことができません。予約語には、break、case、catch、delete、do、else、default、class、for、import、returnなど30個数以上あります。

MDNのページに予約語がまとめられています。

予約語
以下は予約語であり、変数、関数、メソッド、あるいはオブジェクトの識別子として用いることはできません。以下は ECMAScript の仕様で既存のキーワードとして予約されているものです。

仕様の変更によって将来的に増えることもありますので、どんなものがあるか見ておくといいでしょう。

スポンサーリンク

型の変換と強制

変数の型変換と型強制について見ていきます。

JavaScriptは変数のデータ型を処理に合わせて扱います。次のコードを見てみましょう。

文字列型と数値型を合わせてconsole.log()で表示しようとしていますが、JavaScriptは数値を文字に合わせて表示してくれます。

JavaScriptコンソールをみるとこうなります。

何も問題なく、表示されているのがわかります。

同様に、これまでの内容を含めてまとめてコードにしてみましょう。

JavaScriptコンソールで表示してみるとこうなります。

これらが型の強制になりますが、次に型の変換をみてみましょう。

先ほどのコードをちょっと変えてみます。

先ほどの変数定義のコードの下に、同じ変数を使って再度追加しています。ageは数値でしたが、文字列で再定義、jobは違う表記にしています。

同じ変数がありますが、これを実行するとどう表現されるのかということになります。

ここではconsole.log()ではなく、alert()を使って、ポップアップ表示させてみます。

実行するとこのように表示されます。

JavaScriptコンソールには表示されず、ブラウザにポップアップ表示されているのがわかります。

内容は、新たに書き込んだ変数が表示されているのがわかります。OKボタンをクリックすれば閉じることができます。閉じるまではブラウザは処理中ということになっています。

今度は次のようなコードを用意してみます。

console.log()でfirstNameとlastNameを表示するコードですが、firstNameはこれまでと同様に定義されていますが、lastNameに関してはちょっと違うことをやっています。

prompt()は、ユーザーの入力を受け付けるために、ダイアログを表示するものです。ここではダイアログで表示させたい文字列を引数に指定して、名前は何か聞いています。戻り値は入力された文字列が返ってくることになります。

実行してみましょう。

ブラウザ上にダイアログがポップアップ表示されて、入力が促されます。

ダイアログボックスに名前を入力してみます。

「エルリック」と入力して、OKボタンをクリックします。

コンソールに表示されているのが確認できました。

スポンサーリンク

コメントの書き方

上のコードで、コメントを書いた部分がありましたので、ここでJavaScriptでのコメントの書き方をまとめておきます。

コメントは、スクリプトの動作に関係しないメモ的な情報で、コードの概要の説明を書くことで他人がコードを読んで内容を把握しやすくしたり、メンテナンス時の説明などに利用できます。

コメントには3つの書き方があります。

  • // 1行コメント
  • /* 複数行コメント */
  • /** ドキュメンテーションコメント */

ドキュメンテーションコメントはクラスなどの直前にその役割を記述するもので特定のルールがあります。専用のツールで抽出することで、ドキュメントの仕様書を自動生成したりすることができます。これはまた別の機会に触れることにしましょう。

コメントは、コードのメモだけでなく、スクリプトを一旦無効にしてコードを動きをみたりすることにも使います。コメントを無効化することをコメントアウト、再び有効化することをコメントインといいます。プログラミングを書いている時によく利用する方法でもあります。

スポンサーリンク

まとめ

ここではJavaScriptの変数とデータ型について扱いました。

変数には書き方のルールがあります。データ型には、文字列型、数値型、真偽型、特殊型、シンボル型という違いがあります。

JavaScriptでは、変数は処理の中で型の強制があったり変換がされたりします。

コメントの書き方もコーディング時に便利なので理解しておきましょう。

自宅学習はオンラインプログラミングスクールを活用!

自宅学習にはオンラインプログラミングスクールがおすすめ!

オンラインプログラミングスクールは独学でプログラミングを学習する時のデメリットを解消する仕組みが備わっています。

気になるところは…

学習がオンラインで完結するのはもちろんですが、独学ではできない質問サポートがあるかどうか。わからないことを現役のエンジニアが質問に答えてくれるといいですよね。

受講者個人に担当のメンターがつき、マンツーマンで学習の相談に乗ってくれることも必要で、ITエンジニアの世界についても伺えたりもすると幅が広がります。

オンライン面談だけでなく、チャット機能を使って気軽に質問を投げかけることができることも大切です。

また、オリジナルプロダクトの開発とサポートがコースの中に組み込まれていて、独学ではなかなか難しい実践的なスキルの習得にもつなげたい。

プログラミングをマスターした後の実際の仕事につながる転職サポートでがあると、ITエンジニアの世界に飛び込むのに不安が解消されます。

そんな豊富なメニューが揃っているおすすめのオンラインプログラミングスクールがこちらにあります。

おすすめのオンラインプログラミングスクールはこちら

TechAcademyはおすすめのオンラインプログラミングスクール!

オンラインのプログラミングスクールでは、テックアカデミーの充実度が目を見張ります。

オンラインで受講が完結するので、自宅学習でプログラミングをマスターしたい人にはテックアカデミーがおすすめです。

メンター制度も現役のプロが対応してくれます。大学生などが対応しているスクールに比べて本気度と専門性が違います。メンター制度の無いスクールもありますし、担当では無いメンターが対応するスクールもあったりするので、相談の質が違いますね。

チャットサポートもあるので、それが無いスクールに比べて相談の気軽さの違いがあります。

プロダクト開発のサポートで実践力が養われるだけでなく、どの講座を利用しても転職サポートが受けられるのはありがたい。

用意されているコースも、初心者向けのプログラミングコースから、Python、Java、PHP、iPhoneアプリ、AndroidといったITエンジニアのベースとなる主要な言語だけでなく、AI、データサイエンス、ブロックチェーン、webアプリケーションと行った実践的なコースまで用意しています。

他にも、webデザインやUI/UXデザイン、動画編集、webディレクションやwebマーケティングといったプログラミング以外での役立つコースまであります。

このようなたくさんの選択肢から自分にあったコースを選ぶことがでるのがテックアカデミーです。

コースの期間も短期間でマスターしたり、長期の受講でじっくり取り組むコースを選ぶこともできます。

複数講座のセットコースを利用することで大幅な割引が受けらるので、お得に受講することもできます。

無料体験もありますので、プログラミング学習でオンラインスクールを考えている人はTechAcademyをぜひ利用してみてください。

テックアカデミーの公式サイトはこちら

JavaScript
スポンサーリンク
CodeGraffitiをフォローする

とにかく進め!Pythonプログラミング入門 〜 コードグラフィティ
タイトルとURLをコピーしました