NFTを始めるなら日本円で始められるHEXA

【毎日コツコツ】デイトラDay14 「JavaScript」の基本文法を学ぼう2日目！（学習用）

SHARE

上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。

デイトラ受講生のたくたくタックです。Webスキルを身に付けたく完全未経験から受講を始めています。

といっても、実はデイトラを開始したのは数年前….慣れないコードと向き合えなくなり挫折を繰り返しています。

こんな僕ですが、Webと関わるこの世の中では必須のスキルだと再認識して再起しました。

毎日コツコツ「必ず完走する」を目標に掲げ学んだ内容を記録に残します

過去に何度も挫折した私の記録はこちら→過去のブログ記事

タック
タック

ブログを書くことに時間をかけたり…計画性の無さを今では反省しています。

Web制作を学ぶ理由

僕がWeb制作を学ぶ理由は大きく分けて３つあります。

１，単純にWeb業界に興味がある

２，Web制作に関わる仕事で多くの人に喜んでもらいたい

３，現在中学受験を目指す息子が中学に上がった時にWeb制作の基本を教えたい

移り変わりの激しいWeb業界、変化をすることが当たり前であるという常識はサラリーマンではあまり常識ではありませんでした。ただ、Web制作を学ぶ中でプログラミングの常識を学ぶ事が出来ています。

もっと知識や実務経験を増やしたいと思っています。

前回デイトラ初級のDAY13で学んだ内容の続きとなります。

少し不安の場合はJavaScriptの基本を見てから次に進んでください。

それではデイトラ初級のDAY14の内容を学んでいきましょう。

タック
タック

まずはfunction(関数)について学んでいきます

このあたりから理解せずに次々に講義を進んだので後で頭の中が整理できなくなりました。

関数の考え方、ここで出てくる「引数」についてしっかり学んでいきたいと思います。

JavaScriptの関数（function）の基本を学ぼう！

「関数」は、プログラミングで特定の処理をひとまとめにしたもので、再利用性を持ち、引数を受け取り、値を返す。JavaScriptでは、functionを使って定義されます。

JavaScriptで使われる基本の形は以下になります。

js
function (){
console.log("");
}
()

// 関数の基本的な書き方
function 関数名(引数) {
  // 処理を書く
}

// 関数の呼び出し
関数名(引数に受け渡しする値);


//　引数を使ってメッセージを出力
わかりやすいように番号付けをしているが、引数に引き渡す値①のこんにちはが引数②に
当てはまり、③で出力するといったイメージ


function showMessage(2️⃣message){
    console.log(3️⃣message);
}
showMessage(1️⃣"こんにちは");

これを見ただけではわかりにくいと思います。ここに出てくる引数とは何なのでしょうか。

引数とは、関数に引き渡される値のこと。functionの外側で関数名と引数を定義します。

引数は必ずしも入力しないといけないということではありません。（過去にこの辺で頭の整理が出来なくなった）

js
function showMessage(){
    console.log("こんにちは");
}
showMessage();

//「こんにちは」と出力されます
（）空白でも上記のような出力ができるといったことを知っておきましょう。

JavaScriptの関数（function）の「返り値」について

JavaScriptの関数は、実行後に結果を返すことができます。これを「返り値」と呼びます。関数が値を返す場合、それは関数呼び出しの結果として使用できます。

返り値は、returnキーワードを使用して関数内で明示的に指定されます。例えば、次のような関数があります。

js
function add(a, b) {
    return a + b;
}

let result = add(3, 5);
console.log(result); // 出力は 8

この例では、add関数が2つの引数を受け取り、それらを足して返します。そして、add(3, 5)の呼び出しで8という値が返され、それがresult変数に代入されます。

function add(a, b) のように複数の引数を使う場合はカンマ（,）で区切ります。覚えておきましょう！

「返り値」例文

引数の５倍の数値を出力してみよう

js
function multiplication(number){
    return number * 5
}
console.log(multiplication(2));　　//出力は１０

引数を使った計算式をこのように表す事もできるのでしっかり覚えておきましょう。

