JavaScriptとStripeで決済サービスを構築します。

初心者向けの教材を一通りやると、Ruby on RailsやPHPを用いてウェブアプリを構築できるようになりますよね。同時に、次なにを勉強すれば視野が広がるのだろう、できることが増えるのだろう、と悩むかもしれません。

本教材はそうした方の次のステップに最適な、開発の知見を提供する教材です。決済サービスのアーキテクチャを構築することで、サーバサイドAPIの考え方やフロントエンドからの呼び出し方などを学びます。とくに、サーバサイドのAPIは例外処理やログの出力、CORSの対応など踏み込んだ内容まで実装します。

また、本教材では一貫してJavaScriptを用いていますが、ライブラリやフレームワークに依存せずモジュール同士のやり方やアーキテクチャの考え方など、汎用的な学びが得られます。

普段、筆者が仕事で意識していることをできる限り盛り込んだ教材となっています。

学習内容

全体

• アーキテクチャの考え方、構築方法
• サービス運用上の注意点と、それに対処するためのプログラムのコツ
• Stripeを利用した決済機能の導入方法
• CORSとは？CORSへの対応方法
• コードの分割方法、考え方
• クレジットカード決済のスキーム

フロントエンド

• fetchを利用した非同期的なAPIの呼び出し
• JavaScriptによるDOMの操作
• Stripe.jsの概要、登場するクラスの関連

サーバサイド

• node.js、Express.jsを用いたウェブアプリケーションの作り方
• ウェブAPIの考え方、作り方
• 例外処理とは？例外処理の実装
• 設定ファイルの考え方
• ログの出力とは？ログ出力の方法

完成物のイメージ

本教材の対象者

• 現場のプロダクト開発に近いシステムの設計・実装を体験してみたい方
• クレジットカード決済機能の実装に興味がある方
• サーバサイドのフレームワークを使って、複数ウェブアプリケーションを作ったことがある方

受講における必要条件

必須

以下のいづれかの経験。ちょっとしたウェブアプリを作れる想定で作成されています。

• JavaScriptを利用したプログラミングをしたことがある、ないしはコードを読んだことがある
• RubyやPHPなどのスクリプト・オブジェクト指向言語を用いて、簡単なロジックを組み立てたことがある
• なんらかのウェブアプリケーションフレームワーク(Ruby on Rails , Laravel など)を使ったことがある
• HTML/CSSの基礎知識
  • <div>、<ul>、<img>などのタグの使い方とCSSを用いた装飾の仕方を理解している

あれば望ましい

以下の知識があれば、教材理解の助けとなります。

• 簡単なコマンドラインの知識
  • cd、ls、pwd、mkdir、cat、viを使ったことがある
• RubyGem や Composer 、 npm などパッケージマネージャを利用してライブラリを導入したことがある
• HTTPの基礎知識
  • プロトコルや簡単な通信の方法、 curl や Postman の利用経験

学ばないこと

• HTML/CSSやjsの文法知識
  • UIの整備は Bootstrap を活用して簡易に済ませます。
• シェルやコマンドの基本的な使い方
• AWSやHeroku、Netlifyなどへのデプロイ方法

本教材の対応バージョン

• OS
  • Mac OS X Mojave: 10.14.6
• node.js
  • 12.18.4
• Express.js
  • 4.16.4

本教材で質問対応可能なOSや環境

• Mac OS Xであれば対応可能です。