カテゴリー

  • プログラミング
  • 英語学習
  • 海外
  • キャリア
  • Kredo
Kredoオンラインキャンプ
KredoIT留学
無料カウンセリングはこちら
Kredoオンラインキャンプ体験談
KredoIT留学体験談
外貨を稼ぐ!海外フリーランス無料セミナー
未経験から即戦力ITグローバル人材 無料セミナー
Kredo Blog 英語・IT・AIで、人生の選択肢を広げる。
無料ウェビナー参加 ↗ 無料カウンセリング予約無料相談↗
MENU
EXPLORE KREDO BLOG

知りたいことから、世界が広がる。

ブログTOP ↗
留学・セブSTUDY & LIFE
留学・セブの記事をすべて読む ↗ 海外留学→海外移住→海外就職→
英語学習ENGLISH
英語学習の記事をすべて読む ↗ 英語学習法→英語フレーズ→
IT・AITECH & CREATIVITY
IT・AIの記事をすべて読む ↗ プログラミング学習→プログラミング知識→AI・テクノロジー→デザイン→
キャリアYOUR NEXT CHAPTER
キャリアの記事をすべて読む ↗ 転職情報→キャリアデザイン→
KredoOUR SCHOOL
Kredoの記事をすべて読む ↗ ニュース・キャンペーン→セブ島情報→インタビュー→
STUDENT DIARIES留学生のリアルな日記noteの体験記を読む ↗YouTube・Instagramで留学を知る ↗
記事を探す ブログTOP
留学・セブ
STUDY & LIFEセブで学ぶ。海外で暮らす。留学の準備から、現地の毎日まで。
留学・セブを知るすべての記事 ↗
海外留学費用・期間・学校選びを知る↗海外移住海外で暮らすためのヒント↗海外就職世界で働く選択肢を探す↗
FROM CEBU / note留学生の、
リアルな毎日。
写真とことばで読む留学日記日記を読む ↗
英語学習
ENGLISH英語が、世界を近くする。学び方と、今日から使える英語。
英語学習を知るすべての記事 ↗
英語学習法自分に合った学び方を見つける↗英語フレーズ会話で使える表現を読む↗
FROM CEBU / note留学生の、
リアルな毎日。
写真とことばで読む留学日記日記を読む ↗
IT・AI
TECH & CREATIVITYつくる力を、次の一歩に。プログラミングとAIをもっと身近に。
IT・AIを知るすべての記事 ↗
プログラミング学習はじめ方・学び方を知る↗プログラミング知識仕組みやスキルを深める↗AI・テクノロジーAIの活かし方と最新の話題↗デザイン伝わるものづくりのヒント↗
FROM CEBU / note留学生の、
リアルな毎日。
写真とことばで読む留学日記日記を読む ↗
キャリア
YOUR NEXT CHAPTER学びの先の、働き方。転職・海外就職・これからのキャリア。
キャリアを知るすべての記事 ↗
転職情報次の仕事へ向かう準備↗キャリアデザイン自分らしい働き方を考える↗
FROM CEBU / note留学生の、
リアルな毎日。
写真とことばで読む留学日記日記を読む ↗
Kredo
OUR SCHOOLKredoを、もっと知る。学校のこと、セブのこと、学ぶ人のこと。
Kredoを知るすべての記事 ↗
ニュース・キャンペーンKredoからのお知らせ↗セブ島情報現地の暮らしを知る↗インタビュー受講生・卒業生の声を読む↗
FROM CEBU / note留学生の、
リアルな毎日。
写真とことばで読む留学日記日記を読む ↗
留学日記 ↗

ENGLISH · IT · AI / STUDY IN CEBU

学ぶって、冒険だ。

英語・IT・AIで、人生の選択肢を広げよう。

留学の無料相談へ ↗Kredo Blogを読む →
JAPAN✈CEBU
Kredoで、講師と一緒に英語とITを学ぶ受講生
LEARN SOMETHING NEW.
セブの海を望む場所で学ぶ日常
HELLO, NEW WORLD.
  • TOP
  • プログラミング
  • Web・プログラミング(学習)
  • プログラミング合宿で何を作る?初心者の成果物・事前準備・復習計画

プログラミング合宿で何を作る?初心者の成果物・事前準備・復習計画

