■

// src/UserProfile.js
import React, { useEffect, useState } from 'react';
import { Auth } from 'aws-amplify';

const UserProfile = () => {
  const [userAttributes, setUserAttributes] = useState(null);

  useEffect(() => {
    async function fetchUserData() {
      try {
        const userData = await Auth.currentAuthenticatedUser();
        setUserAttributes(userData.attributes);
      } catch (error) {
        console.error('Error fetching user data:', error);
      }
    }

    fetchUserData();
  }, []);

  return (
    <div>
      <h1>User Profile</h1>
      {userAttributes ? (
        <ul>
          <li>Employee Number: {userAttributes['custom:employee_number']}</li>
          <li>Department: {userAttributes['custom:department']}</li>
        </ul>
      ) : (
        <p>Loading user profile...</p>
      )}
    </div>
  );
};

export default UserProfile;

■

import React, { useEffect, useState } from 'react';
import { Auth } from 'aws-amplify';

const fetchData = async () => {
  try {
    // Cognitoから現在のユーザー情報を取得し、トークンを取得
    const session = await Auth.currentSession();
    const idToken = session.getIdToken().getJwtToken();

    // fetch APIを使用してGETリクエストを実行
    const response = await fetch('https://your-api-endpoint.com/data', {
      method: 'GET',
      headers: {
        Authorization: `Bearer ${idToken}`,
        'Content-Type': 'application/json',
      }
    });

    // レスポンスをJSON形式で取得
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data: ', error);
    return null;
  }
};

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return (
    <div>
      {data ? (
        <div>
          <h1>Data Fetched</h1>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
};

export default App;

■

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(); // データを保存するための状態
  const [loading, setLoading] = useState(true); // ローディング状態の管理
  const [error, setError] = useState(null); // エラーの状態管理

  useEffect(() => {
    fetch('https://api.example.com/users') // ここにAPIのURLを入力
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('There was a problem with your fetch operation:', error);
        setError(error.message);
        setLoading(false);
      });
  }, ); // 空の依存配列を渡して、コンポーネントのマウント時にのみ実行されるようにする

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

■

