MENU

【ゼロから作る】本格的なwebアプリの作り方を学ぶ!学習手順と注意ポイント

2020 5/24
【ゼロから作る】本格的なwebアプリの作り方を学ぶ!学習手順と注意ポイント

この10週間プログラミング講座では、知識ゼロのプログラミング初心者の方がプログラマーとしてのキャリアをスタートできることを目指す講座です。

第6週目の「初めてTODOアプリを作成する際に意識したい本気のスキルアップ学習手順」をまだ読んでいない方は、ぜひ先にこちらをお読みください。

先週までの講座でTODOアプリの作成を終えたかと思うので、すでに基本的なwebアプリを作るスキルは十分身についています。

今週からは、自分が作りたいオリジナルアプリケーション作成に向けて、より本格的なwebアプリ制作に取り掛かっていきましょう!

今週の講座を終えるころには以下のことができるようになることを目指します。

  • 自分のコードがよりプロの書き方になる
  • 中規模アプリを作るときの手順がイメージできる

それでは見ていきましょう。

目次

本格的なWebアプリの作り方を学ぶ学習手順

TODOアプリを1人で作れるスキルがあれば、オリジナルアプリを作ることは十分可能です。

しかし、TODOアプリをなんとか作れるレベルのスキル感では、自分が作りたいサービスを作ろうとするとほとんどの人が挫折するでしょう。

なぜなら、規模が少し大きくなるとWebアプリ制作で考えることが一気に増えるためです。

したがって、一度中規模なアプリを作る経験をしておく必要があると言えます。以下にその学習手順を書いているので、確認していきましょう。

中規模なWebアプリの作る学習手順
  • 中規模アプリを作成する教材の写経を行う
  • 写経したアプリを元に作り方を真似してオリジナルアプリを作る

中規模アプリを作成する教材の写経を行う

10週間講座をしている人には「またか」と思われるかもしれませんが、中規模アプリを作成する際にも写経から始めましょう!

上記でもお話しましたが、Webアプリは規模が少し大きくなるだけで作り方が変わってきます。

中規模アプリを作る際に知っておくべきポイントを以下に挙げてみます。

中規模アプリを作成するときに意識すること
  • より全体の設計(ファイル分割など)が重要視される
  • フレームワーク(Rails, Laravelなど)が一般的に利用される
  • 無茶苦茶な実装はサービスを完成できない一番の原因

これらの事実は、正直自分で作ってみないとわからない部分もありますが、写経することである程度の正解像を固めておくといいですね。

(ちなみに僕は初めて作ったアプリでこの注意点が全然意識できてなくて苦労しました…)

のアイコン画像

10週間講座の7, 8週目は写経にたっぷり時間を使おう

写経したアプリを元に作り方を真似してオリジナルアプリを作る

続いて、オリジナルアプリを作るときには、上記で写経したアプリの構成を真似して作るようにしましょう。

具体的に真似をしたいポイントとしては、以下のような点です。

オリジナルアプリを作るときに真似するポイント
  • フレームワークの使い方
  • フォルダ構成と役割
  • プロのコードの書き方

このあたりは次の「中規模Webアプリを写経するときの注目ポイント」で解説していきます。

のアイコン画像

オリジナルアプリもまずは真似から始めると効率よく作れますよ!

中規模Webアプリを写経するときの注目ポイント

では、実際に中規模Webアプリを作成するにあたっての注目ポイントについて解説します。

注目ポイントは以下の3つです。

写経時の注目ポイント
  • フレームワークの使い方
  • フォルダの構成と役割
  • プロのコードの書き方

フレームワークの使い方

まず、始めに学びたい点はフレームワークの使い方についてです。

ここまでは、フレームワークを使わないJavaScriptやPHP、Rubyなどの学習を進めてきましたが、中規模Webアプリを作るなら一般的にフレームワークを使います。

フレームワーク・・・ライブラリの集合体。便利にアプリケーションを作るためのプログラムの塊