アバター画像
Kredo編集部
公開日:2026.10.26
更新日:2026.10.27
Web・プログラミング(学習) |
PCとスマートフォンで自分たちのWeb作品を確かめる学習者の生成イラスト

アイキャッチは学習場面を表した生成イラストです。実在の学校・受講生の写真ではありません。

プログラミング合宿に参加する前に、一つ決めておきたいことがあります。「何日学ぶか」に加えて、「終わったときに何を見せられたらよいか」を言葉にすることです。

初心者なら、たくさんの機能を持つアプリに挑むより、一つの場面で使える小さな作品を作り、動作を確かめ、作り方を説明するところまで進めるのがおすすめです。見た目が完成していても、リンクが開かない、別の画面幅で読めない、自分が変更した部分を説明できない状態では、振り返る材料が不足します。

この記事では、初心者の練習題材、学校へ確認すること、参加前から合宿後までの進め方を紹介します。登場する作品と日程は編集部が作成した学習計画の例で、特定の学校のカリキュラムや修了成果を保証するものではありません。参加先の選び方は、プログラミング合宿の国内・オンライン・海外比較をご覧ください。

記事のもくじ

  • 成果物は「画面・確認記録・説明」の3つで考える
  • 初心者が取り組む題材の例と、増やしすぎない範囲
    • 例1.勉強会の案内ページ:HTMLとCSSを学ぶ場合
    • 例2.学習時間の集計:JavaScriptの基礎を学ぶ場合
    • 例3.持ち物の確認リスト:画面操作を学ぶ場合
  • 期間ではなく、授業の中身と作業できる時間で決める
  • 申し込む前に、運営者へ聞きたい6つの質問
  • 参加前の準備:初日を設定だけで終わらせない
    • パソコン・ソフト・接続を先に確かめる
    • 題材と完成の条件を、短いメモにする
  • 合宿中は、追加機能より「一度通して動く」を先に
    • AIを使ったときは、確認した範囲も残す
  • 合宿後の2週間:作品を一つ直し、説明を残す
  • 海外で学ぶなら、作品を英語で説明する練習を加える
  • よくある質問
    • 合宿で作った作品は、そのまま転職のポートフォリオになりますか?
    • 期間内に完成しなかったら失敗ですか?
    • 最初からAIを使うアプリを作ったほうがよいですか?
    • 作品を公開しないと意味がありませんか?
  • 最初の一歩は「作らないもの」まで決めること

成果物は「画面・確認記録・説明」の3つで考える

パソコンとスマートフォンで作品を確認し設計メモと照合するイメージ
学習場面のイメージ(AI生成)

作品は、完成した画面だけではありません。どんな目的で作り、どこまで確かめ、何が未完成なのかを残しておくと、講師に相談するときも、あとで学び直すときも役に立ちます。

残すもの 初心者の作品なら何を書くか
動く画面・ファイル 誰が何をするページかが分かる画面。自分の環境で動かす手順
確認した記録 リンク先、画像表示、狭い画面での読みやすさなど、実際に試した内容と結果
短い説明 作った理由、自分の担当、参考にした教材、AIを使った範囲、まだできないこと

例えば「勉強会のお知らせページ」なら、日時・場所・持ち物を読めて、案内リンクが正しく開くところまでを完成範囲にできます。申し込みフォームや決済機能を付けなくても、情報を整理し、表示を作り、確認する練習になります。

説明文をファイルにまとめるなら、READMEという名前がよく使われます。GitHub公式のREADME案内でも、何をするプロジェクトか、なぜ役立つか、どう使い始めるかなどを記載する考え方が紹介されています。GitHubを使わない場合も、同じ内容をテキストに残せます。

初心者が取り組む題材の例と、増やしすぎない範囲

案内ページ、学習時間の計算、持ち物リストという三つの小さな作品例
学習題材の例を示す生成イラスト。機能を一つに絞って選びます。

次の3つは学習用の案です。申し込む合宿でその技術を扱うか、期間内にどこまで進めるかは、講師や運営者に確認してください。題材は違っても、「最初の完成範囲を小さくする」という考え方は共通です。

例1.勉強会の案内ページ:HTMLとCSSを学ぶ場合

架空の勉強会について、日時・内容・持ち物・問い合わせ先の説明を一つのページにまとめます。HTMLはページの構造、CSSは色や余白などの見た目を扱います。文字や画像を配置するだけでも、情報の順番や読みやすさを考える練習になります。

