旅行の計画を立てるとき、行き先メモはメモアプリ、スケジュールはカレンダー、持ち物リストは別のアプリ——というバラバラな状態になっていませんか。
「旅行専用の管理アプリがほしい」と思っても、市販のアプリはできることが多すぎたり少なすぎたりして、自分の使い方にちょうどいいものに出会えないことが多いです。そういうときに、Rork でさっと自作してしまうのが一番早いと感じています。
このチュートリアルでは、旅行計画に必要な3つの機能（行き先リスト・日程スケジュール・持ち物チェックリスト）を1つのアプリにまとめる手順を紹介します。プログラミング知識は不要で、Rork にプロンプトを送るだけで作れます。
完成形のイメージ
作るアプリには、次の3画面を用意します。
- 旅行リスト画面: 旅行先・出発日・帰着日・ステータス（計画中 / 確定 / 完了）を管理する一覧画面
- スケジュール画面: 旅行ごとに日程を追加し、各日のアクティビティ（観光スポット・食事・移動手段など）を記録する画面
- チェックリスト画面: 旅行ごとに持ち物リストを作成・チェックできる画面
シンプルに見えますが、「旅行単位でデータを紐づける」という設計が必要になるため、Rork へのプロンプトの伝え方がポイントになります。
Step 1: プロジェクトを立ち上げる
Rork を開き、新しいプロジェクトを作成します。最初のプロンプトで、アプリ全体の構造を一度に伝えましょう。
旅行計画アプリを作ってください。
【画面構成】
1. 旅行リスト画面（ホーム）
- 旅行先名・出発日・帰着日・ステータスを持つカード
- ステータスは「計画中」「確定」「完了」の3種類
- 右下の「＋」ボタンで新規旅行を追加
- カードをタップするとその旅行の詳細へ移動
2. 旅行詳細画面（タブ構成）
- 「スケジュール」タブ：日付ごとにアクティビティを追加できるリスト
- 「チェックリスト」タブ：持ち物リストを追加・チェックできるリスト
【デザイン】
- カラーテーマ：空色（#4FC3F7）をメインカラーに
- フォント：読みやすいシンプルなスタイル
- スケジュール画面は日付でグループ化して表示
【データ保存】
- AsyncStorage でローカルに保存
- アプリを再起動してもデータが残るようにする
このプロンプトを送ると、Rork がベースとなるアプリ構造を生成してくれます。最初から完璧を求めず、まずベースを作ってから画面ごとに調整していくのが、Rork をうまく使うコツです。
Step 2: 旅行リスト画面を整える
生成されたリスト画面を確認したら、気になる点をピンポイントで修正します。例えば、ステータスのバッジデザインを変えたい場合は次のように伝えます。
旅行リスト画面のステータスバッジを修正してください。
- 「計画中」→ グレー背景・黒文字
- 「確定」→ 青背景（#4FC3F7）・白文字
- 「完了」→ グリーン背景（#66BB6A）・白文字
バッジは小さめの角丸スタイルで、旅行先名の下に表示してください。
このように、修正したい箇所を「どの画面の」「どの要素を」「どう変えるか」の3点セットで伝えると、Rork が的確に修正してくれます。
出発日が近い旅行を上に表示したい場合は、並び順の指定を追加します。
旅行リストを出発日の昇順（近い順）に並べてください。
すでに完了した旅行はリストの末尾にまとめて表示してください。
Step 3: スケジュール画面でアクティビティを管理する
スケジュール画面では、日付ごとにアクティビティを追加できる設計が重要です。生成されたコードに日付グループが実装されていない場合は、追加でプロンプトを送ります。
スケジュール画面を以下のように修正してください。
- 日付ヘッダー（例：「4月25日（金）」）でセクション分けして表示
- 各セクションの下にその日のアクティビティを並べる
- アクティビティには「時間」「タイトル」「メモ（任意）」の3フィールドを持たせる
- 「＋ アクティビティを追加」ボタンは各日付セクションの末尾に配置
- 新規日付は「日付を追加」ボタンで追加できるようにする
スケジュールアプリで意外とつまずくのが、日付の管理方法です。Rork が日付をテキスト文字列で保持している場合、ソートがうまくいかないことがあります。そのときは次のプロンプトを使います。
日付の保存形式を ISO 8601（例：2026-04-25）の文字列に統一してください。
表示時には「4月25日（金）」の形式にフォーマットして表示します。
並び順は日付の昇順にしてください。
Step 4: 持ち物チェックリストを実装する
チェックリストはシンプルに見えて、「旅行ごとにリストを保持する」という設計が必要です。
チェックリスト画面を修正してください。
- チェックリストはこの旅行専用のデータとして保存する
- アイテムを追加するとリストに追加され、チェックすると打ち消し線が入る
- 「全て未チェックに戻す」ボタンを上部に配置
- カテゴリ分け機能（衣類・書類・電子機器・その他）があると便利です
- 削除は長押しで確認ダイアログを出してから削除
よく使う持ち物をテンプレートとして、最初から候補リストを出せるようにしてください。
候補：パスポート、充電器、常備薬、着替え、洗面用具
テンプレートとして提案する機能があると、毎回ゼロから入力する手間が省けて実用的なアプリになります。
Step 5: データ保存の確認
アプリを再起動してもデータが残るかどうかは、必ず Rork Companion で確認します。データが消える場合は、AsyncStorage の実装を確認するプロンプトを送ります。
アプリを再起動してもデータが消えないか確認してください。
旅行データ・スケジュール・チェックリストの全てが AsyncStorage で保存・取得されているか確認して、
もし保存されていない箇所があれば修正してください。
実際にプレビューで動作確認するときは、旅行を1件追加 → アプリを一度閉じる → 再度開いてデータが残っていることを確認、という手順で検証します。
よくあるつまずきポイント
Rork で旅行計画アプリを作るときに詰まりやすいポイントを2つ挙げておきます。
1. 旅行とスケジュール・チェックリストの紐づけが切れる
旅行一覧から詳細画面に遷移したとき、どの旅行のデータを表示するかが正しく伝わっていないことがあります。このときは次のように伝えます。
旅行詳細画面では、選択した旅行の ID をパラメーターで受け取り、
その ID に紐づくスケジュールとチェックリストだけを表示・編集・保存するようにしてください。
他の旅行のデータは表示しないでください。
2. 日付ピッカーが iOS と Android で見た目が大きく異なる
Rork が生成するデフォルトの DatePicker は、プラットフォームによって見た目が異なることがあります。統一したい場合は react-native-date-picker の使用を指示するか、テキスト入力（YYYY-MM-DD 形式）で代替するのが簡単です。
全体を振り返って
Rork で作る旅行計画アプリのチュートリアルを紹介しました。最初のプロンプトでアプリ全体の構造を伝え、その後は画面ごとに細かく調整していく——この進め方が Rork を使う上での基本です。
次のステップとして、このアプリに地図表示や費用管理を追加してみてください。地図表示であれば「Google Maps API と連携して、各アクティビティに場所を設定できるようにしてほしい」と伝えるだけで実装の方向性を出してもらえます。
旅行のたびに「このアプリがあってよかった」と思えるものが作れると、開発の楽しさが一段と増します。ぜひ自分仕様にカスタマイズしてみてください。
Rork でアプリ開発を始めたばかりの方には、Rork で最初のアプリを30分で作る方法も参考になります。データ保存をもう少し深く理解したい場合は、習慣トラッカーアプリのチュートリアルもあわせてご覧ください。