拡張機能研究所

おすすめのブラウザ拡張機能をマンガ形式で紹介!

2025/08/07 09:00

ざっくり理解!Web開発の流れをゆるっと解説してみたよ🎀

Web開発ってなんだか難しそう…って思ってたけど、実は大まかな流れを知るだけでグッと見通しがよくなるんだなって気づいた話。 ざっくりポイントだけまとめてみたよ✨
ざっくり理解!Web開発の流れをゆるっと解説してみたよ🎀

なんとなく「Web開発」って聞くと、専門用語とかいろんなツールが多くて難しそうだな~って思うこと、ない?😳

でも実は、大まかな流れだけ押さえれば、全体像がスッキリ見えてくるんだなぁって最近気づいたんだ💡

今回は、ある Reddit の図を参考にしながら、ざっくりだけどWeb開発の全体像を解説してみるね


まずは「何を作るか」を考える段階📌

これは普通のものづくりと一緒で、目的とイメージを固めるフェーズだよ。
例えば、「こんなサイトを作りたい!」とか「どういう機能が必要かな?」ってのを整理する感じ。

この段階でちゃんと考えとくと、後の作業がグンと楽になるんだって🥺


次は「設計」という作業👀

ここは、いわゆる設計図づくり。
どんな画面があって、ボタンはどこに置くかとか、データはどうやって処理するかとかを決めていくよ。

私はこのあたりで「うわ、もう専門的すぎてわかんないよ~」ってなるけど、実はここがちゃんとできてると動きやすいんだなって思う💭


プログラミングで「作る」フェーズ🔧

やっと手を動かしてコードを書くところ!✨
HTMLやCSSで見た目を作って、JavaScriptで動きをつけたり、サーバー側の処理を書いたりするよ。

ここは作業量が多くてちょっと大変だけど、完成してくると楽しいポイント🥰


「テスト」でバグや問題を探す🧐

せっかく作ったのにちゃんと動かなかったら、意味ないよね?
だから動作確認と不具合チェックは必須

自分じゃ気づかないミスも多いから、ここでしっかり見直すのがコツだって感じた✨


最後に「公開」と「運用」へ🎉

いよいよみんなが使えるようにする段階。
でもここで終わりじゃなくて、使ってもらいながら改善していくのがWeb開発の醍醐味なんだよね💗


ざっくりまとめると…

  • 目的を決める(作りたいもののイメージ)
  • 設計する(どう作るかの計画)
  • プログラミングで作る(コードを書く)
  • テストする(間違い探し)
  • 公開して運用する(みんなに使ってもらう&改善)

こんな感じで段階を追って進むから、たしかに難しい部分もあるけど、「全体の流れ」が見えるだけで、気持ちが楽になるかもだよね✨

Web開発って意外とシンプルに考えられるところも多いし、ひとつひとつクリアしていくのが面白い!って思ったりしてる💭

もし興味があるなら、この流れを頭に入れておくと、「あ、今どこやってるんだろう?」って迷わなくていいかも🎀

ちょっとした気づきだけど、シェアしたかったんだ〜💗

またなんか気づいたら話すねっ🌸


コメント

アバター

ノーラン

浮遊してるエロ画像だ

アバター

グレース

あの緑色、見覚えあるわ

アバター

クロエ

3.1415926535ページ目って何があるんだろう?

アバター

キンバリー

クエリ弄ってページ番号変えようとしたでしょ? 数字が合ってないと変な表示になるみたいだね

アバター

ジョージ

お前の正体は分かってるよ

アバター

ベン

正直に言ってよ、どのキャラ探してたの?

アバター

サム

なんでわざわざn+1/42ページ目なんて見るんだよ

アバター

クリス

お前がどんな人間か分かってるぜ

アバター

レオ

みんながどのサイトかすぐ分かるの最高だよね

アバター

サラ

あれ? これは聖なる数字じゃないよね?

アバター

ジャック

うーん

アバター

エマ

ちょっと待って

アバター

ハンナ

完全に意味不明な投稿まとめだね

アバター

ロバート

この背景色の紙、額に入れて飾りたいくらいだわ


関連記事