プログラミング未経験でも Vibe Coading で AI と一緒にアプリや Web ページを作る際、まず覚えておきたいのが ソースコード と コードファイル に関する基礎知識です。
ソースコードは人が書いた命令文を指し、その命令を保存しているのがコードファイルです。
HTML・CSS・JavaScript など拡張子ごとに役割が異なり、正しいフォルダ構成で管理すると作業効率が大きく向上します。
この記事ではソースコードとコードファイルの意味をはじめ、HTML・CSS・JavaScript・Python・Rubyの特徴、さらにフォルダ整理術まで順を追って解説します。
読み終えるころには、学習タイマーや小さな Web アプリを作る準備が整い、自信を持って Vibe Coading の次のステップへ進めるでしょう。
スポンサーリンク
ソースコード・コードファイルとは
プログラミングでは、書いた命令文を人にも機械にも読める形で保存する必要があります。
その命令文自体をソースコード、保存している実体をコードファイルと呼びます。
ここでは次の３点を押さえることで、ファイルを見るときの戸惑いをなくし作業効率を高めることを目指します。
ソースコードの意味
ソースコードとは、プログラミング言語やマークアップ言語で記述した文字列そのものを指します。
ブラウザーや実行環境は直接ソースコードを読み取り、画面表示や処理を実行します。
たとえば「学習タイマーを二五分でカウントダウンする」という機能を実現したい場合、HTMLでタイマー表示の骨組みを作り、JavaScriptで時間計算の手順を書くと、その文字の羅列がソースコードです。
人間が内容を理解しやすいように改行やインデントを付けておくと、後から修正するときに迷いません。
AI アシスタントに相談する場合も、ソースコードを渡すことで的確な提案が得られるため、コードの可読性を保つことが学習効率向上につながります。
コードファイルの役割
コードファイルはソースコードを入れ物に収めた存在で、拡張子によって用途が一目でわかる仕組みになっています。
拡張子「.html」は画面の骨組み、「.css」は装飾、「.js」は動きを担当し、「.py」や「.rb」はサーバー側処理やスクリプトに使われます。
入れ物を分けておくと、必要な部分だけを編集したり、ほかのプロジェクトへ再利用したりしやすくなります。
また、バージョン管理ツール Git ではファイル単位で変更履歴を追跡できるため、タイマーのデザインを変えた瞬間や動作を追加した場面を正確に記録できます。
学習の初期段階でも拡張子を確認する習慣をつけると、ファイルを開いた瞬間に「どの機能に関係するか」が分かり、作業が格段に速くなります。
テキストエディターで開ける理由
コードファイルはすべてプレーンテキストで構成されているため、Visual Studio Code やメモ帳などのテキストエディターで問題なく開けます。
プレーンテキストは装飾情報を含まない純粋な文字の集合なので、OS の違いやアプリケーションの有無に左右されにくく、環境を選ばず閲覧と編集が可能です。
さらに、テキストエディターは構文ハイライト機能を備えており、HTML タグや JavaScript のキーワードを色分け表示してくれます。
これにより、初心者でもタグ閉じ忘れやスペルミスを視覚的に発見でき、エラーの早期解決に役立ちます。
AI 案内役として Gemini CLI を使う場合も、エディターでファイルを開きながら質問を投げれば、該当箇所を示しつつ修正案を受け取れるため、学習サイクルがさらにスピードアップします。
代表的なコードファイルを知ろう
ここからは「どの拡張子がどんな役割を持っているのか」を具体的に押さえます。
ファイル名の末尾を見るだけで用途がわかるようになれば迷わなくなります。
HTML ファイル
拡張子は .html
Web ページの骨組みを記述するマークアップ言語です。
<html>〜</html> タグの中に <head> と <body> を置き、タイトルや本文、画像、リンクなどをタグで囲んで並べます。
ブラウザーはこの HTML を読み取り、要素の並び順どおりに画面を構築します。
たとえば学習タイマーなら、残り時間を表示する <div id="time">25:00</div> とボタン <button id="start">Start</button> を HTML に置くことで、「ここに数字」「ここにボタン」と位置を決められます。
HTML 単独でもページは表示されますが、装飾がない状態なので「モノクロの骨格」だとイメージすると理解しやすいでしょう。
CSS ファイル
拡張子は .css
HTML で作った骨組みに色・文字・レイアウトなどの装飾を与えるスタイルシート言語です。
body { background:#f0f0f0; } のようにセレクターと波かっこで書き、HTML タグやクラス、ID に紐づけます。
HTML 内で <link rel="stylesheet" href="style.css"> と読み込むか、VS Code 拡張 Live Server でページを再読み込みすると、設定したスタイルが即座に反映されます。
学習タイマーではタイム表示を大きなフォントにしたり、休憩中だけ背景を淡いグリーンに変えたりするのが CSS の仕事です。
HTML と分離しておくことで「構造」と「見た目」を個別に編集でき、後からテーマ変更するときも CSS だけを触れば完結します。
JavaScript ファイル
拡張子は .js
ページに動きや計算を追加するプログラミング言語です。
setInterval() を使えば 1 秒ごとに関数を呼び出し、カウントダウンを実現できます。
HTML の末尾で <script src="timer.js"></script> と読み込むと、ブラウザーが JavaScript を解釈して実行します。
クリックイベントに反応してボタンの文言を「Stop」に切り替えたり、残り時間が 0 になった瞬間に CSS のクラスを付け替えて背景色を変更したりと、動的な振る舞いはすべて JavaScript が司令塔となります。
未経験者でも「変数で数字を持ち、1 ずつ減らす」程度から始めればすぐに効果が見えるため、学習の達成感を得やすい言語です。
Python ファイル
拡張子は .py
サーバー側の処理やデータ分析、スクリプト自動化で人気の高い言語です。
ブラウザー単体では動きませんが、Flask や FastAPI といったフレームワークを通じて Web アプリのバックエンドを構築できます。
例えば学習タイマーの利用履歴を保存し、日ごとの合計学習時間をグラフ化したい場合、Python で API を用意して JavaScript から呼び出す、という役割分担が可能です。
AI ライブラリが豊富なので、Gemini で生成したコードを Python で補完・改良する流れもスムーズに行えます。
Ruby ファイル
拡張子は .rb
Python と同じくサーバーサイドで用いられるスクリプト言語で、特に Web フレームワーク Ruby on Rails が有名です。
シンプルで読みやすい文法が特徴で、puts "Hello" と書くだけで文字を出力できます。
学習タイマーを多人数で共有する Web サービスへ発展させたい場合、Rails を使えばユーザー登録やデータベース連携を短時間で組み込めます。
Ruby ファイルもプレーンテキストなので VS Code で開け、Gemini CLI に渡して「このメソッドをリファクタリングして」と依頼すれば最適化提案を受け取れます。
フォルダとファイルの基本整理術
プロジェクトルートの作り方
新しいアプリやサイトなどを作るときは、まず作業用の“箱”プロジェクトルートを用意します。
ドキュメントなど、場所を決めて右クリックから「新規フォルダー」を選び、わかりやすく study-timer のように名付けます。
以降に作る HTML や CSS、JavaScript はすべてここに保存されるため、コードが散らばらず管理がしやすくなります。
後で Git を導入するときも、このルートをひとかたまりとして履歴を取るだけで済むので、最初に箱を決めておくと後工程が驚くほど楽になります。
よく使うフォルダ名
プロジェクトルートの中では、種類ごとにサブフォルダーを分けると見通しが良くなります。
HTML を置く public、スタイルをまとめる css、動きを司る js、画像を保存する img、ライブラリーを入れる libs という分け方が一般的です。
たとえば学習タイマーの改良版で背景画像や通知音を追加したい場合、画像を img/background.png、サウンドファイルを assets/alert.mp3 に置くようにすると、ファイル名が増えても役割が一目でわかります。
フォルダー名は半角英字の小文字でそろえると OS 間でトラブルが起きにくく、読みやすさも保てます。
AI アシスタントに質問するときも「css/style.css のボタン色を変えて」と書くだけで該当ファイルが特定されるため、修正指示が的確になります。
相対パスと絶対パス
HTML から画像やスタイルを読み込む際に欠かせないのがパスの考え方です。
現在位置を基準に書く方法を相対パス、ドライブやドメインのルートから書く方法を絶対パスと呼びます。
たとえば index.html と同じ階層にある css/style.css を読み込む場合、相対パスでは <link rel="stylesheet" href="css/style.css"> と書きます。
もし絶対パスで書くと Windows なら C:/Users/you/study-timer/css/style.css、Web サーバーなら https://example.com/css/style.css のように長くなり、フォルダーを移動するとリンク切れになる危険があります。
開発中はフォルダー構成を頻繁に変えるため、原則として相対パスを使うと安全です。
逆に外部の CDN を参照するときや画像を別ドメインに置く場合は絶対パスが便利なので、用途に応じて使い分けるとスムーズに作業が進みます。
まとめ
HTML、CSS、JavaScriptはよく「家づくり」にたとえられます。
骨組みとなる柱や壁がHTML、壁紙や塗装がCSS、照明や家電を動かす電気配線がJavaScriptという具合です。
家は柱だけでも立ちますが、壁紙や配線がなければ住み心地が悪くなります。
Vibe Coadingはプログラミング未経験でも簡単にツールやサイトを作成できますが、基本的なコードファイルを知っておくと、作成や管理だけでなく、修正や改善など、作りたいものを作るという工程のスムーズ化にも役立ちます。
是非この機会に、少しずつ覚えておきましょう。
プログラミングなどほぼ経験のない、50歳手前の主婦が楽しくVibe coadingに挑戦しています。是非他の記事も参考にしてみてください。
一緒に楽しんで学びましょう！
Vibe coadingについて、導入やエラー対策、使い方までログを公開中
