成功につながるスキル

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

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

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

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

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

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

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

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

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

• Commerce API 参照資料
• B2C Commerce Developer Sandbox Rest API

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

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