Blog

爆速で?S3の簡易管理ツールを作成する!!!

はじめに

みなさん、こんにちは!「爆速でシリーズ」って聞いたことありますよね?でも、そのまま真似してみても、環境の違いやバージョンアップのせいで動かないことってありますよね。でも大丈夫!今回は、そんな壁に負けずに挑戦してみましょう!

お題概要

今回のミッションは、S3のバケットを確認して、ファイルのダウンロードとアップロードができるようにすることです。わくわくしますね!

お題詳細

ある日、企画部門から「システムで生成されるCSVデータを確認したい」という依頼が飛び込んできました。時間がない中で、どうしよう?どうしよう?と悩んでいたら、「S3を閲覧するツールを作ってみては?」というアイデアが浮かびました。他にも方法はあるかもしれませんが、今はこのアイデアで突き進むしかありません! そこで、SvelteKitを使ってS3バケットの一覧参照、ダウンロード、アップロードができるツールを作ることにしました。さあ、一緒に挑戦してみましょう!

作業概要

ここからが本番です!以下の順番で作業を進めていきます

  1. SvelteKitの初期設定
  2. .envファイルの作成
  3. ディレクトリ、ファイルを作る
  4. 追加でいろいろインストールする
  5. ダウンロード機能を実装する
  6. アップロード機能を実装する
  7. 一覧表示機能を作成する
  8. 表示用ページを作る
  9. 起動する
  10. 動かしてみた

準備はいいですか?それでは、一つずつ見ていきましょう!

1. SvelteKitの初期設定

まずは、SvelteKitのプロジェクトを立ち上げます。今回は、Node.jsのコンテナ内で作業していますが、コンテナの設定は省略させていただきます。ごめんなさいね!

公式ページを参考に、以下のコマンドを実行しました

選択肢はこんな感じで進めました

  • SvelteKit demo appを選択
  • TypeScriptを使用
  • ESLint、Prettier、Playwright、Vitestを選択

最後に、npm installを実行して準備完了です!

2. .envファイルの作成

S3にアクセスするための大切な情報を.envファイルに保存します。セキュリティ面で気になる方もいるかもしれませんが、今回は爆速重視で進めちゃいます!

.envファイルの中身はこんな感じです


エンドポイントは、業務用に別のものを使う可能性もあるので、変更できるようにしています。臨機応変に対応できるって素晴らしいですよね!

3. ディレクトリ、ファイルを作る

さて、ここからが本格的な作業の始まりです!各機能のコードを置くためのディレクトリとファイルを作成しましょう。


正直に言うと、私もSvelteKitをまだ完全には理解していません。でも大丈夫!

  1. 社内でよくSvelteKitの話を耳にする
  2. 最新技術に乗り遅れたくない
  3. GPTがあるから何とかなる!

という3つの理由でSvelteKitを選びました。ファイル構成が正攻法かどうかはわかりませんが、とにかくチャレンジです!

4. 追加でいろいろインストールする

S3の操作には@aws-sdk/client-s3を使います。これはGPTさんが教えてくれました。ありがとう、GPTさん!
さらに、@types/nodeもインストールしておくと良さそうです。準備万端ですね!

5. ダウンロード機能を実装する

GPTさんに「S3のバケットのダウンロード機能をSvelteKitで作成したい」とお願いして、こんなコードができました
src/routes/api/download/+server.ts

詳細は省きますが、なんとなくバイナリデータをレスポンスに入れている感じがわかりますね。面白いです!

6. アップロード機能を実装する

アップロード機能もGPTさんにお願いしました。結果はこちら
src/routes/api/upload/+server.ts


const key = の部分に「in/」があるのは、今回はアップロード先を固定してみたかったからです。必要なければ削除してOKです!(直に書くのはよくないですね!)

7. 一覧表示機能を作成する

一覧表示機能も、もちろんGPTさんにお願いしました


ListObjectsV2Commandで取得したファイル情報をallFilesに詰め込んでいるんですね。わかりやすい!

8. 表示用ページを作る

最後に表示用ページを作ります。既存のファイルを上書きしちゃいましょう!
src/routes/+page.svelte

styleもそれっぽく作ってくれていますね!tableタグしか使えない私には夢のようです!

9. 起動する

いよいよ起動です!以下のコマンドで立ち上げましょう

毎回、「 — –host 0.0.0.0」を入力するのが面倒な方は、vite.config.tsをこんな感じに変更しておくと便利ですよ

これで npm run dev だけで起動できます。簡単ですね!

10.動かしてみた

単に開いてみた

アップロードしてみた

OK押してみた

あれ? inとoutのSizeとLast Modifiedの表示、なんだか不思議ですね!まるで宝探しゲームみたい。これは次のアップデートで解明する楽しい謎になりそうです!

おっと、「ファイルを選択」ボタンの横のファイル名がクリアされていないみたい。でも大丈夫!これはユーザーに「あなたが最後に選んだファイルだよ〜」って親切に教えてくれているんですね。ちょっとしたサプライズ機能かも?(笑)

終わりに(後日談というか今回のオチ)

なんと驚くことに、私たちが苦労して作ったものと似たようなものを公式が作っていたんです!

https://github.com/aws-amplify/amplify-ui/issues/5731

「時代が私に追いついた!」なんて言えたら格好いいんですけどね(笑)。でも、これって逆に考えると、私たちが本当に必要とされているものを作っていたってことですよね。すごくない?

この経験を通して、私はとても大切なことを学びました。それは、「SvelteKitがよくわからなくても、GPTの力を借りればここまでできる」ということです。正直、最初は不安でしたが、やってみたらどんどん形になっていって、すごくワクワクしました!

みなさんも、「やったことないからわからない」って思っても、まずは一歩踏み出してみてください。きっと新しい発見があるはずです。失敗を恐れずに、どんどんチャレンジしていきましょう!

そうそう、最後にちょっとした宣伝です。ニフティでは、このような面白い挑戦を常に募集しています。一緒に新しいことにチャレンジしてみませんか?きっと楽しい経験になりますよ!

さあ、次はどんな冒険が待っているでしょうか。楽しみですね!それでは、また次回の「爆速シリーズ」でお会いしましょう。バイバーイ! 

終わりの終わりに

いかがでしたでしょうか。何とも言えないテンションだったかと思います。今回はある程度、原稿を書いた状態で、「明るい口調で書き直して!」とGPTさんにお願いしてみたところこのような文章になりました。中の人はこんなキャラではありません。お許しください。ただ、最後の「時代が私に追いついた」の部分については、「本当に必要とされているものを作っていた」なんてポジティブな考えはまったく思っていませんでした。こういうものの考え方もあるのだなあと感心しました。コード生成だけではなく考え方の参考にもなると気づかされまして今後、活用していきたいと思います。

ニフティでは、
さまざまなプロダクトへ挑戦する
エンジニアを絶賛募集中です!
ご興味のある方は以下の採用サイトより
お気軽にご連絡ください!

Tech TalkやMeetUpも開催しております!
こちらもお気軽にご応募ください!

connpassでニフティグループに
参加いただくと
イベントの
お知らせが届きます!