NRIネットコム Blog

NRIネットコム社員が様々な視点で、日々の気づきやナレッジを発信するメディアです

フロントエンドとバックエンドの違い

本記事は  執筆デビューWeek  5日目の記事です。
✨  4日目 ▶▶ 本記事 ▶▶  6日目  🔰

 

 初めまして。執筆デビューWeek5日目を担当します、小畑です。

 私は今年の4月に新卒入社し、研修を受けた後の8月からクラウド事業推進部に配属されました。現在はバックエンドエンジニアとして対顧客の比較的大規模な開発に携わっています。私は学生時代にも開発した経験が有りますが、当時はフロントエンド開発を主に行っていたため、バックエンド開発をする中でギャップを感じることが多々有りました。

 今回は、私が行っていたデバッグ方法や必要なスキルなど、フロントエンドとバックエンドの違いについてまとめてみようと思います。フロントエンド開発はかなり小規模で個人開発に近い形だったために感じたギャップかもしれないので、あくまで参考程度に読んでいただけたら嬉しいです。

フロントエンド?バックエンド?

 そもそもフロントエンドエンジニアとは?バックエンドエンジニアとはなんぞや?と

思う方のために簡単に説明します。

フロントエンドエンジニアとは

 フロントエンドエンジニアは、Webサービスなどで直接ユーザーが目にする見た目の部分の開発を行います。具体的にはマウスホバーをトリガーにボタンの色を変化させたり、文字や画像を配置させたりしています。その他、見えない部分ではバックエンドに処理を依頼するAPIリクエストを送ることも行っています。例えば、SNSの例ではAさんがBさんをフォローするボタンを押すとフロントエンドからバックエンドに「AさんがBさんをフォローするボタン押したよ」とAPIリクエストを送り、以降のデータベース更新などの処理をバックエンドにパスします。

 フロントエンドの主な開発言語は、HTML, CSS, JavaScriptが挙げられます。最近はReact, Vue.js, Next.jsなどのJavaScriptのフレームワークやライブラリを利用しての開発も増えています。

フロントエンド開発例

バックエンドエンジニアとは

 バックエンドエンジニアは、ユーザーからは目に見えない裏側のシステム開発を行います。具体的には情報の登録や更新、削除処理を行ったり、登録情報の取得、加工処理を行ったりしています。上記のフロントエンド開発の説明でのSNSの例に挙げているようにフロントエンドから送られてくるAPIリクエストを基にAさんがBさんをフォローしたステータスを表すようフラグを変更したり、更新日時を付与したりしてデータベースの更新を行います。バックエンドでは、プログラミング言語以外にもサーバーやデータベースなど幅広い知識を使用しています。

 バックエンドで使用される開発言語はかなり種類が多いのですが、主にはJava, Ruby, Python, PHPが挙げられます。フロントエンド同様、開発効率を高めるためSpringBootなどの各種フレームワークを利用して開発が行われます。

バックエンド開発例

と、フロントエンドとバックエンドについてまとめましたが、上記は一般的な分類方法になります。フロントエンドエンジニアであってもバックエンドの業務をこなすこともあるので、フロントエンドとバックエンドどちらが専門分野かはっきりしないシステムエンジニアもいます。また、フロントエンドもバックも一貫して開発が行える敏腕エンジニアも世の中には存在しています。

 

フロントエンドとバックエンドの違い

 ここまででフロントエンドとバックエンドについて理解をしていただいたところで、フロントエンドとバックエンドそれぞれについて私の経験をもとにまとめていきたいと思います。

デバッグ方法

フロントエンドのデバッグ方法

 フロントエンド開発での主なデバッグ方法は意図したデザイン、挙動となっているかを実際の画面を動作させて、目視による確認を行います。意図した出力ではない場合、画面リクエスト時にエラーが出力される場合出力されない場合でデバッグ方法が異なります。

エラー出力されている場合

 エラーの指摘箇所を読み解き、原因や怪しい箇所を見つけて解消します。これは、フロントエンドに限らずプログラミングではもっとも基本的なデバッグ方法であるかと思います。

エラー出力されてない場合

 特定の値をログ出力させる処理をプログラムに埋め込み、開発者ツールなどを利用してコンソールにログとして値を表示させてデバッグします。このデバッグ方法は、エラー出力時にも意図した値を扱っているか、取得できているか確認するために使用します。

エラー出力されていないかつ、ログに出力できるデータがない場合

 作成したコードがプログラム言語の仕様規則に則っていない又はBootstrapなどのフレームワークと相性が悪く、意図したスタイルが効いていないことが原因になっている可能性を疑います。各フレームワークの仕様を整理したり、スタイルの優先順位を確認したりしてデバッグします。

 意図した出力ではないが上記の対応では対処できない、悪さをしている箇所の見当がつかない場合もあります。その場合は、特定のブラウザでのみ想定通りに動作しないという事象が発生していることを疑います。ブラウザとライブラリの相性が良くないために発生していることがあるので、別ライブラリの導入などでクロスブラウザ対応をします。