最初は、会員登録や申し込み情報の保存を作りません。案内を読めるページとして完成させ、リンクと画像を確かめます。個人の電話番号などを例に使わず、架空の内容だと分かる表示を入れます。

完成の確認例

  • 見出しを読むだけで内容が分かる
  • 日程が本文と表で一致する
  • リンク先が正しい
  • スマートフォン幅でも文章が切れない

例2.学習時間の集計:JavaScriptの基礎を学ぶ場合

1日ごとの学習時間を入力し、合計を表示する小さな道具を考えます。最初は入力欄と合計表示だけに絞り、アカウント作成やクラウド保存は後回しにします。計算の仕組みを理解してから、グラフなどを加える順番です。

作る前に「単位は分」「空欄は入力を促す」「負の数を受け付けない」などの扱いを決めます。画面ができてから例外を探すより、確かめることが明確になります。

完成の確認例

  • 30分と20分で50分になる
  • 0分を扱える
  • 空欄のまま計算したときに説明が出る
  • 入力していない日を勝手に実績として数えない

例3.持ち物の確認リスト:画面操作を学ぶ場合

架空の旅行や合宿に向けた持ち物リストを作ります。チェックを付ける、外す、未確認の数を表示する、といった操作を練習できます。写真のアップロードや共有機能は、最初の範囲に含めなくて構いません。

ページを閉じるとチェックが消える仕様なら、そのことを画面と説明に書きます。保存できない作品を「保存できるアプリ」として見せないことも、開発の大切な練習です。

完成の確認例

  • チェックの数と残り件数が一致する
  • すべて確認済みにできる
  • 一つ戻すと件数が戻る
  • 再読み込み後の挙動を説明できる

期間ではなく、授業の中身と作業できる時間で決める

講師の説明を聞く時間と、自分でWebページを作る時間を比べる学習場面
説明を聞く時間と手を動かす時間を分けて考える生成イラスト。実際の授業時間の割合を示すものではありません。

同じ3日間でも、入門の説明が中心か、自分で制作する時間が多いかで進められる範囲は変わります。日数だけから「アプリが完成する」「転職できる」と判断することはできません。

確保できる学習の形 目標の立て方の例
数日間の体験 環境を準備し、教材の一部を自分で変え、変更の意味を説明する
1週間前後の集中 小さな作品一つに絞り、表示や基本操作の確認まで進める計画を相談する
数週間以上の講座 基礎・制作・修正・発表の時間を分け、レビューを受けて直す機会を確保する

この表は期間ごとの到達保証ではありません。経験や授業時間によっては、体験だけで終わる場合もあります。「完成しなかった」という一言で終わらせず、できた部分、止まった原因、次に学ぶ内容が残る計画にしましょう。

申し込む前に、運営者へ聞きたい6つの質問

前提知識、成果物、時間、質問、持ち帰り、復習支援を相談する学習者
申し込み前に条件を相談する場面の生成イラスト。実在する相談風景ではありません。
  • 初日の前提は何ですか。 ファイル操作、タイピング、特定の言語の知識、事前課題を確認する。
  • 最終日に何を見せますか。 教材の模写か、自分の題材で作るのか。個人制作かチーム制作かも聞く。
  • 講師が教える時間と制作時間はどれくらいですか。 「学習時間」の中に自習がどれだけ含まれるかを分ける。
  • 詰まったときに、いつ質問できますか。 質問できる時間、方法、回答までの目安を確認する。
  • 作ったものは持ち帰れますか。 コード、教材、録画、サービスのアカウントが修了後も利用できるかを聞く。
  • 合宿後にレビューを受けられますか。 対象期間、回数、追加料金の有無を確認する。

「何でも作れます」という回答だけでは、初心者が期間内に扱える範囲が分かりません。作りたいものを一つ伝え、「この機能までなら取り組めますか」と聞くと具体的になります。

参加前の準備:初日を設定だけで終わらせない

参加前にパソコン、ファイル、ヘッドホンと作品の設計メモを確かめる人物
機器とファイルを実際に開き、初日の準備を確かめる生成イラスト。

パソコン・ソフト・接続を先に確かめる

