webアプリ開発手順!初心者がゼロからwebアプリを公開するまで

開発手順

「プログラミングに挑戦したいけど、何から始めればいいか全然わからない…」

そんなあなたも大丈夫!

まずはこの記事で、Webアプリを作り、インターネットで公開するまでの開発手順のイメージをしっかりつけていってください。

今回はWindowsパソコンを使って、Rubyというプログラミング言語を使用します。

まず開発環境を準備します。

Linux環境の準備

Windows上で開発を行うと、一部のプログラムが動作しなかったり、サーバー環境と異なる影響でトラブルが発生することがあります。

そのため、WSL(Windows Subsystem for Linux)というツールを使って、Linux環境をWindows上に構築します。

開発環境をLinuxに近づけることで、本番環境でのトラブルを未然に防いだり、開発効率を向上させることができます。

Linux(リナックス)とはサーバー環境で広く利用されているOSのことです。

※OS(オペレーティングシステム)とは、コンピューターの基本的な動作を管理するソフトウェアのことで、WindowsやmacOS、Androidと同じ仲間です。

開発ツールのインストール

Linux環境の中にRubyやデータベースなどの開発ツールをインストールします。

※データベースは、アプリで使うデータを保存しておく場所です。

目次

設計

README

まず、READMEと呼ばれるテキストファイルを作成し、

プロジェクトの概要(何を作るのか?)、

セットアップ方法(動作させるための手順)、

使用技術(Ruby,Rails,PostgreSQLなど)、開発環境などを記載します。

つまり、READMEとはプロジェクトの概要説明書というイメージです。

PostgreSQLとはデータベースの一つです

画面遷移図

つぎに、画面遷移図を作成します。

この図は、ユーザーが操作する画面の移り変わりを視覚的に表現したものです。

ER図(Entity-Relationship Diagram)

つづいて、ER図(Entity-Relationship Diagram)を作成します。

この図はデータベース設計において、データの構造とデータの関係性を視覚的に表現するための図です。

つまりER図とはデータベースの設計図のようなものだと考えてください。

実装

ここまできたら、設計をもとに、アプリを作っていきます。

まずは、HTMLやCSSを使ってページの見た目を作りながらRubyで機能をつくる。

データベースとの連携もここで行います。

Ruby on Railsというフレームワークを使うと、Webアプリのひな型を簡単に作れるので便利です。

フレームワークとはソフトウェア開発における「枠組み」や「骨組み」のようなものです。

Gitというバージョン管理ツールを使って少しずつ変更を加えていきます。

Gitは、ファイルの変更履歴を管理できるツールです。プログラムを間違えても前の状態に戻せるため、開発には欠かせません。

完成したら作ったアプリがちゃんと動くか、自分のパソコンで確認します。

作ったアプリを管理する

その後、GitHubというサービスに、作ったアプリの保管場所(リポジトリ)を作り、

アプリケーションを保管します。

GitHubとは、世界中の開発者が利用する、Web上でソースコードを保管・管理・共有するためのプラットフォームです。

デプロイ(アプリをインターネットで公開すること)

次に、作ったアプリを、render.comやHerokuなどのサービスに預け、インターネット上に公開します。

render.comやHerokuといったサービスに登録して必要な設定を行いGitHubからアプリを預けます。

まとめ

以上がWEBアプリケーションを作る流れのイメージとなります。

  1. 開発環境を作る
  2. 設計する
  3. 実装する
  4. アプリを管理する
  5. デプロイする

メッセージ

実際にはもっと細かい工程があったり、デプロイしながら開発を進めたりといったこともありますが、今回はイメージのしやすさを重視し簡略化しております。

本気でプログラミングを学びたいと思ったらRUNTEQを検討してみてください。

過去に独学の限界を感じたわたしがたどりついたプログラミングスクールです。

楽ではありませんが、やり遂げればゼロからアプリケーションを作れるようになります。

自信をもっておすすめできるスクールですので、ぜひ検討してみてください。

PR

★友達紹介用★超実践型オンラインプログラミングスクール【RUNTEQ(ランテック)】

HTMLとCSSについて説明した記事を作りましたので、以下のリンクをクリックして読んでみてください。

>>HTMLとCSSとは?プログラミング初心者に向けた基本知識

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

プログラミングスクールRUNTEQを卒業後、会社員を続けながら、アプリ開発とブログ運営を楽しんでいるただの人

目次