バックエンドのデバッグ方法

 バックエンド開発では、実装する処理を小さい単位に切り分けてそれぞれのデバッグを行い、切り分けたものを少しずつ統合して再度デバッグを行っていきます。実装する処理すべてをコーディング仕切った後にエラーが発生しデバッグをしなければならなくなると、なかなか原因を突き詰められず、もぐら叩き状態でエラーと格闘することもあり、骨が折れることもあります。

 処理を受けてDB操作をするシステムを例として、切り分けて行うデバッグの方法を説明します。処理を大まかに切り分けるとデータベース処理部分とアプリケーションのビジネスロジック部分に分けられます。さらに切り分けて、ビジネスロジック部分はリクエストボディを受け取る処理や条件分岐処理などの組み込む処理毎に切り分けられます。データベース処理部分は、データベース接続やクエリの実行などに切り分けられます。このようにして、できる限り処理を小さくして切り分けた単位ごとにPostmanやWorkbenchなどを利用してそれぞれデバッグを行っていきます。それぞれが正常に動作すれば、少しずつ組み合わせて実現したい処理に近づけていきます。

必要なスキル

フロントエンドに必要なスキル
  • プログラミング言語の知識
  • フレームワークの知識
  • UI/UXの知識
  • 情報収集能力

 その他にもフロントエンド開発において必要なスキルは挙げられますが、上記4つは必要不可欠なスキルだと感じています。その中でも特に情報収集能力が重要だと思っています。フロンエンドで使用されるフレームワークは流行り廃りがその他の言語と比べて早いです。新しいライブラリや技術の活用情報などがSNSに拡散されています。それらを上手く知識に取り入れて活用することでより効率的または、流行りのスタイルに沿った開発が行えます。情報は日々増え続けていますが、たくさんあるからこそ自ら価値のある情報を得られる力が大切だと感じています。

バックエンドに必要なスキル
  • プログラミング言語の知識
  • フレームワークの知識
  • Webサービス構築のための全般知識(API設計、データベース、クラウドサービスなど)

 バックエンド開発もフロントエンドと同様に他にも必要なスキルが挙げられますが、上記3点のスキルが必要だと感じています。実際に私が業務の中で手が止まる時となるとプログラミングの記述方法で止まることよりも、圧倒的にWebサービス構築のための知識がないことが原因であることが多いです。バックエンド開発の中でクラウドサービスなどと連携をして処理をすることがあります。ロジックの記述方法を検索して知識を得たとしても意図した処理をさせるためには、使用するWebシステム内でどのようにデータを扱っているのか、どの情報が必要かなどWebサービス構築に使用するシステムについて知っていなければ正しく処理できません。

 例えば、ストレージサービスにAmazon S3を使う処理を実装した時に以下のようなエラーが返ってきたこととします。

org.apache.http.conn.ConnectionPoolTimeoutException: Timeout waiting for connection from pool

 これは、S3内部でHTTPコネクションプールサイズの設定値(デフォルトでは50)を越えたためエラーが発生しています。そのため、S3からオブジェクトを取得した際には解放を行う処理が必要です。このように意図した処理を実装するためには、S3などのクラウドサービスについて理解することが必要になります。

ドキュメントの検索方法

フロントエンド関連のドキュメントの検索方法

 ドキュメントの検索を行う際、まずは絶大なる信頼のある公式ドキュメントを十分に読み込みます。(読み込むと敢えて表現したのは、公式ドキュメントをよくよく読みと小さい文字で情報が記載されていたことを何度か経験したためです。。)公式ドキュメントでも必要な情報が得られなかった場合、テックブログなどで検索を行います。しかしながら前述の通り、フロントエンドの技術は流行り廃りが目まぐるしく、古くなったドキュメントの情報が掲載されていることがあります。ドキュメントが古いとドキュメント内で使用しているバージョンと開発で使用しているフレームワークのバージョンが異なり適応できなかったり、現在では主流ではない技術を使用しているドキュメントのため、あまり参考にならないという問題が発生します。そのため、ドキュメントを参照する際は何年に掲載、更新されたドキュメントか確認を行います。また、検索しても得たい情報がひっかからないということも稀にあります。

バックエンド関連のドキュメントの検索方法

 バックエンドもフロントエンドと同様に公式ドキュメントを第一に検索し、それでも情報を得られなかった場合にテックブログなどで検索を行います。バックエンドはフロントエンドと比べて枯れた技術要素が多いため、SQLやロジックの設計方法などの情報が公式ドキュメントのみならず、ネット上にも潤沢にあることが多いです。しかしながら、クラウドやコンテナなどの中でも一般的にあまり使用されない機能に関する情報は日本語化されていない情報が多く、検索するのに苦労したり、言語が異なるために正しく内容を理解することに苦しんだりすることもあります。また、日本語の記事が多くある内容であっても、専門的な知識がないために得たい検索内容がぼんやりしたままでなかなか焦点を絞れないこともあります。前述にもある通り、バックエンドはWebサービス構築のための全般知識も必要です。そのため、AWSやMysqlなどのWebサービス構築時に利用するシステムの基礎的な仕様等の理解に努めて、得られた知識をもとに検索すべき内容を絞り、情報の取捨選択を行います。

まとめ

 私の経験上でのフロントエンド開発とバックエンド開発をそれぞれ簡単にまとめてみました。これまで大きくまとめてシステムエンジニアとしてフロントエンドとバックエンドを見ていましたが、違いにフォーカスしてみると意外とたくさんあることが分かりました。また、それぞれの特徴をまとめたことでバックエンドでのデバッグ方法を改めて自分の中に落とし込むこともできました。今のところ、フロントエンドとバックエンドどちらの専門性を高めるかは決めていないので、何にでもなれるエンジニアを目指して開発を頑張っていきたいと思います。