最新のWebは機能・性能ともに急激な進化をとげています。しかし、その開発スキルを修得するのは大変です。新たに理解すべきテーマが多いうえに、処理の仕組みが大きく変わるため、これまで蓄積したノウハウや知識の多くが使えなくなるからです。別世界になった最新のWeb開発を基礎から学習し直す必要があります。

最新のフロントエンド技術がWebの常識をくつがえす

 Webではサーバが主役で、ブラウザは脇役です。サーバが主役というのは、データの保存・加工・検索や表示用のHTML生成等、ほとんどの処理を行うからです。ブラウザが脇役というのは、ユーザが入力したデータやクリック操作をサーバへ伝えることと、サーバから受け取ったHTMLを表示することしか行わないからです。この仕組みは1990年に世界初のWebページが公開されて以来、今日まで続いています。

 ところが、SNSやDX(デジタルトランスフォーメーション)が普及した現代では、サーバがWebの主役であることが制約になってきました。具体的には、画面を切り替えるたびに通信待ちでイライラする、通信圏外で利用できない、という2つの大きな制約です。そのため、これらの制約が問題となる、快適な操作性やモバイル利用を求める場合は、Webではなくアプリをインストールするのが常識になっていました。

 しかし、最新のフロントエンド技術が、この常識をくつがえすことになりました。フロントエンド技術とは、ブラウザでJavaScriptを使って動作する技術の総称です。この技術は、ブラウザ内でデータの保存・加工・検索、HTMLの生成、自由自在なグラフィック描画、3Dや動画の再生、ユーザの操作を妨げないバックグラウンド通信等、さまざまな機能を実現します。さらに、日進月歩の拡張が行われており、ブラウザさえあれば何でもできると感じさせるレベルにまで進化しています。

 この技術を活用すると、ブラウザを主役に変えることができます。具体的には、サーバから受信したデータやプログラムをブラウザ内部に保存して、サーバとの接続がなくても、ブラウザ単体で動作が可能になります。サーバはブラウザからの求められたときにだけデータやプログラムを提供する脇役に変わります。サーバとの接続なしで動作するわけですから、通信待ちのイライラや通信圏外で利用できないという2つの制約は根本的に解消されます。

 こうした最新のフロントエンド技術は、既に身近なところで活用されています。たとえば、通信待ちのないスムーズなスクロールができるGoogleマップ、キー操作に瞬時に反応するマイクロソフトのExcelやWord、動画や音声を使ったTeamsビデオ会議など、これまでアプリをインストールするのが常識だったものがWebブラウザ上で動作しています。

 フロントエンド技術の活用は、Webの弱点をカバーするだけではありません。開発者にとっては、マルチプラットフォーム対応(Windows、macOS、Linux、Android、iOS)が容易になります。ユーザにとっては、QRコードの読み込みやリンクをクリックするだけで、インストールの手間なしで、すぐに使えます。インストールするアプリより優れた特徴を持っています。

(写真:Shutterstock)
(写真:Shutterstock)
画像のクリックで拡大表示

経験者が戸惑う別世界のWeb開発

 ここまでは、最新フロントエンド技術活用の良い点を説明してきましたが、課題もあります。課題とは、この技術を活用したWeb開発の修得が大変なことです。

 なぜなら、新たに理解すべきテーマが多いうえに、処理の仕組みが大きく変わるため、設計・プログラミング・テストすべての段階で考え方や手順を変える必要があるからです。Web開発はこれまでと別世界になっているのです。

 考え方や手順を変えるということは、これまでのWeb開発で蓄積したノウハウや知識の多くが使えなくなることを意味します。そのため、Web開発の経験が長い人ほど戸惑います。さらに、フロントエンド特有の未知の用語や概念が理解を妨げます。

 したがって、先進技術に関心の高い企業や他社との差別化を強く意識しているシステム開発会社ではフロントエンド技術の積極的な活用が進んでいますが、修得に時間やコストがかかるため、一般企業ではまだまだWeb開発の標準的な手法になっていないのです。

 企業ではなく、個人として独学する場合でも、困難が待ち受けています。フロントエンド技術活用の中心となるアプリケーションフレームワークについての解説本やネット記事の多くは、読者にフロントエンド技術の基礎知識があるものとして説明を行っています。そのため、フロントエンド技術の基礎知識がないまま学習を始めると、十分な理解ができずに挫折したという話をよく聞きます。著者が執筆したフロントエンド向けアプリケーションフレームワーク解説書のカスタマーレビューでも、「Web開発の経験があるのに、前提知識がないので歯が立たない」という旨のコメントを頂きました。

 このような現状を踏まえ、最新のフロントエンド技術の基礎知識を修得する解説書2冊を執筆しました。これらの本が、最新のフロントエンド技術の普及に少しでも役立てれば幸いです。

・最新のフロントエンド技術の全体像を把握できます
・Web開発経験者の疑問や躓きやすい部分をQ&Aの会話形式で説明します
・動画や操作体験を通じて、未知の概念や機能についての理解を深めることができます

Part01 フロントエンド技術の動向
  第1章 従来型WebからモダンWebへ
  第2章 次世代SPAのデモ
Part02 フロントエンド開発の基礎知識
  第3章 JavaScript開発環境
  第4章 最新Webブラウザの機能
  第5章 アプリケーションフレームワーク
  第6章 ネットワーク経由のAPI(Web API)
Part03 フロントエンド技術の導入
  第7章 導入のポイント
  第8章 お役立ち情報

末次 章(著)/日経BP/3080円(税込み)
・フレームワークごとの違いを明確にします
・未経験者でもコードレベルの比較ができるコメント付きでコードを比較します
・最後にYes/Noチャートで自分に最適なフレームワークの選択を可能にします

第1章 フレームワーク比較のための基礎知識
第2章 フレームワークの特徴と機能の比較
第3章 開発環境を体験して比較
第4章 機能ごとのサンプルコード比較
第5章 同じアプリの実装コード比較
第6章 フレームワーク選択の考え方

末次 章(著)/日経BP/3080円(税込み)