学校が指定するOSや機器条件を確認してから準備します。自分のパソコンにソフトを入れる権限があるか、会社から借りている機器を使ってよいかも確かめます。機器を新しく買う前に、必要条件を運営者へ聞きましょう。

授業で使うファイルを保存し、保存先を見つけ、もう一度開くところまで試します。オンラインなら、音声・画面共有・ネット接続も確認します。アカウント作成や有料契約が必要な場合は、料金と修了後の扱いを先に読んでおきます。

題材と完成の条件を、短いメモにする

次の記入欄を埋めて持っていくと、講師と相談しやすくなります。分からない欄は空欄で構いません。

記入すること 勉強会の案内ページの例
誰のためか 参加を検討する人
何をできるようにするか 日時・内容・持ち物を確認できる
最初は作らないもの 予約受付、決済、個人情報の保存
完成をどう確かめるか 情報が一致し、リンクが開き、狭い画面でも読める
相談したいこと 画像の置き方、スマートフォンでの余白

Web制作を一度試したい人は、MDNの最初のWebサイト教材のような入門から始められます。学校の指定課題がある場合はそちらを優先し、別の教材を大量に進めることが目的にならないようにします。

合宿中は、追加機能より「一度通して動く」を先に

アカウントや決済機能を後回しにして、案内ページのリンクを先に確かめる学習者
追加機能をいったん脇に置き、最初の範囲を動かす生成イラスト。

作りたい機能が増えたら、最初に決めた目的へ戻ります。勉強会の案内ページなら、先に見出しから案内リンクまでをつなぎます。色や装飾は、そのあとに調整できます。

作業が止まったときは、直前に変えたところを記録します。「さっきまでは開けた」「画像のファイル名を変えたあとから出なくなった」のように整理すると、相談しやすくなります。何度も別の修正を加えてから質問すると、原因を追いにくくなります。

一日の終わりには、できたこと・まだできないこと・次に確かめることを短く残しましょう。講師に直してもらった場合も、「何を、なぜ直したか」を自分の言葉で書くと、持ち帰ったあとに再現できます。

AIを使ったときは、確認した範囲も残す

AIにコードを提案してもらった場合は、学校の利用ルールを守り、何を生成してもらったかを記録します。動いた画面だけで終わらせず、目的に合うか、空欄や誤入力ではどうなるか、自分で変更できるかを確かめます。

自分で理解できない部分が多いなら、そのまま機能を増やすより、講師と一緒に範囲を小さくします。生成AIを使う作品の説明と検証の残し方は、生成AIポートフォリオの作り方で詳しく扱っています。

合宿後の2週間:作品を一つ直し、説明を残す

狭い画面からはみ出す画像の修正前後を、PCと机上スタンドのスマートフォンで確かめる人物
表示の問題を一つ見つけ、直して比較する生成イラスト。復習の日程は下の表を参照してください。

合宿で作ったものは、記憶が新しいうちにもう一度開いてみましょう。以下は、復習を止めないための編集部の計画例です。日程が合わなければ、同じ順序で無理のない期間へ調整できます。

時期 やること
終了後1〜2日 自分だけでファイルを開き、動かす。手順に抜けがあればメモする
3〜5日 一つの不具合か読みにくい箇所を選び、変更前と変更後を残す
6〜7日 最初の確認項目をもう一度試す。直したことで別の箇所が壊れていないか見る
2週目 目的・担当・変更点・限界を短く説明する。次に学ぶ内容を一つ決める

人に見てもらうときは、「すごいと思うか」より「どこを押せばよいか分かったか」「説明なしで内容を読めたか」を聞くと、次の改善につながります。感想と、実際に起きた操作上の問題を分けて記録してください。

公開する場合は、個人情報・秘密の文字列・他人の素材の利用条件・リンク先を確認します。練習用なら、実在する顧客や参加者のデータを入れる必要はありません。公開前に確かめていない機能は、完成したものとして紹介しないようにします。

海外で学ぶなら、作品を英語で説明する練習を加える

自分が作ったWebページを仲間へ説明する学習者のイメージ
学習場面のイメージ(AI生成)

海外のIT留学を選ぶ場合は、制作とあわせて、質問や作品説明の練習を計画に入れます。専門用語を大量に使うより、「誰のために、何を作り、自分はどこを担当したか」が伝わる短い説明から始められます。

