プログラミングは、コンピューターにしてほしい処理を、順番や条件で書くことです。「課題を締切の早い順に見る」も、その一つ。最初は三つの課題を並べる小さなページで試せます。作る。入力を変える。結果を確かめる。その一往復を残せば、「プログラミングを勉強しました」の先に、自分がした作業を話せます。
就活用だからと、ログイン、通知、スマホアプリまで最初から広げなくて大丈夫です。まず動きを一つ決めます。以下の課題名や日付、作業メモは、学習の進め方を示す架空の例です。
目次
「課題を締切順に見る」を、完成させる範囲にする
まだ何も触っていなければ、まず紙に「課題名」と「締切」の二列を書いてください。人なら日付を読んで並べ替えられますが、コンピューターには、どの情報を日付として比べるかまで指示が要ります。三件を表示する、日付を比べる、順番を変える。この作業を一つずつ作るのが今回の制作です。
用意するデータは「レポート・10月2日」「発表資料・10月12日」「小テスト準備・10月3日」の三件。同じ年の予定として、締切が近い順に出せれば最初の目標を達成、と決めます。
完成条件は画面の見栄えより先に書きます。「三件すべてが表示される」「日付の早い順になる」「課題名と締切の組が入れ替わらない」。これなら、自分でも合否を見られます。
Webページは、サイトを見るソフトであるブラウザーが、ファイルに書かれた内容を読み取って表示します。HTMLは「ここは見出し、ここは一覧」と文章の構造を示す記述、CSSは余白や色など見た目の指定、JavaScriptは並べ替えや操作に応じた処理を書くプログラミング言語です。「文字を表示するだけ」から「締切順に変える」へ進むので、この順に役割を分けて覚えられます。
手元で始めるなら、ファイルを保存できるパソコン、ブラウザー、文字でコードを書き保存するソフトであるテキストエディターを用意し、MDNのHTML入門の最初のページを表示するところまで試します。まだ日付順にする必要はありません。
ブラウザーで自分が保存した文章を見られたら、次にCSS入門、JavaScript入門へ。一度に三つとも変更せず、表示できた段階を保存しておきます。教材がファイル準備を前提にしていて止まったら、その準備の項目へ戻るか、そこから案内する講座を候補にします。
最初はデータをコード内へ用意する形でも構いません。入力欄を作るのは、その三件を並べられた後。保存機能がなければ「閉じると消える」、通知がなければ「期限のお知らせは出ない」と、現時点の動作を説明します。
順番がおかしい。直す前に、使った入力を残す
昇順とは、小さいほうから並べる順序です。ただし、日付を「10/2」「10/12」「10/3」という文字のまま比べると、「10/12」が先へ来る場合があります。文字列、つまり文字の並びとして比べていて、日付の早さを比べていないためです。「10/」の後の「1」と「2」で順序が決まってしまいます。結果だけ見て数字を書き換える前に、どんな形式で比べているかを調べます。
ここで一度、修正前の結果を残します。次に、年・月・日をどのように扱うかを決めて処理を直し、同じ三件でもう一度確認します。直すたびに入力も変えると、修正で動いたのか、たまたま違うデータで動いたのかが分からなくなります。
三件で合ったら、少しだけ条件を変えます。確認したいのは、次のようなケースです。
| 試す入力 | 先に決める期待結果 |
|---|---|
| 同じ締切が二件ある | 二件とも残る。同じ日付内の順序も方針を決める |
| 課題が一件もない | エラーで止めず、一覧がないと分かる表示にする |
| 入力欄を作った後、締切が空欄 | 入力を求めるなど、決めた扱いになる |
| 年をまたぐ締切を扱う | 月だけで比較せず、年を含む日付順になる |
全部を同じ日に実装する必要はありません。まだ扱えないケースには「未対応」と書きます。少なくとも、動く範囲を自分で説明できる状態にしておきたいです。
作業を終える前の三行
- 変えたこと：締切を早い順に表示する処理を作った。
- 困ったこと：日付を文字のまま比較し、10月12日が2日より先に出た。
- 確かめたこと：同じ三件で2日、3日、12日になることを確認。空欄の扱いは次に試す。
うまくいかなければ、三行目に現在の結果を書きます。その記録を講師や相談相手へ見せれば、「どこから分からないか」を伝えられます。未完成の箇所も示すと、次に試すことを相談できます。
作品を開く人に、何を見てもらうかを書く
コードは、プログラムなどの処理を書いた記述です。それを渡されても、読む人にはどこから試すのか分からないことがあります。作品の説明書も作ります。GitHubはコード等の変更を管理・共有するサービスで、READMEはそこで最初に読まれることが多い説明ファイルです。公式ガイドも、目的や使い始める方法を記載するよう案内しています。GitHubとは、READMEの案内最初から公開アカウントを作ることを制作の目標にせず、手元のメモでこの説明を書けるようにしてから、共有方法を選べます。
この締切一覧なら、説明の例はこうなります。
- 作った理由：課題を締切の早い順に見たいから
- 使い方：指定の手順でページを開き、用意した三件の表示順を見る
- 自分の担当：一覧と並べ替えを制作。教材を参考にした箇所を記載
- 確認したこと：使った入力と、修正前後の結果
- まだできないこと：入力の保存、通知など、実際の未対応機能
書いた説明だけを見て、作品を閉じた状態から起動してみます。自分が無意識に行った設定や操作が必要なら、そこを足す。スクリーンショットを添える場合は、どの入力の結果かも付けます。きれいな完成画面一枚より、見てほしい動きが分かります。
公開する前に、学校や共同制作者のルール、教材の利用条件を確かめます。名前やメールアドレス、パスワード、APIキー、利用権限のない画像が入っていないかも確認してください。APIは別のサービスの機能とやり取りする窓口で、APIキーはその利用を認めるための秘密の文字列です。作品の説明に必要なのは使った仕組みで、その秘密の文字列そのものではありません。公開できない作品なら、許可された範囲の説明や画面で伝える方法を相談できます。
AIのコードを使ったら、自分が確認した範囲を話す
ここでのAIは、質問や指示に応じてコードの案を生成する道具です。教材の解答のように、その課題で正しいことが確認済みの答えが返るとは限りません。仕組みをまだ説明できない箇所を見つける助けに使い、最後は同じ入力で実際の動きを見ます。
AIに案を出してもらった場合、提案された処理をそのまま自分の理解した技術として話さないようにします。どこを採用し、どこを変え、どの入力で動作を確認したかを分けて残します。
たとえば、「並べ替えの案はAIに相談しました。月だけを比較していたので年も扱うように修正し、12月と翌年1月の入力で順を確認しました」。実際にそこまで行ったなら、自分の判断と作業が伝わります。理解できていないところは、質問する箇所です。
GitHubのAI生成コードの確認ガイドも、人による確認、目的との整合、動作のテストを重視しています。AIへ「合っていますか」ともう一度聞くだけで、動作確認を済ませないでください。AI生成コードの確認ガイド
選考課題では、応募先が示す外部ツールやAI利用の条件に従います。使ってよい範囲が不明なら、提出物を作る前に問い合わせます。
講座を選ぶなら、止まった画面をどこへ見せるか
独学でページを開けて、分からない箇所を調べながら一つずつ直せるなら、まずその方法を続けられます。ファイルの保存や画面の表示から止まるなら、初期準備を一緒に確認する支援があるかを見る。動くページは作れるが考え方が分からないなら、答えのコードだけでなく「なぜそうするか」を説明してもらえるかを見る。同じ未経験でも、必要な助けは違います。
独学で困るのは、答えが見つからないときに、質問をどこから始めるか分からない場面です。講座を選ぶときも「サポートあり」からもう一つ進めます。コードと入力例を見てもらえるか、何時に質問できるか、返信を受けて自分で直す時間が取れるかを聞きます。
チーム制作なら、全員の時間を合わせる回数と、自分の担当を説明できる成果物が残るかも確認します。発表があっても、全員が同じ部分を作るのか、役割を分けるのかで経験が違います。
TECH-BASEの公式トップは、2028年卒向けの無料プログラミングインターンを案内しています。JavaScriptコースの個別ページには修了後の任意の有料版と、別の対象年表記もあるため、参加する回の卒年・日程・費用を確かめます。就業体験なのか学習・チーム制作なのかも、実施内容を読んで説明します。TECH-BASEの学習案内、JavaScriptコース
公式サイトの受講者談には、文学部出身のR.Sさんが作れる楽しさに触れた話や、経済学部出身のT.Mさんがチームの支えを挙げた話があります。運営側が掲載した個別の体験なので、誰でも同じところまで進む証拠にはできません。自分なら、どの課題でどんな支援を使えるかを聞く材料にします。受講者談の掲載ページ
面談では、制作の途中から次の学習を決められる
TECH-BASE就活エージェントの2026年10月5日時点の案内は、27・28卒の学部生・院生向けの無料支援です。学習講座と面談の申込先を読み分け、自分の対象年と相談範囲を確かめます。就活エージェントの案内
画面が締切順に並んだら、何を変えたか書いて今日は終える。まだ並ばなければ、その入力と結果を残す。次に開くとき、どこから再開するかまで決まっています。
