モダンなフロントエンド技術を解説します!

こんにちは　霧崎さくやです。

元々は半導体業界でテストエンジニアをやっていましたが、
現在は独学でフロントエンドを勉強しています。

僕自身、四十八苦しながらプログラミングを独学で勉強し
試行錯誤の経験から、こちらのnoteで駆け出しエンジニアの方へ
分かりやく流行りの技術を発信していきます。

はじめに

対象者
「フロントエンドってどういうのが流行ってるんだろう」
「聞いたことはあるが詳しくは知らない」

という駆け出しエンジニア向けです。

この記事ではモダンなフロントエンド技術について解説しています。
では、さっそく進めていきましょう！

SPA(Single Page Application)

従来のWebページはページのリンクをクリックし
別のページに切り替える必要がありましたが、
SPAは1ページ内で文章や画像のコンテンツを構成し
リンクのクリックを行わずに画面内のコンテンツを更新させる技術です。

SPAを導入しているサイト
例えばGoogleマップでは別ページに切り替えずに、
地図の縮小拡大や移動など画面内のコンテンツを更新させています。

他にもSlackでは別ページに切り替えずに、
チャットを表示しつつ同じ画面で他のコンテンツを更新させています。

メリット
ページを切り替えないのでコンテンツにアニメーションを施すができる。
ユーザーのストレスを軽減する事ができる。

デメリット
JavaScriptの記述量が増えるので初期ローディングが長い。
モダンな技術なので試行錯誤する必要がある。

必要な物
Vue/React/AngularといったJavaScriptのフレームワークやライブラリ。

PWA(Progressive Web Apps)

従来のWebサイトはスマホアプリと異なり、
ホームボタンの追加やプッシュ通知などといった機能はありませんでした。
PWAはWebサイトをスマホアプリと同じように動作させ、
ホームボタンの追加やプッシュ通知などといった事ができる技術です。

PWAを導入しているサイト
例えばTwitterやInstagramはWebサイトでありながらも、
スマホアプリと同じようにホームボタンを追加できます。

メリット
ホームボタンを設置できるのでより手軽にWebサイトを利用してくれる。
スマホアプリとは違いアプリの審査がないのでスムーズにリリースできる。

デメリット
アプリストアにあるわけではないので新規ユーザー獲得には向かない。
ios端末はまだプッシュ通知など一部対応できていない機能がある。

必要な技術
Web App Manifest ...ストアを使わずホームにアイコンを用意する技術。
Service Worker ...オフラインでの利用やプッシュ機能を用意する技術。

さいごに

最後まで読んで頂きありがとうございます！
これでモダンなフロントエンド技術をあらかた学べましたね。

この記事をきっかけに、より良いフロントエンド 生活が
送れていただければ嬉しいです！