More than 5 years have passed since last update.

OthloTechAdvent Calendar 2019

@kenshin1025in

TechTrain

jsonに焦点を当ててwebアプリの全体像を説明する

Last updated at 2019-12-12Posted at 2019-12-12

自己紹介

初めまして、情報科学部2年のけんしんです！

技術系の記事を書くのは初めてになります。
僕がwebアプリを作る上でつまづいたことを思い出しながら書きました！
これからwebアプリを作る人の参考になると嬉しいです。

はじめに

初めてデータベースなどを扱うWEBアプリを作る際に「フロントエンド」とか「バックエンド」とか「webAPI」とか「HTTP通信」とか「json」とか今までのプログラミング経験では聞いたことない言葉が出てくることがあると思います。

僕も最初は混同していたり勘違いして覚えたりしていました。そこで今回はjsonに焦点を当ててwebアプリをわかりやすく説明します。

jsonとはなんなのか

jsonとはデータを表すための文章です。

書き方にルールがありますがそれほど難しくありません。

言葉で説明してもわかりにくいと思うので実際のjsonを見てみましょう。

jsonの構造

sumple.json

{
    "name" : "名無しの権兵衛",
    "email" : "mailmail@gmail.com",
    "pass" : "password1234"
}

上のものがjsonファイルに書かれたjsonですね。

1行が１つのデータを表し、左の"name"や"pass"がkey、右の"名無しの権兵衛"や"password1234"がvalue(値)と呼ばれます。
基本的にそれらの行を{}(波括弧)で囲い１つのまとまりにします。
JavaScriptのオブジェクトと大体一緒です。（ちょっと違うけど）

知らない人は左が変数名で右が変数の中身を表していてそれが１つのまとまりになっているんだと思ってもらえば大丈夫です。

このように書くことで文章の形でデータを表すことができ、このデータから名前を取得したいと思った時に、nameを指定することで取ってくるといったことが出来ます。

jsonの型

sumple.json

{
  "egg": true, 
  "milk": 6, 
  "text": "佐賀市に有るか無いか、探しに歩かないか",
  "tenFibonacci": [1, 1, 2, 3, 5, 8, 13, 21, 34, 55],
  "friends": [
    {
      "name": "佐藤",
      "email": "sugar@gmail.com",
      "pass": "sato310"
    },
    {
      "name": "鈴木",
      "email": "belltree@gmail.com",
      "pass": "22key"
    },
    {
      "name": "めけめけ王子3世",
      "email": "makeKingdom@gmail.com",
      "pass": "mekemekePrinceAgree"
    }
  ]
}

jsonに入れることができるデータはstringだけではなく、数字や真偽値、配列、jsonの配列などを入れることが出来ます。関数とかは入れられませんが基本的なデータであれば入れることが出来ます。

ここまでのまとめ

jsonはデータを表すための言語、それで書かれた文章
jsonはkeyとvalueの関係でデータを表す
jsonのvalueには変数に入るものなら大概なんでも入る

WEBアプリではどのようにjsonが使われるのか

WEBアプリとはYouTubeやツイッター、GitHubなどWEB上でユーザが使うアプリケーションのことを言います。

最近のWEBアプリは１つの言語で作ることはあまりなく、見た目の部分と中身の処理の部分を分けて開発することが多いです。

この２つを区別するため見た目を「フロントエンド」、中身の処理を「バックエンド」と呼びます。

フロントエンドは要素の表示やページの遷移、DOM操作などをvue.jsやreact.jsなどのJavaScriptのライブラリ、フレームワークで行います。
バックエンドはユーザーの管理やデータベースの操作、複雑な計算などをruby、python、PHP、Goなどのサーバーサイド言語で行います。

このように分けると、フロントエンドはデータを表示するために（例えばデータベースに入ってるユーザーの名前を表示するとか）バックエンドからどうにかしてデータをもらってこなければいけません。

そこで登場するのが「webAPI」です。webAPIというのはバックエンドが用意する機能でイメージ的にはバックエンドが持っている関数を外からでも使えるようにしたようなものです。
これを使うことによってフロントエンドはバックエンドからデータをもらってくることができます。

流れとしては

フロントエンドが「ユーザーの名前教えて〜」とバックエンドに頼む
バックエンドはデータベースを検索して名前をフロントエンドに返す関数を呼び出す
フロントエンドはそれをみて名前を表示
って感じですね

webAPIを使う上でデータを通信で送る必要があります。
この通信にはHTTP通信というものを使うのですがこの通信では文章しか送ることができません。（最近はバイナリを送れるようになったというような話を聞いたような気もしますが今は気にしなくて大丈夫です。）

文章しか送れないがデータが送りたい。ここでjsonが使われるわけです。
jsonはフロントエンドとバックエンドのwebAPIを通したやり取りをする上でjsonを送りあってデータをやり取りするために使われます。

ここまでのまとめ

webアプリはフロントエンドとバックエンドに分かれている
フロントエンドとバックエンドはwebAPIを通してデータをやり取りしている
jsonで書かれた文章をやり取りする

なぜjsonを使うのか

データを表すための文章は他にもCSVやXMLなどがありますが、なぜjsonが使われるのでしょうか？

jsonはXMLと比べて文章量が少なく、読みやすいです。
下の例はまだシンプルですが、ネストしていくとjsonの読みやすさが実感できると思います。

sumple.json

{
    "name" : "名無しの権兵衛",
    "email" : "mailmail@gmail.com",
    "pass" : "password1234"
}

sumple.xml

    <name> 名無しの権兵衛 </name>
    <email> mailmail@gmail.com </email>
    <pass> password1234 </pass>

そして、jsonはフロントエンドとバックエンドの様々な言語で扱いやすいようになっています。
これらの理由からjsonがwebアプリで使われます。

最後に

webアプリはフロントエンドとバックエンドで構成されていること
その２つはwebAPIを通してHTTP通信をしてデータをやり取りしていること
それにはjsonが必要なこと
ということがこの記事でわかってもらえればいいのではないかなと思います。

最初は用語がたくさん出てくると思いますが、なんとなくで初めて、触ってみるとわかってくることが多々あると思います。
色々触ってみてどんどんわかるようになっていきましょう！

ありがとうございました!

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

jsonに焦点を当ててwebアプリの全体像を説明する

自己紹介

はじめに

目次

jsonとはなんなのか

jsonの構造

jsonの型

ここまでのまとめ

WEBアプリではどのようにjsonが使われるのか

ここまでのまとめ

なぜjsonを使うのか

最後に