ノートアプリはどのような仕組みで作られているのか？【フロントエンド視点】

フロントエンドの方が基本的なプログラミングの勉強をしてきて壁に当たる問題の一つが「静的なウェブサイトは作れるけど動的なウェブアプリをどうやって作ればいいのかわからない」という点だと思います。
HTMLとCSSでレイアウトの実装ができるようになって静的なウェブサイトも作れる。JavaScriptでインタラクションもつけられる。
でもウェブアプリってそもそもどういう仕組みになっていてどうやって実装すればいいのか分からくて躓く瞬間があると思います。

対象読者

そこでノートアプリを例にして基本的なウェブアプリケーションの仕組みを解説してみたいと思います。対象としているのはこれからアプリケーションを作ってみたいと思っているような方です。
ウェブアプリケーションのディレクションなどをされている方にも参考になるかと思います。
あくまで「仕組みの説明」であってテクニカルな説明は省きます。

たとえばこのようなノートアプリがあるとします。
左側にはノートの一覧があり、右側には選択したノートが表示され編集できるようになっています。

ノートアプリを題材にするのでここでは基本的なノートアプリの機能を考えてみます。ごく基本的な機能だけに絞ると以下の３つが考えれられます。
- ノートを新規作成する
- ノートをアップデートする
- ノートを削除する
ではこれら３つの機能はどういう仕組みで動いているのか見ていきましょう。

ノートを新規作成する場合

フロントエンドの方であればクライアントサイド（ブラウザ）のことを理解しているかと思いますますが、基本的にはブラウザからのアクションを起点にして動きが起こると考えてください。
ノートの新規作成であれば
- 新規作成するノートのタイトルを入力して
- 「新規作成する」というボタンを「クリックしたら」
- そのデータをサーバーに送る
- サーバーのデータベースがアップデートされる
- そのアップデートされたデータがブラウザに送られる
- ブラウザでそのデータを受け取り表示する

クライアントサイドでは「データを表示するだけ」に徹してデータはサーバーで管理されクライアントサイドに送られる、という関係にあることを常に念頭においてください。

ノートをアップデートする場合

- ノートアプリの編集画面においてテキストが変更される
- そのイベントを受けて変更したデータをサーバーに送る
- データベースがアップデートされる
- アップデートされたデータがブラウザに送られる
- ブラウザでそのデータを受け取り表示する

基本的にはノートの新規作成と似たような動きですね。
どのタイミングで「変更した」という情報を送るのかはフロントのUXの設計次第で色々変わります。

ノートを削除する場合

- クライアントサイドから削除するノートのIDを送る
- サーバーではそのIDと一致するノートを削除する
- データベースがアップデートされる
- アップデートされたデータがブラウザに送られる
- ブラウザでそのデータを受け取り表示する

実際にはどうやって実装していくのか

ここまで簡単ではありますがノートアプリを例に説明してきました。
プログラミングを始めた頃はこのようなクライアントサイドとサーバーサイド（データベース）との関係がイメージできなくて躓きやすいと思います。
エンジニアにとって本当に理解するのに最短の道は実際に自分でコードを書いてみることです。

もしもっと興味を持たれた方や自分でもコードを書いてみたいと思った方はぜひこちらの記事を参考にご自身でコードを書いてみてください。
ReactとFirebaseを使用してノートアプリを一から実装しています。

今回は以上になります。
最後までお読みいただきありがとうございました。