1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

始めて2週間でWebアプリを作る最低限のツール4選

Last updated at Posted at 2025-04-25

初めまして、sakuraです。

現在、大学生活も落ち着いてきたため、プログラミングの学習を本格的に始めることにしました。それに伴い、Qiitaでの投稿もスタートしてみます。

文章の中には、誤りや拙い表現が多々あるかもしれませんが、温かい目で読んでいただけると嬉しいです。

また、もし間違いやご指摘があればぜひ教えてください!泣いて喜びます。

では、私がプログラミングを始めて2週間でアプリを作ってみて最低限必要とわかったツールを4つ紹介します。

前提

・この記事は、初学者・学習者向けとなっている。
・筆者はコードの文法などはある程度習得済み(if,while文など)
・Todoリストを管理するwebアプリを作成した。
・ここでの「最低限」とは、「開発 → 公開 → ポートフォリオ化」までの流れを実現できた状態を指す。
・使用言語はPython

VScode (Visual Studio Code)

役割:コードを書く・管理するためのアプリケーション
具体的な使い方

・フォルダ構成を作る(例:app.py, templates/, static/, todos.json)

・コードを書く(Flaskルーティングや処理)

・ファイル操作・保存・実行(ターミナルから python app.py)

・HTMLテンプレートやCSSもここで編集できる

・Gitの操作もVSCode内で可能(ステージ→コミット→プッシュ)

初心者(筆者)の解釈

非開発者が想像するTHE・プログラミングの部分を担当するツールで、コードを書いたり、作成したプログラムを実行したりするのに必要。

GitHub

役割:作成したコードをクラウド上で管理し、公開・共有もできる
具体的な使い方

・VSCodeのプロジェクトをリポジトリ化→アップロード

・進捗を保存・履歴を残す

・他人にもコードを見せられる(ポートフォリオになる)

・Renderと連携することで自動で最新コードをデプロイできる

初心者(筆者)の解釈

学習、開発の記録を残し、外部への技術の証明するのに必要。

Flask

役割:Webページの表示・ユーザーの入力処理・データ保存などを担当
具体的な使い方

・ユーザーの入力を取得

・HTMLテンプレートを表示

・入力されたデータをファイルに保存・読み込み

・ローカルでアプリのプログラムを実行すると、ブラウザで動作確認できる

初心者(筆者)の解釈

ユーザーのリクエストに応じて、VSCodeで作成したプログラムに対して、どこのページで何をするか・何を見せるかを決めるのに必要

Render

役割:GitHubにあるコードをそのまま動くWebアプリにし、ネット上に公開する
具体的な使い方

・デプロイを行うため、グローバルサーバーのURLを取得する

初心者(筆者)の解釈

Flaskでローカルサーバー上でのみ動かせるようになったアプリを、グローバルサーバーで公開するためURLを取得するのに必要。

※ 注意

今回紹介したツールは、あくまで私が使った“ひとつの例”にすぎません。他にも色々な方法やツールがあると思いますので、その点はご了承ください。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?