0Pricing
Vibe Coding · レッスン

ファイルの読み書き

ユーザーファイルとローカルデータを扱います。

「ファイルの読み書き」はCoddyKit上の無料Vibe Codingレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVibe Coding学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vibe Codingコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Apps Work with Files

Lots of apps deal with files: a user uploads a photo, exports a spreadsheet, or downloads a report. Reading and saving files is a core part of building real tools.

As a vibe coder, you don't need to memorize file APIs. You describe the behavior — 'let the user upload an image and show a preview' — and AI writes the wiring.

Two Kinds of Files

There are two main places files live, and it helps to tell AI which you mean:

  • User files — things a person picks from their device, like a photo or a PDF, usually through an upload button in the browser.
  • Local files — files your code or tool reads from a folder on your computer, common when using Cursor or Claude Code on a project.

Naming which kind keeps the AI from guessing wrong.

Letting Users Upload a File

In a web app, users pick files with an upload input. Here's a prompt that creates a simple, friendly uploader. Notice it names what to do with the file after it's chosen.

Paste this into v0, Bolt or Lovable and you'll get a working upload screen in seconds.

Build a page with a drag-and-drop area where I can
upload an image. After I drop or pick a file, show
a preview of the image and its file name and size.
Use plain HTML, CSS and JavaScript.

Reading Text from a File

When a user uploads a text or CSV file, the browser can read its contents into a string your app can use. AI usually uses a FileReader for this.

This example simulates reading text and counting its lines — the same logic AI would run on real file contents.

const fileContents = 'name,score\nAda,90\nGrace,95';
const lines = fileContents.split('\n');

console.log('Total lines:', lines.length);
console.log('First line:', lines[0]);

Saving and Downloading Files

Apps also create files for users to download — an exported list, a generated report, a saved drawing. In the browser, AI typically builds the content as text and triggers a download.

You just describe it: tell AI what the file should contain and what to name it.

Add an "Export" button that takes the list of tasks
on the page and downloads them as a file named
tasks.txt, one task per line. When clicked, the
browser should save the file to the user's
Downloads folder.

Working with CSV and JSON Files

Two formats show up constantly: CSV (rows and columns, like a spreadsheet) and JSON (labeled data). Apps often import one and export the other.

You don't parse these by hand — you tell AI the format and let it convert. Below, this snippet turns simple data into CSV text, the kind of thing AI generates for an export feature.

const rows = [
  { name: 'Ada', score: 90 },
  { name: 'Grace', score: 95 }
];

const csv = 'name,score\n' +
  rows.map(r => r.name + ',' + r.score).join('\n');

console.log(csv);

Reading Files in Cursor or Claude Code

Agentic tools like Claude Code and Cursor can read files in your project directly. You can point them at a file and ask questions or request changes.

This is huge: instead of copying code around, you just reference the file by name and let the tool open it.

Read data/customers.csv and tell me how many rows
it has and what the column names are. Then create a
script that loads it and prints the 5 customers
with the highest spend.

Handling Big or Messy Files

Real files are messy — extra blank lines, missing values, weird characters. Tell AI to expect this so your app doesn't crash on imperfect input.

Adding 'handle empty rows and missing fields gracefully' to your prompt saves you many bug-fixing rounds later.

Update the CSV importer to skip empty rows, trim
extra spaces, and if a row is missing the score,
set it to 0 instead of crashing. Show me a summary
of how many rows were skipped.

Previewing Before Saving

A polished file feature lets users preview what they're about to import or export before committing. It prevents mistakes and feels professional.

You can layer this on with a follow-up prompt once the basic version works — vibe coding rewards small, steady steps.

Before importing the CSV, show the first 5 rows in
a table so I can confirm it looks right, with an
"Import" and "Cancel" button. Only load the data
after I click Import.

Files Are Just Another Conversation

Whether it's an upload, a download, or reading a project file, the pattern is the same: describe the file, describe what to do with it, describe the edge cases.

You don't need to know FileReader, blobs, or encoding details. You stay focused on the user experience and let AI handle the plumbing.

Keeping Uploads Safe

Files from strangers can be risky — a wrong file type, a giant file that freezes the app, or even something malicious. A polished app sets limits.

Tell AI to validate uploads: allowed types, a maximum size, and a clear message when a file is rejected. This small habit keeps your app stable and friendly.

Only allow image files (jpg, png, webp) up to 5 MB
in the uploader. If someone picks a different type
or a file that's too large, reject it and show a
clear message explaining why. Never crash on a bad
upload.

Quick Check

You're building a web app and you want users to pick a photo from their own device and see a preview. When prompting AI, which detail makes the result most reliable?

Recap: Reading and Saving Files

You learned that apps handle two kinds of files — user uploads and local project files — and that AI can wire up uploads, previews, downloads, and CSV/JSON conversions for you.

You saw how agentic tools read project files directly, and why naming edge cases (empty rows, missing fields) prevents crashes. Next, you'll learn how to store data so it sticks around — from simple local storage to a real database.

よくある質問

「ファイルの読み書き」レッスンは無料ですか？

はい。「ファイルの読み書き」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vibe Codingコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vibe Codingコースには全4レッスンが含まれています。

「ファイルの読み書き」で何を学びますか？

ユーザーファイルとローカルデータを扱います。 ブラウザで直接実行するハンズオンコードでVibe Codingを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vibe Codingを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVibe Codingは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「ファイルの読み書き」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVibe Codingレッスンでコードを書いて実行できますか？

はい。すべてのVibe Codingレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. APIと対話する
  2. ファイルの読み書き
  3. シンプルにデータを保存する
  4. シークレットとキーを扱う
← Vibe Codingに戻る