一例を挙げると、Webアプリを作るなら以下のようなフレームワークが有名かと思います。(厳密には一部フレームワークでないものもありますが)

言語別有名なフレームワーク

  • JavaScirpt・・・React, Vue.js, AngularJS
  • PHP・・・Laravel, CakePHP, Symfony
  • Ruby・・・Ruby on Rails
  • Python・・・Django
  • Java・・・SpringBoot
  • etc…

したがって、教材もこれらのフレームワークを活用したものを選びたいところですね。写経に最適な学習教材は「中規模Webアプリの写経に最適な教材」で解説します。

フォルダの構成と役割

規模が大きくなればなるほど、設計が非常に重要な役割を果たします。

しかし、設計と言われてもあまりピンと来ないと思われるので、最初はファイルやクラスの分け方くらいに思っておけばOKです。

例えば、設計で最も有名なMVCという概念があります。ざっくりと図にすると以下のようになります。

ただし、この絵を見ただけで「なるほど理解した!」となる人は少ないかと思うので、写経の中でフォルダ構成について学んでいきましょう。

のアイコン画像

設計は奥が深くて概念も難しいので、まずはファイルをしっかり分割する!くらいの意識でOK

プロのコードの書き方

また、コードも今までは動けばOKという考え方だったかと思いますが、少しずつ「綺麗なコードとは何か?」を意識し始めるといいですね。

例えば、JavaScriptには分割代入という代入方法があります。

const house = {
  room: 3,
  bath: 1,
  toilet: 1,
};

// 書き方①
const room = house.room;
const bath = house.bath;
const toilet = house.toilet; 

// 書き方②
const { room, bath, toilet } = house;

あくまでも例ですが、書き方②の方が良い書き方であることは誰が見ても明らかなのに、書き方①で実装している人も多いのではないでしょうか。

こうした、プロの書き方を学んでいくことによって、後から自分が見ても理解しやすいコードを書くことができるのです。

のアイコン画像

オリジナルアプリは1日でできるわけじゃないから、後から見ても理解できることが大事!

中規模Webアプリの写経に最適な教材

では、具体的な教材についてお話していきます。

実践的な中規模アプリの写経に最適な教材はUdemyで講座を探してみるのがいいでしょう。RubyであればRails Tutorialもいい選択ですね。

Udemyの教材は、以下の条件で探してみるといいかと思います。

教材の検索条件
  • フレームワーク名で検索する
  • 評価が4以上の教材を選択する
  • 2年以内に作成された教材を選ぶ
  • 10時間前後の動画教材を選ぶ
  • 英語の教材も含める(質の高い教材が多いため)

例えば以下の動画などは上記の条件に合った教材かと思います。

↓Laravel (PHP)

↓React (JavaScript)

目標としてはこれらの教材を8割理解できるようになることです。

これらを写経することによって、より規模の大きなアプリケーションを作るイメージができれば完璧ですね!

のアイコン画像

8割理解できればオリジナルアプリを作るときに十分参考にできるよ!

まとめ:中規模Webアプリの作り方を知ろう!

今回は、10週間プログラミング講座の第7週目として中規模Webアプリを作るための知識について学習してきました。お疲れ様でした。

この週の学習を実践できれば、自分が作りたいWebアプリの作り方がずいぶんイメージできるようになっているはずです。

しかし、オリジナルアプリを作るためには、今週で「知った知識」を「使える知識」に変換していく作業が必要になります。

第8週目では、オリジナルアプリを自力で作るようになるための知識を深める学習方法について解説していくので、ぜひご覧ください。

【webアプリ開発】フレームワークをより深く理解するため学習ポイント

- 3ヶ月でエンジニア転職を目指そう -

  • 解決できないエラーに心が折れた
  • 転職に必要なレベルがわからない
  • 本当に今の学習で転職できるか不安

そんな悩みを持っている人に

現役エンジニアが教える3ヶ月でエンジニア転職を実現する方法

を解説しています。

コメント

コメントする

目次
閉じる