すると以下のような画面が表示されると思います。右の端に開いているのがディベロッパーツールと言われるものです。これはHTMLやCSSなどを調整する際にも使用するので、使用方法については別途説明します。今回は右上に赤枠で囲っている部分のconsoleと書いてあるタブをクリックしてください。そこに先ほどの「alert(“○○”);」を入力してください。enterを叩くと以下のようにアラートが表示されます。いかがですか?簡単ですよね。javascriptを実行できました。次は例を交えながら簡単に文法を学びましょう。内に入力された文字をコンソールに出力します。World」のような文字のことを文字列と呼びます。)で囲む必要があるので注意しましょう。World");セミコロン文の最後はセミコロン(;)で終わります。セミコロンはなくても正常に動作する場合が多いですが、思わぬ不具合が生じる可能性があるので忘れずにつけましょう。World");コメントアウト文頭に「//」を書くと、その行はコメントとみなされます。そのため、プログラムとしては無視され、実行されません。(コメントアウトと言います)コメントは、どのような意味のコードであるかを記すメモなどとして使われます。次は、数値(数字)を扱っていきましょう。数値は文字列と違いクォーテーションで囲みません。数値は足し算や引き算といった計算もすることができます。足し算は「+」、引き算は「-」の記号を用います。2);は足し算されて3が出力されます。2」にクォーテーションをつけると、文字列と解釈されそのまま出力されます。文字列と数値は違うものであることを認識しましょう。2");掛け算「*」、割り算「/」かけ算は「*」(アスタリスク)、割り算は「/」(スラッシュ)という記号を用いて計算します。「%」記号を使うと、割ったときの余りを求めることができます。どのような時に使うかピンとこない方もいらっしゃるかと思いますが、例えば偶数の時のみ処理する場合は2で割って余りが1の場合のみ処理するなどで使用することがあります。文字列とはクォーテーションで囲まれたものです。「+」用いて、文字列同士を結合することができます。“空いた”」とすると、「”お腹空いた”」という1つの文字列になります。ついて説明していきます。変数は、データ(値)の入れ物(箱)です。箱に名前を付けますが、その名前を「変数名」と呼びます。箱の中に文字列や数値などを入れていきます。プログラミングの「=」は「等しい」ではなく、「右辺を左辺に代入する」という意味です。「let」は「これから変数を定義します」という宣言で、その後ろに変数名を記載し、値を代入します。変数名「name」に文字列「nabe」を代入します。変数の使用方法は簡単です。「”nabe”」という値が代入された変数nameを出力すると、「”nabe”」という値が出力されます。変数名「name」に文字列「nabe」を代入します。「nabe」が出力されます。変数はクォーテーションで囲みません。「console.log(“name”);」のように変数名をクォーテーションで囲むと、nameが変数ではなく「文字列」として認識され、「name」の文字列として出力されてしまうので注意しましょう。変数名「name」に文字列「nabe」を代入します。文字列「name」が出力されます。変数は、「文字列」や「数値」と同様に扱えます。代入されている値が、文字列の場合は他の文字列と連結することができ、数値の場合は計算に用いることができます。文字列「佐藤さん」が出力されます。数値「11」が出力されます。6);変数のメリット変数について説明しましたが、なぜ変数を使うのでしょうか。以下のようなにメリットがあります。同じ値を繰り返し使うことができる変更に対応することができる変数名から値の意味を推測でき、わかりやすい。「同じ値を繰り返し使うことができる」「変更に対応することができる」という例を説明します。似た文章を何度も書くのは大変ですが、変数を使用すれば同じ値を繰り返し使え、楽にコードを書くことが出来ます。文章が変更されても、変数を用いていれば、代入する値を変更するだけで、使用している箇所の全てを変更せずとも、変更に対応できます。//script.js//変数を使用しない場合//「を勉強した。」に変更したい場合、3箇所変更する必要がある。console.log("HTMLを勉強した。");console.log("CSSを勉強した。");console.log("Javascriptを勉強した。");//script.js//変数を使用する場合//「勉強した。」に変更したい場合、textに代入している値を1箇所変更するだけで良い。変数名(変数の名前)は基本的に自由に決めることができますが、誰にでも何のために使用されるものか分かりやすい名前をつけるようにしましょう。変数の名前の付け方にはいくつかのルールがあります。10;変数の更新1変数は、一度代入した値を変更することもできます。一度値を代入した変数に、その後再び値を代入すると、後に代入した値で変数の中身が上書きされます。新しい値」と書けば値が変更されます。"sato";//「sato」が出力console.log(name);ここで気付いた方もいらっしゃると思いますが、プログラムは基本的に上から順に実行されます。変数の更新2数値の更新の際ですが、元の値に対して値を更新したい場合もあると思います。元の値に5を足して、再び元の値に代入することで実現できます。5;//「7」が出力console.log(number);こちらは省略した記載方法もあり、以下に例を上げておきます。変数とよく似たものに、定数があります。定数はletではなくconstを用いて定義します。定数と変数の違い変数と定数の違いを見てみましょう。変数は1度代入した値を更新できますが、定数は値を更新できません。定数の値を更新しようとすると、コードを実行した際にエラーが発生してしまいます。定数を使うメリット定数のメリットは、「値を更新できない」ことです。間違って更新することを防ぐことができ、より安全なコードを書くことができます。基本的に名前が変わることはないので、定数で定義したほうが良い。"Nabe";console.log(name+"です。");テンプレートリテラル上記では文字列や定数の連結には、「+」記号を用いてきました。他の方法として「テンプレートリテラル」という連結方法があります。テンプレートリテラルを用いると、下のように文字列の中に定数(変数)を埋め込むことができます。「こんにちはNabeは18歳です。」console.log(`こんにちは、${name}は${age}歳です。`);文字列の中で「${定数}」とすることで、文字列の中に定数や変数を埋め込むことができます。この時、文字列全体をバッククォーテーション(`)で囲む必要があります。シングルクオート(’)ではなくバッククォーテーション(`)なので間違えないでください。まとめここまで基本的なことを学習しましたが、いかがでしたでしょうか。一回でわかる必要はありません。わからなければ、再度読んでみると理解度が上がると思うので、復讐してみましょう。プログラミングスポンサーリンクシェアするTwitterFacebookはてブPocketLINEコピーnabelogをフォローするnabelognabelog関連記事Node.js【Windows10】VSCodeとNode.jsインストールではまったことただVScodeをインストールしてNode.jsの環境作るだけのつもりでしたが、結構はまりました。問題としてはVScodeのターミナルでやと入力しても、以下のようなエラーが発生してしまっていました。'npm'...Ruby【Symbol】Rubyの基礎【学習】この記事ではRubyのSymbolについての学習方法を解説していきます。以前Rubyの基礎でStringの記事を記載しましたが、今回はSymbolについて簡単に説明します。installしようとしたら以下のようなエラーが発生しました。`gi...Ruby【Procオブジェクト】Rubyの基礎【yieldメソッド】Procオブジェクトはブロックをオブジェクト化するために使用します。分かりにくいと思うので例を交えながら説明していきます。以下のように「new」でインスタンス化します。[192...Ruby【メソッド】Rubyの基礎【学習】メソッドは何度も同じ処理をする場合に、それをまとめることによって何度も同じ処理をしなくていいように、処理をまとめたものになります。以下の例のようにメソッドを作成し、呼び出すことが可能です。今回はRubyでクラスを作って、それを使ってみることを説明していこうと思います。クラスを定義する際は「class」と書いた後、キャメルケースでクラス名を記載して、処理を書いて「end」で閉じます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。2021.01.312021.03.16タイトルとURLをコピーしました。