フロントエンドとバックエンドの違い｜どっちから学ぶ？

プログラミングを学び始めると、必ず出てくる言葉があります。フロントエンド。バックエンド。

なんとなく「見た目のほうと、裏側のほう」だと分かっていても、じゃあ具体的に何が違うのかと聞かれると、答えにくいですよね。

よく聞かれるので、今回はここをできるだけシンプルに書いてみます。どっちを先に学ぶといいのか、RJCの研修の順番にも触れながら。

レストランにたとえてみると

いちばん分かりやすいのは、お店の例えかなと思っています。

どちらが偉いという話ではなくて、両方そろって初めてお店が回るんです。

具体的に、何をしているのか

もう少し実務に寄せてみますね。

フロントエンドがやっていること

• 画面の見た目を作る
• ボタンを押したときの反応を作る
• 入力内容をその場でチェックする
• 読み込み中のくるくるを出す
• スマホでも見やすく整える

バックエンドがやっていること

• データを保存する・取り出す・計算する
• ログインしている人が本人かどうかを確かめる
• 他のシステムとやり取りする
• たくさんのアクセスが来ても落ちないようにする

ボタンひとつで、両方が動いています

たとえば、買い物サイトで「購入する」を押したときのこと。

1. フロントエンドが、押されたことを受け取って、二重に押されないようにボタンを止めます。そして「処理中です」の表示を出す。
2. その裏でバックエンドが、在庫があるか確かめて、決済を進めて、注文の記録を残して、メールの手配をします。念のため、同じ注文が2回届いても二重に決済しない仕組みもここで持っています。
3. 終わったら結果がフロントエンドに返ってきて、「ご注文ありがとうございます」の画面が出る。

ひとつの操作の裏で、両方が連携しているんですよね。

じゃあ、どっちを先に学ぶといいの？

これ、いちばん聞かれることかもしれません。正直に言うと、どちらから入っても大丈夫です。どちらにも良さがあるんです。

フロントエンドから始める良さは、書いたものがすぐ画面に出ることですね。動くのが目に見えるので、楽しさを感じやすいと思います。

バックエンドから始める良さは、プログラムの土台になる考え方が身につくことです。データをどう持つか、処理をどう分けるか。ここは目に見えにくいぶん、あとから独学で埋めるのが大変な部分でもあります。

RJCの研修は、バックエンドから始まります

参考までに、うちの順番も書いておきますね。4ヶ月・12段階の研修です。

前半でJavaを扱って、後半でReactやNext.jsに進みます。

なぜこの順番かというと、前半で「理由がわかって書ける」土台を作りたいからなんです。どこに何を書くべきか。どう分ければ後から直しやすいか。この考え方は、フロントエンドに移っても同じように使えます。

もちろん逆の順番で学ぶ道もあります。RJCはこの順番を選んでいる、というだけの話です。

どちらに進んでも、もう片方を知っていると強いです

ここがいちばん伝えたいところかもしれません。

フロントエンドの人がバックエンドを知っていると、「この画面を出すには、裏でどんなデータが必要か」が見えます。だから相談がスムーズになるんですよね。

バックエンドの人がフロントエンドを知っていると、「このデータの返し方だと、画面側が困るかも」が想像できます。

つまり、片方を選んでも、もう片方の知識は無駄にならないんです。RJCの研修が両方に触れるのも、そういう理由なんです。

よくいただくご質問

Q. 両方できる人になるべきですか？
A. どちらかを軸に持ちつつ、もう片方も分かる。そういう形がいちばん動きやすいと思います。最初から両方を極めようとしなくて大丈夫なんです。

Q. 独学でフロントから始めてしまいました。まずかったですか？
A. まったく問題ないです。むしろ動くものが作れているなら、それは大きな前進です。

Q. 未経験ですが、どちらのプロジェクトに入れますか？
A. 研修で両方に触れてから、興味や適性に合わせて相談できます。「インフラを学びたい」と相談して、実際に任された社員もいるんです。

Q. 話だけ聞くのはアリですか？
A. アリです。まず知るところから。

言葉が分かると、学習が楽になります

フロントエンドとバックエンド。言葉の意味がはっきりすると、教材を選ぶときも、求人を見るときも、迷いが減ると思うんです。

そして、どちらの世界にも面白さがあります。いまどちらかを学んでいる方は、その先にもうひとつの世界が待っていると思っておいてもらえたら嬉しいです。