Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

フロントエンド開発の注意点4つを簡単に解説


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20211230093445p:plain

おはようございます。Shotaです。

今回の記事では、フロントエンド開発の注意点について詳細に話していこうと思います。


フロントエンドとは

f:id:ShotaNukumizu_1000:20220104072823p:plain

フロントエンドとは、ユーザと直接データのやり取りを行う要素のことで、Web制作ではWebブラウザ側を意味します。

フロントエンドを担当するプログラマーは主に以下のことを担当しています。



ただし、業務内容は企業によって多少差があると思います。

フロントエンドが必要な理由

開発するアプリケーションを保守性やクライアントへの価値提供を両立させるために、アプリケーションを抽象化してレベルの高い設計を行う必要があります。この土台を考えるために、フロントエンドが実行されるしくみを検討していきます。

フロントエンドはブラウザで実行され、表示させるためにはHTML, CSSJavaScriptが必要不可欠です。実際に開発をすすめるためには、概念だけではなくHowの部分も理解しなければなりません。

フロントエンドをWebで提供する理由は、「クライアントがシステムを介して達成したいゴールを達成しやすくするため」です。フロントエンドが整理されていないアプリケーションは使い勝手が悪く、クライアントへ価値を提供するのが難しくなっていきます。

クライアントに良質なアプリケーションを提供するためには、フロントエンド開発は必要不可欠なのです。

フロントエンド開発の注意点

ここで、フロントエンド開発における注意点を列挙しておきます。

レスポンシブデザインの対応

f:id:ShotaNukumizu_1000:20211228133117p:plain

フロントエンド開発を行う上での一番の注意点は、レスポンシブ対応のWebページを制作することです。

レスポンシブデザインとは、デスクトップ版のWebページを画面サイズやWebブラウザに応じて表示できるデザインを指します。

ここ最近では、スマートフォンなどのモバイル端末からアクセスするユーザが増加しています。2015年にはGoogleが「PCでの検索数」よりも「スマホなどのモバイル端末での検索」の方が多くなったと発表しています。

このことを考えると、Webサイトを制作するには、モバイル端末からアクセスするユーザが理解しやすいUIを心がけることが必要不可欠です。

JavaScript

f:id:ShotaNukumizu_1000:20211114052320p:plain

二つ目の注意点はJavaScriptです。フロントエンド開発を行うためには、HTMLやCSSでは実現できない表現を加えられるJavaScriptが必要不可欠です。

フロントエンドで生計を立てたい人はJavaScriptは勉強しておきましょう。

デザイン設計

f:id:ShotaNukumizu_1000:20211217172637p:plain

三つ目の注意点はデザイン設計です。フロントエンドはユーザが直接目にする部分ですので、見やすくわかりやすいデザインを設計するのは必要不可欠です。

最近はFigmaのような画面のデザインを設計するツールが増加しています。

フレームワーク・モジュールの活用

最後の注意点はフレームワーク・モジュールの活用です。ここは一番難しいポイントですが、効率的にフロントエンド開発をすすめるためにはフレームワークやモジュールは欠かせません。

これだけ言ってもわかりにくいと思うので、以下のことに関するスキルを身に着けておくとフロントエンド開発を効率化できると思います。



まとめ

今回の記事では、一個人の見解でフロントエンド開発の注意点を簡潔にまとめてみました。

今回の記事を参考に、フロントエンド開発の質を高めていただければ非常に幸いです。

今回の記事はこれで終了です。

参考サイト

zenn.dev

www.acrovision.jp

www.internetacademy.jp