LVLPATH

日本最強無料プログラミングスクール

ウェブアプリ作成

STEP5: ウェブアプリ作成

🔰 概要

STEP5ではSTEP3でインプットしたプログラミング言語とSTEP4でインプットしたGit,GitHubを使ってフレームワークを使って勉強しながらウェブアプリを作っていきましょう。

✅ 作成期間(勉強期間)

  • 1~2ヶ月
    • STEP6(次のステップ)のポートフォリオ作成よりもSTEP5ではインプットに重きをおくのがおすすめです
    • 手を動かして作りながら不明点を適宜ChatGPTに聞くなどでOKです

✅ ウェブアプリ作成手順

next.js

STEP1: ハンズオン形式の本を1冊選ぶ

next.js

flask

上記ののようなハンズオン形式の本を1冊使うプログラミング言語に合うものを選びましょう。

Kindle Unlimitedに登録すれば月額980円で多くのハンズオン形式の本から選ぶことができるのでおすすめです。

*フレームワークについて解説されてる本ではなくて、手順通り進めていけば成果物が作れる本(ハンズオン)を選びましょう

STEP2: 手順通りに進めてウェブアプリを完成させる

不明点などは適宜ChatGPTに聞いたり不明点を調べながら書籍に書いてある通りに完成させましょう。

STEP5ではウェブアプリを作りながらインプットに重きをおくことを推奨しているので、調べたりする時間が多くなって進捗が悪い場合でも勉強しているというマインドセットで取り組むことがおすすめです。

STEP3: 完成したら改良などをする(任意)

  • 機能を追加する
  • 作ったウェブアプリケーションをベースにしてオリジナルのアプリ化してみる
  • 1から作り直してオリジナルのアプリにする

こういった作業はポートフォリオを作る時に行うことになるので任意ですが、実際に自分自身で要件を定義して実装していくことで技術力は上がります。

例えば、会員登録機能を追加する、いいね機能を追加する、などの機能を自分で要件から定義して調べながら実装していくなど。

STEP4: デプロイしてネットに公開する

STEP6のポートフォリオ作成でもデプロイしてネットに公開することになるので、先に勉強もかねてやっておくことはおすすめできます。

AWSのEC2やVPSやvercelなどにデプロイする程度でOKです。

*「EC2 デプロイ」「さくらVPS デプロイ」などで検索すれば手順を追って解説してる記事が出てくるのでそれを真似していきましょう

  • 空っぽのウェブアプリケーション(localhost:8000のハローワールド状態)がドメインに紐づけてデプロイできれば、作ったウェブアプリなどをデプロイするのもほとんど同じ操作になります

✅ ウェブアプリ作成に関するTips

image

①: 最初はとにかく真似て作っていく

ハンズオン形式の本で初めてウェブアプリを作っていく時は基本的には分からないけど真似して「とりあえず動く」状態で進めていくことが多いです。

この時に調べすぎてしまったり完全に理解してから次に進もうとするといつまでも終わらなくなります。

なので、完全にコピペでは微妙ですが、ある程度は分からなくてもコピペして大雑把に前に進むことが重要になります。

②: 作りながら勉強するというマインドセット

プログラミングは「何かを作る目的があってそこに不足している知識などをインプットして勉強しながら作っていく」という考え方がベースになります。

そしてこの作業を反復し続けていると徐々に網羅範囲が広がってさらに理解度も上がってきます。

最初のウェブアプリ作成の際もその考え方を持つのが重要で、「できないこと」「分からないこと」が前提としてあって、それを調べながらなんとかしていきましょう。

*技術力が上がってきても全ての範囲はカバーされないので、基本的には不明点は調べながら作っていくことがエンジニアの仕事の進め方になります

*得意な領域ができてくるとその分野はほとんど何も調べなくても要件に対してサクサクと手が動くようになります

✅ 取り入れたい技術領域

以下のResouceを参考にしてください。

✅ 参考動画

*2倍速などで概要をざっくり知るのがおすすめです

✅ STEP5でやること

  • 1~2ヶ月ぐらいの時間をかけてウェブアプリをハンズオン形式の書籍を真似して作って勉強していく
  • ある程度のところまで作れたらEC2やVPSなどのサーバーにドメインと紐づけてデプロイする
お問い合わせ