KredoのIT留学の公式案内では、英語で学ぶIT授業や少人数のクラスを紹介しています。受講前には、自分の題材を授業で扱えるか、どのコースが合うか、制作と発表にどれだけ時間を使えるかを確認してください。この記事の練習例が、そのままKredoの課題として採用されているという意味ではありません。

国内・オンライン・海外の選択は、プログラミング合宿の比較記事で整理できます。海外の短期集中講座まで含めて選びたい方は、コーディングブートキャンプの選び方へ進んでください。

よくある質問

合宿で作った作品は、そのまま転職のポートフォリオになりますか?

教材をなぞった部分と、自分で考えて作った部分を分けて説明する必要があります。作品を公開してよいか、教材や素材の条件も確認しましょう。一つの作品があるだけで採用されるとは限りませんが、判断・修正・確認の記録は自分の経験を説明する材料になります。

期間内に完成しなかったら失敗ですか?

未完成の部分と原因が分かり、次に進む手順があれば学習に活かせます。ただし、講座が約束する提供内容を受けられたかは別の問題です。質問やレビューなど、申し込み時に確認した支援があったかも振り返りましょう。

最初からAIを使うアプリを作ったほうがよいですか?

目的によります。ページを読むだけで足りるなら、AI機能を加える必要はありません。外部サービスへの接続や費用管理が増える題材は、基礎と確認の範囲を講師に相談してから選びましょう。

作品を公開しないと意味がありませんか?

公開は必須ではありません。自分で動かし、何をしたか説明し、振り返れることにも価値があります。教材や素材の条件が不明なら、まず非公開のまま学習記録を整理します。

最初の一歩は「作らないもの」まで決めること

題材を一つ選び、誰のためか、何をできるようにするか、最初は作らないものを書いてみてください。そのメモを学校へ見せれば、必要な期間や準備の相談が具体的になります。作品を大きくするより、作って確かめて説明する経験を一周させることから始めましょう。

無料カウンセリングで相談する

作りたいものと今の経験をもとに、KredoのIT留学の内容・期間・費用を確認できます。

無料カウンセリングで相談する

英語でIT・AIを学べるKredo

英語×IT・AIのスキルを身につけてグローバルに活躍しませんか?

当メディアを運営しているKredoは、英語×ITをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で英語とIT・AIを学ぶ「KredoIT留学」「KredoAI留学」を提供しています。これまでの卒業生は3,000名以上。卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×IT・AIのスキルを身につけてグローバルに活躍しませんか?

\ セブ島でIT×英語を学ぶ /IT留学の無料カウンセリングを予約する
\ オンラインでIT✕英語を学ぶ / Kredoオンラインキャンプの詳細をみる >>
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
アバター画像
Kredo編集部

Kredo編集部です!プログラミング、英語学習、キャリア、Kredo情報を発信していきます。

関連記事

  • sort()は元のリストを並べ替えて戻り値がNone、sorted()は元のデータを残して新しいリストを返す比較図
    Web・プログラミング(学習)

    Pythonのsortとsortedの違い|英語の公式仕様で元データ・戻り値を確認

    2026.10.08
  • 机の上で色分けした注文カードと明細カードを並べ、結合後のカードを見比べる学習イメージ
    Web・プログラミング(学習)

    SQLのJOINで行数・合計が増える原因は?1対多と直し方を図解

  • 追加した項目の動きをノートで整理する学習者の写真イメージ
    プログラミング Web・プログラミング(学習)

    JavaScriptのイベント委譲とは?追加したボタンが動く仕組みを実験

    2026.10.06
  • フォームの入力条件をノートで整理する学習者の写真イメージ
    プログラミング Web・プログラミング(学習)

    フォームの入力チェックの作り方|HTMLとJavaScriptで空白・文字数を確認

新規CTA
KREDO JAPAN株式会社

\ SNSで留学の様子を更新中! /

  • Instagram
  • LINE
  • X
  • YouTube
©KREDO JAPAN Inc. 2024 All rights reserved.
Kredoのサービス
セブ島で学びたい方はこちら KredoIT留学
自宅で学びたい方はこちら Kredo Online 英語×アプリ開発コース
運営会社 会社概要 採用情報 お問い合わせ
利用規約 プライバシーポリシー 特定商品取引に基づく表示 資料請求