takazono 
こんにちは！AppTalentHubの高園です。今日は専門用語についての「専門用語No.1」として「フロントエンド」「バックエンド」について書いていきたいと思います！
入社当初、エンジニアさんや企業様とのオンラインミーティングが頻繁にありました。当初は毎日新しいアプリを「覚える」「教わる」「実践」の繰り返し、その中でのIT業界の専門用語が飛び交うミーティングに参加するのはパンパンの頭の中に（水袋みたいなもの）石が入ってくるような感覚（笑）もう、専門用語の知識を入れる余力が無いのでフィーリングで（持ち前の）会話を認識していました。昔、目の前でイタリア人の友人が会話している時にニュアンスと単語で何となく察していた時に似ています（汗）
しかしそれでは永遠にイタリア人とは仲良くなれないので片言の英語で仲良くなったのと同じようにIT業界の単語を覚えていくしかありません。しかも日本語（英語も多いですが）なので、学べばいいんですよね。言葉は分かっても具体的なイメージや実践してる画面までは分からないので少しずづ中身（実際のITの挙動や開発内容）も覚えていきたいと思いますが、ひゃー、難しい！他の業務の合間合間に少しずつ覚えていっています！ノーコードアプリを使いこなし、少しでもより便利な世の中にしていきたいですよね！
今回のテーマは：「フロントエンド」と「バックエンド」
ノーコードエンジニアとの会話に「フロント」や「バックエンド」といった言葉が登場します。これらはアプリ開発でよく使われる用語ですが、初心者の方（私のような）にはピンとこないこともあるでしょう。本記事では、この2つの言葉の意味をなるべくかみ砕いて説明し、「知らないと開発依頼が難しいの？」という疑問にも答えていきます。
フロントエンド（Front-end）とは？
一言でいうと、ユーザーが直接目にする「画面」のこと。
- 具体例ボタン・フォーム・メニューなど、アプリを開いたときに見える画面の要素画像や文字、ページのレイアウトなども含まれる
- 役割ユーザーが入力した情報を「裏側」に送ったり、逆に「裏側」から返ってきた情報を表示する使いやすいボタン配置や分かりやすいメニュー構成など、ユーザーが操作しやすいインターフェイスを作ることが重要
どうして大事なの？
アプリを使うとき、最初に目に触れ、最も多く操作するのがフロントエンド部分です。ここが使いにくいと、せっかく良いサービスを提供していてもユーザーが離れてしまいます。ノーコードでも「画面づくり」はドラッグ＆ドロップ操作である程度自由にできますが、見やすさや使いやすさを考えて作ることが大切です。実際に皆さんも、どこかのサイトでボタンの位置とか押しにくい、見つけにくい、などでそこのページから離れることがありますよね？その為、別途「デザイナー」が必要になってくることもあります。デザインが良い方がユーザーも使いたくなるし、実際に見やすい・使いやすいのでユーザー数が増えます。コストをかけられるならばデザイナーも雇うと良いでしょう。
バックエンド（Back-end）とは？
アプリの“裏側”で動いている仕組みのこと。
- 具体例データベース（顧客情報や在庫数などを保存する場所）決済情報の処理、会員登録の処理などのロジック
- 役割フロントエンドから送られた情報を保管・計算し、結果をフロントエンドに返す大量のデータを管理したり、複雑な計算を行う
どうして大事なの？
アプリの機能がしっかり動くかどうかは、バックエンドの仕組みにかかっています。たとえば、オンラインで商品を売りたい場合、顧客が注文した情報を正しく保存し、決済や発送情報を管理するのはバックエンドの役割です。ノーコードツールでも、データベースの設定や外部サービスとの連携が可能ですが、「何を、どう管理するのか」を決めておく必要があります。しかしこのバックエンドは普段ユーザーの立場だと（私も含め）触れることはありません。なのでどんな機能があるか、入れたいかは普段自分が使っているサイトやアプリを参考に伝えられますが、その仕組みや作る側の詳細は分かりません。実際に使ってみて「あれ？思っていたのと違う」「情報が正しく表示されていないぞ」「ボタンを押したのに本来の機能を実行しないなあ」等の問題はアプリの見た目、操作画面とは別のバックエンド側で操作が必要です。ただし、バックエンドが複雑になるほど開発期間や費用も変わる可能性があります。そのため、詳しく理解していなくても、最低限「どの機能が必要か」「きちんと動くのか」「実装可能なのか」をエンジニアに確認しておくことが大切です。
これを知らないとアプリ開発の依頼は難しい？
答えは「細かいことまでは知らなくても大丈夫」ですが、ざっくりと意味だけは押さえておくと便利です。
知っておくと得する3つの理由
- コミュニケーションが円滑に「フロントの画面デザインはこうしたい」「バックエンドでこのデータを管理したい」
といったやり取りがスムーズになります。 - 開発の範囲をイメージしやすい「表側（フロント）を充実させたいのか」「裏側（バックエンド）のデータ管理をしっかり作り込みたいのか」
優先度を決めやすくなります。 - 費用・期間を考えるときの参考にフロント部分のデザインにこだわるほど、コストや開発期間が増える傾向バックエンドが複雑になるほど、やはり開発工程も増えていく
まとめ
- フロントエンド: アプリの「見た目」や「使い心地」を左右する部分
- バックエンド: アプリの「裏側」でデータや処理を担う部分
ノーコードツールのおかげで、初心者でも比較的簡単に画面のレイアウトを作れたり、データを管理できたりする時代になりました。しかし、フロントとバックエンドの役割をざっくり理解しておくだけで、ノーコードエンジニアとの打ち合わせが格段にスムーズになります。フロントやデザインを重視したい！やデザインよりはバックエンドの機能を重視する！など、会話で使えるようになるとやり取りも楽ですよね。
細かい技術的なことはエンジニアに任せるとしても、「この部分は見た目にこだわりたい」「この処理はしっかりデータを保存したい」といった希望を伝えられるようにしておくと、理想のアプリにより近づけるでしょう。
余談：私自身はデザインセンスは本当にないのでかっこいいフロントエンドすら作れません。また、思ったようにフロントエンドの配置すら出来ないレベルです。例えばBubbleを使うと、思った場所にボタンが置けず、画面内で迷子に…。ずらすと違うところへ飛んでしまい、気づけばグループが大量に増産！その結果、何がどこにあるか分からなくなり、大きさや配置が思うように調整できない…（泣）。などなど、まだまだ勉強が必要です。まずはフロントエンドだけでもマスター出来るように頑張ります！
