S3 × JavaScriptでミニアプリを作る方法【初心者向け】
AWS S3は、画像やデータを保存するだけでなく、JavaScriptと組み合わせてミニアプリを作ることもできます。
「S3に置いた画像をWebページで表示したい」「JSONデータを読み込んでアプリっぽくしたい」
そんな初心者の方でも大丈夫です。
この記事では、S3 × JavaScript を使った“初心者向けミニアプリ”の作り方をわかりやすく解説します。
今回作るミニアプリ
今回は、次のような簡単なミニアプリを作ります。
- S3に保存した画像をJavaScriptで表示する
- S3に保存したJSONデータを読み込んで表示する
完成イメージ：
- 画像ギャラリー
- 商品一覧（JSON）
まずは、S3の基本操作を復習したい方はこちら。
ミニアプリの全体の流れ
- S3に画像とJSONをアップロードする
- 公開設定を行う
- JavaScriptで読み込む
- HTMLで表示する
それでは、実際に作っていきましょう。
① S3に画像とJSONをアップロードする
● 画像をアップロード
例：app/images/cat.jpg
● JSONファイルをアップロード
例：app/data/items.json
JSONの例：
{
"items": [
{ "name": "りんご", "price": 120 },
{ "name": "みかん", "price": 80 }
]
}
② 公開設定を行う
JavaScriptからS3のデータを読み込むには、公開設定が必要です。
● 画像の公開設定
オブジェクトの「アクセス許可」から公開します。
● JSONの公開設定
同じく「パブリックアクセスを許可する」をオンにします。
公開設定の仕組みはこちら。
● CORS設定（必要な場合）
別ドメインからアクセスする場合はCORS設定が必要です。
[
{
"AllowedHeaders": ["*"],
"AllowedMethods": ["GET"],
"AllowedOrigins": ["*"]
}
]
③ JavaScriptでS3のデータを読み込む
● 画像を表示するコード
<img id="cat" src="https://バケット名.s3.amazonaws.com/app/images/cat.jpg">
これだけで画像が表示できます。
● JSONを読み込むコード
<script>
fetch("https://バケット名.s3.amazonaws.com/app/data/items.json")
.then(response => response.json())
.then(data => {
const list = document.getElementById("list");
data.items.forEach(item => {
const li = document.createElement("li");
li.textContent = item.name + "：" + item.price + "円";
list.appendChild(li);
});
});
</script>
● HTML側の表示部分
<ul id="list"></ul>
④ よくあるつまずきポイント
● URLを間違える
オブジェクトURLを正しくコピーしましょう。
● 公開設定が不足している
AccessDenied が出る場合は権限設定を確認します。
● CORSエラー
fetch で読み込む場合は CORS 設定が必要です。
● フォルダ構造のミス
プレフィックスが間違っていると404になります。
AWS初心者におすすめの学習書籍（まずは全体像を理解）
図解即戦力 Amazon Web Servicesのしくみと技術
AWSの全体像をつかみたい初心者に最適な入門書です。
EC2 / S3 / VPC など主要サービスの仕組みを図解で理解できます。
この本で解決できること：
- AWSの全体像を短時間で理解できる
- 主要サービスの役割が視覚的にわかる
- 「AWSって何？」という疑問がスッキリ解消する
→ 図解即戦力 Amazon Web Servicesのしくみと技術
AWSではじめるインフラ構築入門
手を動かしながらAWSを理解したい方に最適です。
EC2 や S3 を使ったインフラ構築の流れを丁寧に解説しています。
この本で解決できること：
- AWSの基本操作を実際に触りながら理解できる
- インフラ構築の流れが具体的にイメージできる
- 「AWSを触ってみたい」が実現できる
AWSを動画で学びたい方へ（目的別に紹介）
テキストだけではイメージしづらいAWSの概念も、動画なら図解と実演で理解しやすくなります。
初心者がつまずきやすいポイントを丁寧に解説してくれるため、挫折しにくいのも大きなメリットです。
AWS for Beginners（日本語）
AWSの主要サービスを広く浅く学べる、完全初心者向けの入門講座です。
「AWSとは何か？」を最初に理解したい方に最適です。
この講座で解決できること：
- AWSの全体像をやさしく理解できる
- 主要サービス（EC2 / S3 / IAM）の概要がつかめる
- クラウドの仕組みを図解で理解できる
AWS & インフラ基礎講座
サーバー・ネットワークなどのインフラ基礎から学べるため、
「クラウドの仕組みを根本から理解したい」方に向いています。
この講座で解決できること：
- インフラの基礎（サーバー・ネットワーク）が理解できる
- AWSの主要サービスを体系的に学べる
- クラウドの仕組みを深く理解できる
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- サービス数が多く、何から学べばいいか分からない
- エラーや設定ミスの原因が分からず、調べても解決できない
- 学習の順番に自信が持てない（EC2？VPC？IAM？）
- 実務レベルの設計や構築のフィードバックを受ける機会がない
AWSはサービスが多く、独学では「どこが分からないのか分からない」状態になりやすいです。
こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。
無料相談で得られるメリット
- あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
- 独学で詰まりやすいポイントを事前に教えてくれる
- 学習方法の改善点をプロがアドバイスしてくれる
- AWSを使ったキャリア相談も可能（インフラ・クラウドエンジニアなど）
AWS を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。
AWSの基礎を理解したあとは、次のステップとして AWS資格 の学習に進む方も多いです。
AWS資格（CLF）を目指す方へ（基礎固めに最適）
CLFが向いている人
- AWSの全体像を理解したい初心者
- まずは基礎をしっかり固めたい
- 資格という「目標」があった方が学習が続くタイプ
- 転職・キャリアアップのために実績がほしい
CLFを取るメリット
- AWSの基礎知識を体系的に理解できる
- クラウドの概念が整理され、学習効率が上がる
- 未経験でも「AWSを理解している証明」になる
- 次のSAAに進むための土台ができる
この資格で解決できること
- 「AWSって何？」という状態から抜け出せる
- 主要サービス（S3 / EC2 / IAM）の理解が深まる
- 業務でAWSを触る前の基礎固めができる
- 学習の方向性が明確になり、迷わなくなる
スマホでも学習できるオンライン問題集があり、スキマ時間で効率よく理解を深められます。
AWS資格（SAA）を目指す方へ（実践力をつけたい方向け）
SAAが向いている人
- AWSを仕事で使いたい・現場で活かしたい
- インフラ・クラウドエンジニアを目指している
- 設計・可用性・セキュリティなど実践的な知識を身につけたい
- CLFの次のステップに進みたい
SAAを取るメリット
- 現場レベルのAWS設計力が身につく
- 求人で「SAA歓迎」が多く、転職で有利になる
- クラウドアーキテクトとしての基礎が固まる
- 実務で必要なサービス（VPC / RDS / ALB / AutoScaling）が理解できる
この資格で解決できること
- 「AWSの設計が分からない」という悩みを解消できる
- インフラ構築の全体像が理解できる
- 実務で通用するレベルの知識が身につく
- クラウドエンジニアとしての自信がつく
SAAはアウトプット学習が特に重要で、問題集で繰り返し演習することで合格に近づけます。
まとめ
今回は、S3 × JavaScript を使った初心者向けミニアプリの作り方を紹介しました。
- S3に画像とJSONを保存する
- 公開設定とCORS設定を行う
- JavaScriptでfetchして表示する
- フォルダ構造とURLの扱いが重要
とても簡単にミニアプリが作れるので、ぜひ試してみてください。