JavaScriptの関数（function）の「円の面積」を求めてみよう

関数を使って円の面積を求めます。

今回も２つの書き方を紹介しますが、なぜ２つこうして書いていくかというとコードの書き方は無数に存在するからです。

初学者の僕は１つをしっかり覚えたほうが良いかもしれませんが、どうしても次の項目に進んだ時に躓いたりしていました。

タック
タック

いくつもパターンを作って単純にアウトプット量を増やしています

円の面積（円周率を計算式に挿入する方法）

まず、円周率を数式に正しく組み込む方法はMath.PIを使うのが一般的です。

例題ではπ＝３と定義したものにしていますが、両方のやり方を覚えておきましょう！

まずはMath.PIを使って円周率を求めていきますね。

js
【関数を使った記述】
// 関数を定義
function calculateCircleArea(radius) {
    return Math.PI * radius * radius;
}

// 関数を呼び出し
let radius = 5;
let area = calculateCircleArea(radius);
console.log("円の面積:", area);　　//出力　円の面積: 78.53981633974483

【関数を使わない記述】
// 半径が5の場合の円の面積を計算
let radius = 5;
let area = Math.PI * radius * radius;
console.log("円の面積:", area);　//出力　円の面積: 78.53981633974483

//Math.PIは3.141592653589793で計算される※Mathと入力する際は頭文字は必ず大文字で書くようにしましょう
console.log(Math.PI);

両方のコードは同じ結果を出力しますが、関数を使うことでコードがより読みやすくなり、再利用性が高まります。

例題）円の面積を求めよう

ここでは円周率を３で定義します。

半径の５のときの数値を出力してみよう。このときの円周率は３とする。

js
// 円の面積を求める計算
let radius = 5;
const pai = 3;
let area = radius * radius * pai;
console.log(area);
//出力結果 75
-------------------------------------------------------
// 関数にまとめると
function calCircleArea(radius) {
  const pai = 3;
  let area = radius * radius * pai;
  return area;
}

console.log(calCircleArea(5));
//出力結果 75
--------------------------------------------------------
//円周率をMath.PIにする場合

// 関数を定義
function calculateCircleArea(radius) {
    let area = Math.PI * radius * radius;
    return area;
}

// 関数を呼び出し
console.log (calculateCircleArea(5));
-------------------------------------------------------
// 出力に円の面積:と加える場合は＋（プラス）をreturn に追加する
function calculateCircleArea(radius) {
    let area = Math.PI * radius * radius;
    let areano = "円の面積:"
    return areano+area;
    
}

// 関数を呼び出し
console.log (calculateCircleArea(5));　//出力結果　円の面積:78.53981633974483

【デイトラ初級Day14】条件分岐の方法

次に（if）を使った条件分岐について学習を進めていきます。

ここで突然「条件分岐」と言われても頭の中は「？」となって人もいるかもしれないので簡単な説明をしますね。

タック
タック

コーディングと条件分岐が全く一致していないタックですｗ

JavaScriptの条件分岐は、プログラムが特定の条件に基づいて異なるコードパスを実行することを可能にする制御構造です。条件分岐は、プログラムの制御フローを変更し、特定の条件が真の場合や偽の場合に異なる処理を行うことができます。これにより、プログラムは柔軟性を持ち、さまざまな状況に応じて適切な動作を行うことができます。JavaScriptでは、if文、else文、else if文、switch文などが条件分岐を実現するために使用されます。

これではわからない…

さらに簡単に！一言で説明すると、

条件分岐＝〇〇の場合▲▲する

基本的な構造は「〇〇の場合▲▲する」と覚えておいてください。

【JavaScript】条件分岐の基本的な書き方

条件分岐の基本的な書き方は、if文を使うことです。一般的な構文は以下の通りです

js
if (条件) {
    // 条件が真の場合に実行されるコード
} else {
    // 条件が偽の場合に実行されるコード
}

基本文法　→　if (条件) {条件が真の場合に実行されるコード}

こちらが基本の形になるのでしっかり覚えておきましょう。

Baby panda
Baby panda

