Webアプリケーションをつくるときに考えていること

こんにちは、小谷です。フロントエンドエンジニアとしてAMBLに在籍しています。
この業界にはいって早10年。
自分だけじゃなく、職種としてもやれること、やることが増え続ける日々と格闘中です。
最近は、もっぱらWebアプリケーション開発に携わる機会が増えてきました。
案件を通して、実装の仕方や関連技術などがわかってきましたが、これまで制作してきたWebサイトなどとは勝手が違って戸惑うことも多いです（使う脳みそが違う感じ・・・）。
情報共有などを行う際、エンジニア間ではソースコードや会話でどう作るかを伝えたりしています。
とはいえ、小難しいことには変わりはなく、それをエンジニア以外の方になるとどう伝えようかを困ったりしています。
そこで、今回は開発を行うにあたり、考えていることやよく出てくる用語を工程ごとに自分なりにまとめてみました。

そもそもWebアプリケーションって何？

Webブラウザ上で動くアプリのことです。
たとえば、「Gmail」や「まとめサイト」、この記事を書いている「note」もWebアプリケーションみたいですね。
他にも、「記事一覧」機能や「管理画面」機能など、部分的に実装することもあります。

どうやって作るか？

たとえば、「記事一覧」と「記事詳細」があるWebアプリケーションを作る場合、大まかには下記のことを考えます。

1. 仕様を決める

2. 情報を設計する

3. Webブラウザに表示させる

1.仕様を決める

「仕様を決める」では、実現したいことをできるだけ事細かに挙げます。
たとえば、記事詳細にはどのような内容を表示させるか、検索機能だと「カテゴリー絞り込み」や「キーワード検索」をつけたいね。ユーザーにとって使いやすい形だと「ページ送り」や「並び替え」といった機能もあったほうがいいね。など。

2.情報を設計する

「情報を設計する」では、上記で決めた仕様を実現するにはどのような情報が必要かを洗い出し、どのように情報を受け取れば実現できるかを考えます。
たとえば、「カテゴリー絞り込み」機能を実装するのであれば、記事ごとにカテゴリーを設定できるようにしなくてはいけません。
もしもカテゴリーの複数選択が必要であれば情報の送り方を変える必要があり、設計した内容に沿って情報で受け取れるようにAPIをつくる必要があります。
APIは、バックエンドエンジニアにつくってもらう場合や「Contentful」や「microCMS」といったヘッドレスCMSのサービスを通してフロントエンドエンジニアがつくる場合などさまざまです。

3.Webブラウザに表示させる

「Webブラウザに表示させる」では、JavaScriptフレームワークを用いて設計した情報を受け取り、出力します。
JavaScriptフレームワークだと、Reactをベースにした「Next.js」、Vue.jsをベースにした「Nuxt.js」などが有名どころです。
設計した情報を受け取って、表示するためのテンプレートとなるページや仕様で決めた機能などを実装します。

まとめ

ざっくりまとめると・・・

何を実現したいかを洗い出し、「仕様を決め」ます。その仕様を元に「情報を設計」して、中身を作り込み「Webブラウザに表示させる」ハコをつくって中身をとりだすイメージ

です。

ただ、ハコをつくる際は、仕様と情報を整理したうえで他ページでも流用できるように考えたりしています。
（静的サイトのように、HTMLとCSSを調整するだけではない。そもそも全部JavaScriptで書いている・・・）

また、正しく表示されているかをさまざまなパターンで試す必要があります。
（デバッグは大変だけど、とても大切）

他にも、色々とありますが、あくまでも一例です。
小難しいこともあると思いますが、大枠でいいのでどのようなことができるか、どうつくっているかをなるべくわかりやすく伝え合う必要があるなと感じる今日この頃です。
以上、ところどころ気持ちがこぼれる小谷でした。

AMBL採用サイト