[Web制作日記#7]JavaScriptを解説してみる。

今日で日記も7日目です。

ベアさん

この記事では、「現時点でのJavaScriptのアウトプット」をするよ！

ちなみに…全5回のアウトプットシリーズのうちの2回目です↓

ちなみに、なぜアウトプットシリーズ書いてるかというと「現時点のスキル感」を残しとくためです。

僕が本当に稼げるようになった時、みなさんにこんぐらい学習すれば良いのか〜って温度感を知っていただけたら嬉しいです。

…ということで、ぜひ最後まで読んでくださいね。

ベアさん

プログラマー / 起業家

Profile

プログラマー.site管理人

<どんな人か>
・エンジニア2年生
・メイン言語：Ruby on Rails
・Web制作の勉強中...

実はまだ10代です！
最近はWeb制作で稼げるように奮闘してます。

プロフィールを読む

X

JavaScriptを解説してみる

さっそくJavaScriptを解説していきます。

いつも通り

の２つを書きますね。

それでは、見ていきましょう↓

頭の中にあること

そもそも、JavaScriptって何？

っていう人もいるはずです。

JSを使ってできることを一言で言うなら

ベアさん

「Webサイトに動きをつけること！」だよ

とかいっても、「動き？わかるような…わかんような…」ですよね。

動きをつけるとは、例えば

などがあります。

HTML&CSSで静的なサイトを作って、JavaScriptで動的に仕上げる…

そんな二段構成でWebサイトはできてるわけですね。

細かくできること

ここからは「JavaScriptを使ってできること」を思いつく限り出していきます。

できることを知ってたら、あとは調べて使ったら良いだけなので。

細かくできることは

などがパッと思いつくものです。(例に載せているのは、別格なやつが多いですが笑)

ただ、JSを使ってできることは無限にあるので、あとは実務で必要になった時に調べたりロジックを考えたりするのが良いかと。

あとは、文法的なことについて書きます↓

JavaScriptの記述方法

って人もいるはずです。

ここからは、JavaScriptの文法的なことをメインで解説していきます。

●変数(定数)

変数といって、値を格納する箱のようなものをプログラミングでは設定できます。

文法は以下の通りです↓

ちなみに、「=(イコール)」はプログラミングの世界では代入を意味します。

具体的なコードはこちら↓

// let, constで変数を作る
let name = "太郎"
const number = 1

悩む人

letとconstの違いって何？

という人もいるはずです。

letとconstの違いは「後から変更できるか？(再代入できるか？)」ってことです。

コードを見た方が速そうです↓

// letを使うと、後から変更できる
let name = "太郎"
name = "山田 太郎"

// constを使うと、後で変更ができない
const number = 1
number = 3 // エラーになる

ちなみに、プログラミングは基本再代入を避けたいので、constを使う方が多いです。

いつ使うの？とかはまた勉強していきましょう。とりあえず次に進みます。

●配列

配列とは、値が入ったケースのようなものです。

おせちで例えるとわかりやすいですが、

って感じに分かれています。

文法は以下の通りです↓

まぁ、[]で文字列や数字を囲うだけなので簡単ですね。

実際のコードはこんな感じ↓

// []で囲むだけ
["太郎", "東京都", 17]

// 変数に入れて使うことが多い
const oseti = ["エビ", "黒豆", "栗きんとん"]

●オブジェクト

オブジェクトとは、配列の要素ひとつずつに名前をつけれるようにしたものです。

↑だと、太郎くんのプロフィールを説明できてますね。

実際のコードは下記のような感じです。

// 信号機のオブジェクト
{ ok: "緑", stop: "黄", bad: "赤" }

// オブジェクトも変数に入れることが多いよ
const likes = { animal: "犬", fruits: "いちご", number: 7 }

●if(elseとかも)

次は条件分岐として、if文を解説します。

前提として、if文を使ってできるのは「条件によって異なる挙動をする」ようにすることです。

ベアさん

例えば、Aさんにはりんご、Bさんにはバナナをプレゼントするイメージだよ！

基礎的な文法は以下の通りです↓

コードを見た方が早いかも↓

const age = 15

if (age >= 20) {
  // もし、20歳以上の大人なら
  // お酒やたばこOK
} else if (age >= 18) {
  // もし、20歳未満で18歳以上なら
  // 結婚できる
} else {
  // その他のこどもなら
  // 学校に行く
}

上のコードは「学校に行く」の処理が走ることになります。

意外と簡単でしょ？プログラミングって簡単なんですよ〜実は。

●関数

次は関数といって、処理をひとまとめにすることができます。

例えるなら、スパイスをまとめてカレーのルーにするイメージで「あとは使うだけ(鍋に入れるだけ)」の状態にする感じ。

関数の基礎文法はこちら↓

実際のコードはこちら↓

// 平日の1日を関数にしたら...
function weekday() {
  // 朝ごはん食べて、身じたくする
  // 出社する
  // ミーティングする
  // ランチする
  // 定時で帰る
  // 晩ご飯を家族で食べる
  // 寝る
}

// 関数を呼び出す
weekday()

ちなみに、関数名()の「()」には引数という関数内で使える変数を定義できます。

// 休日の1日を関数にしたら...
function holiday(isGoAut) {
  if (isGoAut) {
    // おでかけする日

    // 朝７時に起きる
    // 朝食食べて、着替える
    // ドライブでおでかけ
    // お昼ご飯を食べる
    // おでかけ先を堪能する
    // 帰ってきて寝る
  } else {
    // おでかけしない日

    // 朝は10時に起きる
    // ぐうたら...
    // テレビ見て寝る
  }
}

// 引数を指定する
// trueだとおでかけする日になる。
holiday(true)
holiday(false)

関数はちょい難しいかも。慣れたらそんなに難しくないから頑張ろう！

●非同期通信(これがJSのミソ！！)

これがJavaScriptの強みであり、難しいのですが非同期処理ってものがあります。

ベアさん

話すと長くなるけど、要するに裏側で通信するってこと。(?)

非同期通信の文法は至ってシンプルです↓

コードは下記のような感じ↓

async function hidouki() {
  // サーバーと通信する処理の前にawaitをつける
  await tusin()
  normal()
}

非同期通信は他にも

などの方法もありますが、8割ぐらいがasyncをfunctionの前につける方法です。

お疲れ様です！クラスとかもありますが、これでJSのことは大丈夫だと思います。

調べてなるほどって思ったこと

JSで細かくできることは他にもいろいろあるな〜って思ったので調べてみました。

結果、Web制作でよく使うJSはこちら↓

などがあるみたいです。

悩む人

何を言ってるか、全然わからないよ…

って人も多いと思いますが、これから頑張りましょう。

通信制を卒業できるのがほぼ確定した！

ってニュースがあります。

通信制高校って正直マッチョにやれば、スクーリング含めて「1ヶ月」ほどで1年分の学習終わるんっすよね(笑)

それがようやく7月末にして終わりました！

ベアさん

なんだかんだで、後回しにしてたんだよね…

ただ、脳のリソースも空いたし、やっと事業にフルコミできるので嬉しいです。

Web制作、頑張るよ〜！

次回：PHPを解説してみる。

アウトプットシリーズ第3回として、次は「PHP」を解説します。

JSもそうですが、プログラミングは僕割と得意なのでスイスイかけますね笑

次回もお楽しみに！

P.S

8話書いたよ↓

あわせて読みたい

[Web制作日記#8]PHPを解説してみる。

Web制作日記のアーカイブはこちら↓

あわせて読みたい

Web制作日記のアーカイブ【随時更新】

ベアさん

プログラマー / 起業家

X

プログラマー.site管理人

<どんな人か>
・エンジニア2年生
・メイン言語：Ruby on Rails
・Web制作の勉強中...

実はまだ10代です！
最近はWeb制作で稼げるように奮闘してます。