成功につながるスキル

このガイドでは、PWA Kit を使用した開発において鍵となるテクニカルスキルについて説明します。

PWA Kit のデベロッパーは一般的に、以下の作業に精通していることが必要です。

ユニバーサル React.js アプリケーションの作成。
ES6JavaScript でのコードの作成。
CSS を使用した UI コンポーネントのスタイリング。
Salesforce Commerce API のような RESTful API での作業。
Node.js と Express.js を使用した Web アプリケーションの開発。
npm を使用したパッケージの管理とスクリプトの実行。

上記の条件を満たす場合は、先に進んでください。以下に、PWA Kit でストアフロントアプリケーションを作成するために必要な、包括的なスキルのリストを示します。これらすべてにおいてエキスパートである必要はありません。PWA Kit で作業を行うと、需要の高いスキルを楽しみながら学習できるチャンスが豊富にあります。

JavaScript

PWA Kit アプリはモダンな JavaScript でコーディングされています。CSS も JavaScript で記述されています。

ヘッドレスコマースアプリは頻繁にネットワークリクエストを行うので、fetch() の知識が非常に重要になります。ブラウザーと Node.js 環境の両方で機能するユニバーサルフェッチライブラリ (cross-fetch など) の使用をお勧めします。最大のパフォーマンスのために、Promises と async および await を使用して非同期コードを記述できることが必要です。

推奨される JavaScript リソース

オンラインコース: Modern JavaScript From The Beginning (モダン Javascript 入門)
オンラインコース: JavaScript Concurrency (Javascript の同時実行)
MDN: Fetch API - Web APIs
fetch() ヒント集
Express.js Web サーバー
Node.js アプリケーションのデバッグ方法
npm パッケージの管理
npm-run-scripts の使用

React.js

React はすべての PWA Kit アプリの基礎です。公式の React ドキュメントは初心者にとって最適です。このドキュメントは非常に役に立つので、ドキュメント全体を読むことをお勧めします。React の特定の部分にターゲットを絞って学習するには、コンポーネントや props、レンダリングのライフサイクル、状態管理、React 16.8 で導入されたフックなどの新しいコンセプトに焦点を当ててください。

推奨されるReact.jsリソース

オンラインコース: モダンな React
コンポーネントおよび Props – React
状態管理
状態およびエフェクトとの同期
コンテキスト
エラーの境界
フック: クイックスタート、チュートリアル、リファレンスの概要
サーバー側のレンダリング
ハイドレーション
React DevTools を使用したデバッグ
react-router や react-helmet などの React の拡張機能

API

アプリは、API を使用してすべてのコマースデータを Salesforce Commerce Cloud から取得します。RESTful API の全般、特に B2C Commerce API および Open Commerce API (OCAPI) に精通していることが必要です。

推奨 API リソース

トレーニングを受ける

インストラクター主導のトレーニング:B2C コンポーザブルストアフロントの開発

追加の知識とスキル

プロジェクトの詳細によっては、以下の分野における追加の知識とスキルが役に立ちます:

シングルページアプリケーションのアーキテクチャ原理と、BFF (backend-for-frontend) パターン
Lighthouse および WebPageTest を使用した Web ページのパフォーマンスのテスト
PWA チェックリスト
cURL や Postman などのツールを使用した API とのやり取り
HTTP ネットワーキングとキャッシング
Web アナリティクス
検索エンジンの最適化
webpack などのビルドツールの構成
DNS の変更と切り替えの実行
サードパーティ製 JavaScript ライブラリを使用したサイト機能の向上
メディアクエリ、flexbox、およびグリッドを使用したレスポンシブ Web デザインレイアウト手法