ayanakagawa / lyceum

Web エンジニア育成講義用のサンプルコード置き場

Lyceum

Web エンジニア育成を行う Project Lyceum で利用するサンプルコードの置き場

Hello HTTP Request

JavaScript から XHR/Axios/Fetch を使って HTTP リクエストを発行する最小限のコードサンプル

• Hello XHR
  • CodeSandbox で実行
  • StackBlitz で実行
• Hello Axios
  • CodeSandbox で実行
  • StackBlitz で実行
• Hello Fetch
  • CodeSandbox で実行
  • StackBlitz で実行

注: サンプルコード準備時点の StackBlitz では HEAD リクエストなど一部のメソッドによるリクエストにサーバが応答しないなどの制限があるため CodeSandbox での演習を推奨します。

Hello Github API

JavaScript から (Personal Access Token を用いて) Github REST API にアクセスする最小限のコードサンプル

• Hello Github API
  • CodeSandbox で実行
  • StackBlitz で実行

Promise

JavaScript での非同期処理と Promise についての基本を確認するためのコードサンプル

• Promise による非同処理
  • CodeSandbox で実行
  • StackBlitz で実行

Node.js

Node.js (http モジュール) で Web サーバを起動する最小サンプル

• Hello Node.js
  • CodeSandbox で実行
  • StackBlitz で実行

Express

Express でサーバを作る基本を確認するためのサンプル

• Hello Express
  • CodeSandbox で実行
  • StackBlitz で実行
• Hello Express Routing
  • CodeSandbox で実行
  • StackBlitz で実行
• Express Generator (ESM)
  • CodeSandbox で実行
  • StackBlitz で実行

AWS JS SDK

AWS JS SDK を使ってみる為のサンプル

• Hello AWS JS SDK
  • CodeSandbox で実行
  • StackBlitz で実行

注: フォークした上で AWS_ACCESS_KEY_ID と AWS_SECRET_ACCESS_KEY を環境変数に設定してご利用ください。執筆時点の StackBlitz では環境変数などのシークレットの取り扱いをサポートしていません。StackBlitz で環境変数を設定するには .stackblitzrc ファイルに書き込むという方法もありますが、public な workspace ではシークレットアクセスキーの漏洩に繋がるため (課金して非公開で使う場合以外は) 避けてください。

Nuxt with Express

Nuxt のサーバミドルウェアとして Express を利用することでフロントエンド・バックエンドをまとめるサンプル

• Nuxt with Express as server middleware
  • CodeSandbox で実行
  • StackBlitz で実行

注: 最新の Nuxt (執筆時点 3.0rc6) では express を serverMiddleware に利用した場合には dev server を利用出来ません (File URL host must be "localhost" or empty onlinux のようなエラーメッセージが出ます)。npm run build && npm start で起動してください。 CodeSandbox や StackBlitz では npm run dev の定義が無ければ npm start を実行しますが、事前に npm run build がされていないため失敗します。 CodeSandbox では package.json の start スクリプトの定義を nuxt build && nuxt start のように定義することで動作します。StackBlitz でも同様ですが、エラーで停止した Terminal で npm run build && npm start を実行すれば package.json の書き換えハックは不要です。