Web制作日記

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

ベアさん
記事内に商品プロモーションを含む場合があります

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

ベアさん
ベアさん

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

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

アウトプットする内容
  • HTML&CSS
  • JavaScript→今日はこれ
  • PHP
  • WordPress
  • CSS設計

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

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

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

ベアさん
ベアさん
プログラマー / 起業家
Profile
プログラマー.site管理人

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

実はまだ10代です!
最近はWeb制作で稼げるように奮闘してます。
プロフィールを読む
スポンサー

JavaScriptを解説してみる

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

いつも通り

  • 頭の中にあること
  • 調べてなるほどって思ったこと

の2つを書きますね。

注意点

JavaScriptのことを略して「JS」と書くので、以下の文章でもそのつもりで!

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

頭の中にあること

そもそも、JavaScriptって何?

そもそも、JSって何をする言語なの?

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

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

ベアさん
ベアさん

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

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

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

Webサイトに動きをつける例
  • スライドショー
  • ポップアップ(ほわっと出現するやつ)
  • ボタンを押したら、文字が変わる
  • 無限スクロール(Youtube, Xみたいな)

などがあります。

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

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

細かくできること

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

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

細かくできることは

細かくできること
  • スライドショー
  • ボタンを押して、〇〇系(文字変えるとか、TOPにスクロールとか)
  • スクロールの挙動を変える(例:HIYACHU-TABEYO)
  • カーソルを合わせたら、画面が動く
  • ローディング中とかに別の画面を出す(例:株式会社モンブラン)

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

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

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

JavaScriptの記述方法

できることはわかったけど、JSってどんなコードを書くの?

って人もいるはずです。

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

●変数(定数)

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

文法は以下の通りです↓

変数(定数)の文法

let 変数名 = 値
もしくは
const 変数名 = 値

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

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

// 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 = ["エビ", "黒豆", "栗きんとん"]

●オブジェクト

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

オブジェクトの文法

{ name: “太郎”, area: “東京都”, age: 17 }

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

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

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

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

●if(elseとかも)

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

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

ベアさん
ベアさん

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

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

基礎的な文法

if (条件式) {
// 条件が一致する時の処理
}

他にも、elseを使って繋げれます
if (Aくん) {
// りんごをあげる
} else if (Bくん) {
// バナナをあげる
} else {
// Aくん、Bくん以外の人
// みかんをあげる
}

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

const age = 15

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

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

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

●関数

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

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

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

関数の基礎文法

function 関数名() {
// まとめたい処理をかく
}

また、関数は呼び出して初めて処理を実行します
関数名()

実際のコードはこちら↓

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

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

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

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

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

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

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

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

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

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

ベアさん
ベアさん

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

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

非同期通信の文法

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

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

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

非同期通信は他にも

  • コールバック関数
  • Promise

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

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

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

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

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

その他のJSを使ってできること
  • モーダルウィンドウの表示
  • 動的フォームのバリデーション
  • リアルタイム検索
  • Google Mapsとか
  • 画像のズーム
  • ドラッグ&ドロップ

などがあるみたいです。

悩む人
悩む人

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

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

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

日常ネタ

通信制高校を卒業できるのがほぼ確定しました!わっしょい。

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

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

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

ベアさん
ベアさん

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

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

Web制作、頑張るよ〜!

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

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

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

次回もお楽しみに!

P.S

8話書いたよ↓

あわせて読みたい
[Web制作日記#8]PHPを解説してみる。
[Web制作日記#8]PHPを解説してみる。

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

あわせて読みたい
Web制作日記のアーカイブ【随時更新】
Web制作日記のアーカイブ【随時更新】
ABOUT ME
ベアさん
ベアさん
プログラマー / 起業家
プログラマー.site管理人

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

実はまだ10代です!
最近はWeb制作で稼げるように奮闘してます。
記事URLをコピーしました