import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect*1
    .catch(error => console.error('There was a problem with your fetch operation:', error));
  }, []);  // 空の依存配列を渡すことで、コンポーネントのマウント時にのみ実行

  return (
    <div>
      <h1>Data from API</h1>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

export default App;

*1:) => {
    fetch('https://api.example.com/data', {
      method: 'GET', // HTTPメソッド
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => {
      if (response.ok) {
        return response.json();  // JSON形式のレスポンスをパース
      }
      throw new Error('Network response was not ok.');
    })
    .then(data => setData(data

■

import os

def lambda_handler(event, context):
    # EFSにマウントされているパスへのパス
    efs_mount_path = '/mnt/efs'  # Lambda関数設定で指定したマウントパスに合わせてください
    test_file_path = os.path.join(efs_mount_path, 'test_file.txt')

    # テストファイルに書き込む内容
    test_content = 'Hello, EFS from Lambda!'

    # テストファイルを作成して書き込む
    with open(test_file_path, 'w') as test_file:
        test_file.write(test_content)

    # テストファイルから内容を読み取る
    with open(test_file_path, 'r') as test_file:
        file_content = test_file.read()

    # 確認したファイルの内容を返す
    return {
        'statusCode': 200,
        'body': file_content
    }

■

以下は、Cloud9環境でReactアプリケーションを設定し、開発を始めるためのステップを説明したナレッジ資料のマークダウン形式のドキュメントです。このドキュメントは、NVMとNode.jsのインストール、メモリ不足対策、Reactアプリケーションの作成、およびAWS CodeCommitを使用したバージョン管理の設定方法をカバーしています。

```markdown
# Cloud9でReactを使うための環境設定ガイド

このガイドでは、Cloud9環境でReactアプリケーションの開発を始めるために必要な手順を説明します。

## NVMのインストール

Node Version Manager (NVM) を使用して、Node.jsのバージョンを管理します。

1. **インストールスクリプトの実行**:

   ```bash
   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
   ```
   
   このコマンドは、nvmの最新バージョンをインストールします。`v0.39.1`はこの例で使用していますが、[nvmのGitHubリポジトリ](https://github.com/nvm-sh/nvm)で最新バージョンを確認してください。

2. **環境設定の更新**:

   インストールスクリプトは、`~/.bash_profile`、`~/.zshrc`、`~/.profile`、または`~/.bashrc`にnvmの初期化スクリプトを追加します。変更を反映させるためには、新しいターミナルセッションを開くか、以下のコマンドを実行してください:

   ```bash
   source ~/.bash_profile  # Bashを使用している場合
   source ~/.zshrc         # Zshを使用している場合
   ```

3. **NVMの動作確認**:

   ```bash
   nvm --version
   ```

   正常にインストールされていれば、インストールされたnvmのバージョン番号が表示されます。

## Node.jsのインストール

```bash
# インストール
nvm install node 
# 最新版を使用するように設定
nvm use node 
```

## メモリ不足対策としてスワップファイルを作成

```bash
sudo dd if=/dev/zero of=/var/swapfile2 bs=16M count=128; sudo chmod 600 /var/swapfile2; sudo mkswap /var/swapfile2; sudo swapon /var/swapfile2
```

```bash
sudo vim /etc/fstab
```

vimの編集画面で最終行に以下を追加します。

```
/var/swapfile2 swap swap defaults 0 0
```

## Reactアプリケーションの作成

```bash
# メモリ領域を確保してから実行する
export NODE_OPTIONS="--max-old-space-size=1024"
npx create-react-app my-app
cd my-app
npm start
```

## AWS CodeCommitでgit管理

1. CodeCommitのリポジトリを作成しておくこと。
2. 以下のコマンドを実行して、ローカルリポジトリを初期化し、CodeCommitリポジトリに接続します。

   ```bash
   git init
   git remote add origin codecommit://{レポジトリ名}
   git add .
   git commit -m 'first commit'
   git push --set-upstream origin master
   ```

[AWS CodeCommitのセットアップ方法](https://www.appliot.co.jp/blog/aws%E3%81%AEcodecommit%E3%81%AB%E5%88%9D%E3%82%81%E3%81%A6push%E3%81%99%E3

%82%8B%E6%96%B9%E6%B3%95/)については、詳細なガイドを参照してください。
```

このドキュメントは、Cloud9上でのReact開発環境の構築から、アプリケーションの作成、バージョン管理の設定まで、スムーズに進めるための基本的な手順を提供します。

■

Pythonのunittestフレームワークでは、標準出力（print文など）をテストするために、unittest.mockモジュールのpatch関数を使用してsys.stdoutをモック（模擬オブジェクト）に置き換える方法が一般的です。これにより、print関数が出力する内容を捕捉し、assertメソッドを使って期待した出力が得られているかを検証することができます。以下に、print文を含む関数の出力をテストする例を示します：import unittest
from unittest.mock import patch
from io import StringIO

# テスト対象の関数
def greeting(name):
    print(f"Hello, {name}!")

# テストケースクラス
class TestGreeting(unittest.TestCase):
    # print文の出力をテストするメソッド
    @patch('sys.stdout', new_callable=StringIO)
    def test_greeting(self, mock_stdout):
        greeting("World")
        self.assertEqual(mock_stdout.getvalue().strip(), "Hello, World!")

# unittestを実行
if __name__ == '__main__':
    unittest.main()
この例では、unittest.mock.patchデコレータを使ってsys.stdoutをStringIOオブジェクトに置き換えています。StringIOオブジェクトはメモリ上のテキストストリームを表し、print関数の出力をこのストリームにリダイレクトすることで、テストコード内でプログラムの出力を読み取ることができます。getvalue()メソッドを使ってこのストリームの内容を取得し、assertEqualメソッドで期待される文字列と比較しています。この方法を使用すれば、print文を含む関数の出力を簡単にテストできます。