Webアプリの基本要素と開発の流れ

Webアプリケーション開発の学習を始めるにあたり、まずは基本的な用語や概念を理解することが重要です。このレッスンでは、Webアプリを構成する要素から、開発作業でよく使われるツールや概念までを解説します。

ブラウザ

ブラウザは、WebサイトやWebアプリを見るためのソフトウェアです。Google Chrome、Apple Safari、Microsoft Edgeなどが代表的です。あなたがこれから作成する小さなWebアプリも、ブラウザで開いて動かすことを前提としています。

Webページの構成要素

Webページは主に3つの言語で構成されています。

• HTML (HyperText Markup Language)
  Webページの骨組みを作る言語です。見出し、文章、入力欄、ボタン、表、リストなど、画面に何をどこに置くかを決めます。例えるなら、部屋の間取りや骨組みのようなものです。
• CSS (Cascading Style Sheets)
  Webページの見た目を整える言語です。文字の大きさ、色、余白、配置、ボタンの形、スマートフォン表示の調整など、デザインに関する部分を担当します。例えるなら、部屋の内装やデザインです。
• JavaScript
  Webページに動きをつける言語です。ボタンを押したらデータを保存する、入力内容を読み取る、一覧を更新する、エラーメッセージを表示するといった、操作や処理を担当します。例えるなら、人が実際に動いて作業する部分です。

Webアプリの役割分担

Webアプリは、利用者が直接触れる部分と、その裏側で動く仕組みに分かれます。

• フロントエンド
  利用者が直接見る画面側のことです。入力欄、ボタン、一覧表示、デザイン、画面の動きなどがフロントエンドに含まれます。初心者が小さなWebアプリを作る場合、まずはフロントエンドから始めることが多いです。
• バックエンド
  画面の裏側で動く仕組みのことです。データベースにデータを保存する、ログイン情報を確認する、サーバーで複雑な処理を行う、外部サービスと連携するといった処理を担当します。本書では、最初から複雑なバックエンドには進まず、まずはローカル環境やブラウザ内でのデータ保存から始める考え方を取っています。

利用者の視点

Webアプリ開発では、利用者の視点も非常に重要です。

• UI (User Interface)
  User Interfaceの略で、利用者が直接触る画面や操作部分のことです。ボタン、入力欄、メニュー、一覧表示、チェックボックスなどがUIにあたります。使いやすいUIは、利用者が迷わずスムーズに操作できることに繋がります。
• UX (User Experience)
  User Experienceの略で、利用者がツールやアプリを使ったときの体験全体のことです。画面がわかりやすい、入力しやすい、迷わない、ミスしにくい、結果が見やすい、使っていて負担が少ないといった、全体の使いやすさがUXを構成します。

開発の基本単位と管理

Webアプリ開発では、コードやデータを効率的に管理するための概念があります。

• ファイル
  データやコードを入れておく一つの書類のようなものです。たとえば、index.html、style.css、script.jsなどがファイルです。小さなWebアプリも、複数のファイルでできています。
• フォルダ
  複数のファイルをまとめて入れておく箱です。メモアプリ用のフォルダ、CSV整理ツール用のフォルダ、画像を入れるフォルダなど、関係するファイルを整理するために使います。
• プロジェクト
  作りたいアプリやツールのファイル一式をまとめたものです。メモアプリのプロジェクト、問い合わせ文生成ツールのプロジェクトなど、一つの目的を持った作業単位と考えるとわかりやすいでしょう。
• Git
  コードの変更履歴を記録するための仕組みです。いつ、どのファイルを、どう変更したかを残せます。開発のセーブポイントを作る道具と考えるとわかりやすいです。
• リポジトリ
  Gitで管理するプロジェクトの箱です。コード、ファイル、変更履歴をまとめて管理します。
• GitHub
  Gitで管理したコードや変更履歴を、オンライン上で保管・共有できるサービスです。自分のコードを保存したり、他の人と共有したり、エンジニアに見てもらったりできます。ただし、APIキー、パスワード、個人情報、社内情報などを置かないよう注意が必要です。
• コミット
  Gitで変更を記録することです。「この時点の状態を保存する」という意味に近く、ゲームのセーブポイントのように考えるとわかりやすいでしょう。「メモ保存機能を追加」「CSV読み込み処理を修正」「スマホ表示を調整」のように、何を変更したかを記録します。
• コミットメッセージ
  コミットするときに付ける短い説明文です。何を変更したのかがあとでわかるように書きます。例として、「メモ登録機能を追加」や「スマホ表示を調整」などがあります。難しく考えず、変更内容がわかれば十分です。