そう言えば、JavaScriptでは、条件分岐や比較演算などでBooleanが使われるって聞いたんだけど何なの？

タック
タック

すごく良い質問だね！Booleanと言われるデータ型を条件に使用するんだよ。

もう少し説明を加えると、

Booleanは、プログラミング言語において、真（true）または偽（false）の2つの値のみを持つデータ型です。条件式の評価や制御フローの決定に使用されます。例えば、条件式が真の場合に特定の処理を実行し、偽の場合には別の処理を実行する、といった場面で利用されるんだよ。

あとひとつ！「比較演算」について解説してから例題に移りたいと思います。

比較演算とは、
比較演算は、プログラミングにおいて、値や変数を比較するために使用される演算子や操作のことです。比較演算は、2つの値を比較して、その結果が真（true）か偽（false）かを返します。

「xは３より大きい」といったことを数式を書くと「ｘ＞３）といったように書くことを比較演算と呼びます。例題も作ったので確認してください。

ｘ=　5にした時にif（ｘ＞３）とすることで「もしxの値が３より大きいとき、”３以上の数値です”」を出力する記述になります。結果が真（true）であったことがわかります。

js
// もしｘが３以上の時に「3以上の数値です」を出力してください。
let x = 5;
if(x > 3){
    console.log("3以上の数値です");
};
// 出力：3以上の数値です

【JavaScript】条件分岐の応用を学んでいこう！

基本的な考え方が理解できたところですこし応用した使い方を学んでいきます。

今回は例文を使って新しい使い方やコードを覚えていこう。

if文

最も基本的な条件分岐で、ある条件が真の場合に一連のコードブロックを実行します。例えば、

js
let x = 10;
if (x > 5) {
    console.log("xは5より大きいです");
}

この例文は比較演算でも使ったものとほとんど同じものを活用しています。

else文（それ以外は）

条件が偽の場合に実行するコードブロックを提供します。

js
let x = 3;
if (x > 5) {
    console.log("xは5より大きいです");
} else {
    console.log("xは5以下です");
}

else if文（それ以外で〇〇であれば）

複数の条件をチェックし、最初の条件が真でない場合に次の条件を評価します。

js
let x = 3;
if (x > 5) {
    console.log("xは5より大きいです");
} else if (x === 5) {
    console.log("xは5です");
} else {
    console.log("xは5未満です");
}

switch文

複数の条件を評価し、条件に一致するケースを実行します。

js
let fruit = "りんご";
switch (fruit) {
    case "りんご":
        console.log("りんごです");
        break;
    case "バナナ":
        console.log("バナナです");
        break;
    default:
        console.log("その他の果物です");
}

AND演算子 (&&)

両方の条件が真の場合にのみ実行されます。

js
let x = 6;
if (x > 5 && x < 10) {
    console.log("xは5より大きく、かつ10未満です");
}

OR演算子 (||)

少なくとも一方の条件が真の場合に実行されます。

js
let x = 10;
if (x > 5) {
    console.log("xは5より大きいです");
}

条件分岐を活用することで、プログラムはさまざまな状況に応じて適切な処理を行うことができます。これにより、柔軟性が高まり、プログラムの品質が向上します。

【デイトラWeb制作　初級Day14】まとめ

本日もJavaScriptについて学びましたが、正直な感想はDAY１４と一区切りにしていますが本当に１日の量なのかと疑いたくなりました。僕の理解力がないだけかもしれませんがこの内容をすらすら進める人ってすごいなと思います。

さて、今回はfunction(関数)を使った基本的な文法から円の面積を求める方法、

さらに、「条件分岐」といったboolean型の出力方法を深く学ぶ事ができました。

タック
タック

たくさんのコードが出てきて付いていくのがやっとの状態でしたが楽しかった。

次の章でもJavaScriptについて学ぶということで、息切れ状態のこんな自分でも大丈夫かと心配していますが毎日コツコツ続けていきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

【毎日コツコツ】デイトラDay13 「JavaScript」の…

次の記事

【毎日コツコツ】デイトラDay15 「JavaScript」の…