この10週間プログラミング講座では、知識ゼロのプログラミング初心者の方がプログラマーとしてのキャリアをスタートできることを目指す講座です。
第7週目の「【ゼロから作る】本格的なWebアプリの作り方を学ぶ！学習手順と注意ポイント」をまだ読んでいない方は、ぜひ先にこちらをお読みください。
先週、今までよりも規模が大きなwebアプリ開発を体験されたかと思いますが、「これまでにはない気づきがたくさん見つかった！」と感じられた方も多いのではないでしょうか。
規模が少し大きくなるだけで、Webアプリ開発の難易度はグッと上がります。
しかし、オリジナルアプリ開発に向けて必要な知識なので、今週の学習を通して少しずつでも理解を深めていきましょう！
今週の講座を終えるころには以下のことができるようになることを目指します。
- フレームワークの機能を写しながら使えるようになる
- アーキテクチャとは何かをざっくり理解する
それでは見ていきましょう！
個人Webアプリ開発でもフレームワークを使うべき理由
そもそもこれまで学んできた知識で十分オリジナルアプリを作れるし、フレームワークの学習は不要なのでは？と思われるかもしれません。
しかし、個人のWebアプリ開発でもフレームワークを使うメリットは大きく、使うべきと言えます。
その理由は以下の3つです。
- 開発期間を短くできる
- オリジナルアプリを作る際にコードを使いまわししやすい
- 情報量が多く学習コストもそれほど大きくない
開発期間を短くできる
まず、1つ目の理由として開発期間を短くできることが挙げられます。
フレームワークを使えば基本的なアプリケーション開発で実装する機能を簡単にしてくれる仕組みが整っています。
例えば、PHPのフレームワークであるLaravelを例に挙げると
- ログインなどの認証を行う機能
- DB操作を簡単に行えるORM
- テストデータを簡単に行えるマイグレーション
- 外部メールサービスやslackとの連動
など、他にも数多くの機能が存在します。
これらの機能を利用することによって、フレームワークを使わずに開発をするよりも高速でWebアプリ開発を行えるのです。
今後オリジナルアプリを作る際に使いまわししやすい
また、フレームワークを使って開発をすると、他のアプリ開発で同じような機能を実装する際に使いまわしが簡単です。
なぜなら、フレームワークは最初から標準機能が揃っているため、少し自分で拡張しても十分に使いまわせる設計を組みやすいのです。
ただ、最初から使いまわしすることを考えると難しいかと思うので、他の人がどんなコードを書くのか写経する中で見ていくようにしましょう！
フレームワークを使って何回かアプリ開発をすると使いまわししやすいコードが見えてくるよ！
情報量が多く学習コストもそれほど大きくない
また、流行りのフレームワークはどれも日本語のドキュメントが豊富なことが多く、最低限の導入であれば学習コストもそれほど大きくありません。
例えば、Laravelの公式ドキュメントを見てみましょう。
このように実際のコードを参考にしながら学習を進めることができるので、「これってどうやればいいの？」と疑問に思った際も詰まりにくいです。
どのフレームワークを学ぼうか？と考えたときに、日本語の公式ドキュメントが丁寧かどうか？を判断の基準にするのもありかもしれませんね。
フレームワークの理解を深める具体的な学習方法
では、フレームワークをより深く理解する具体的な学習内容についてお話します。
具体的な学習内容は10週間プログラミング講座の先週の講座で解説した内容と同じです。
既に内容を知っている方は、今週の学習でフレームワークをより深く理解する着目ポイントまで記事をスキップしてください。
学習内容は以下の条件でUdemyで講座を探してみましょう。（Ruby学習者はRails Tutorialでもいいかと思います）
- フレームワーク名で検索する
- 評価が4以上の教材を選択する
- 2年以内に作成された教材を選ぶ
- 10時間前後の動画教材を選ぶ
- 英語の教材も含める（質の高い教材が多いため）
以下の講座などは条件に合った教材といえるかと思います。
↓Laravel (PHP)
Laravelの基礎やフレームワークについての知識だけでなく、検索フォームといった機能をLaravelで実装する方法なども紹介されています。
簡単なWebアプリの作り方も紹介されているので、フレームワークを使った開発を一通り学習できます。
↓Vue.js (JavaScript)
この動画では、Vue.jsやフロントエンドエンジニアとして必要な以下の知識を網羅してくれています。
動画は17.5時間と少し長いですが、それだけ学習できることも非常に多いです。
もし、自分でアプリケーションを作りたい！と考える人は、この動画の内容を写経した上でオリジナルで作るのが最短コースと言えるでしょう。
これらの教材を以下の着目ポイントを踏まえながら、理解を進めるとかなりオリジナルアプリの開発イメージが湧きやすくなるかと思います。
フレームワークの理解を深めるWebアプリ制作の着目ポイント
では、フレームワークの理解を深めるためのポイントについて解説していきます。
フレームワークをより便利に扱うために、理解したいポイントは以下の3つです。
- Level 1：フレームワークのファイル構成と役割
- Level 2：言語とフレームワークの関数の違い
- Level 3：フレームワークが出力するコードについて
Level 1：フレームワークのファイル構成と役割
まず、フレームワークを知る上で欠かせないのが、それぞれのファイル構成とその役割を理解することでしょう。
例えば、Laravelのフレームワークを見ていきましょう。
ざっと見てみると、上記のようなディレクトリ構成になっていますが、
- app => ユーザーからのアクセスに対する処理を書く
- bootstrap => Laravelの初期設定
- config => 様々な定数などの設定ファイル
- database => データベース設定に関するファイル
etc…
といったように、「どのディレクトリで何をするか？」が決まっています。
最初から全て覚える必要はないので、今自分が実装したい機能はどこにコードを書けばいいのか？を調べながら進めていきましょう。
Level 2：言語とフレームワークの関数の違い
続いて気にしなければならない点として「言語」と「フレームワーク」の関数を分ける必要があることです。
例えば、LaravelとPHPを例にして、新しくインスタンスを作るコードについて考えてみます。
↓Laravel
$test = $this->app()->make('\Test');↓PHP
$test = new Test();これらはそれぞれ同じ操作を表しますが、実務未経験の人によくある例として上の2つがコードの中で入り交じることがあります。
class CreateInstance() {
function makeInstance() {
$test = $this->app()->make('\Test'); // ①
...
}
function testInstance() {
$test = new Test(); // ①と内容は同じ
...
}
}このようにフレームワークと言語の書き方を意識せずに実装しているとコードの統一性がなくなることが多いです。
そうすると、間違えたコードを書いてバグが発生した際に原因が追いづらくなってしまうというわけなのです。
このあたりも「今自分が書いているコードはフレームワークなしでも動作するか？」を考えながら書くようにするといいでしょう。
エラーが発生した際に原因を見つける力を身に着けよう！
Level 3：フレームワークが出力するコードについて
また、Level 2の内容と似ていますが、フレームワークが最終的に出力するコードを知っておくことは非常に重要です。
例えば、HTMLを書くときもLaravelであれば .bladeファイル、Railsであれば .erbファイルといったファイルを使用します。
これらのファイルも最後に出力されるHTMLを見ないと、CSSで「思ったようにレイアウトが整えられない！」ケースがありえます。
したがって、最終的にフレームワークがどんなコードを出力するのか？を意識しながら学習を進められると、より成長速度を上げられるでしょう。
地味な作業に感じるかもしれないけど、こうした地味な作業こそスキルアップするよ！
まとめ｜フレームワークを理解してアプリ開発を加速させよう！
今回は、10週間プログラミング講座の第8週目としてフレームワークをより深く理解するポイントについて解説してきました。
この週の学習が終われば、かなりフレームワークでアプリ開発をするイメージがついているかと思います。
いよいよ10週間講座も残り2週となりましたが、いよいよ残りの2週はオリジナルアプリ開発を進めていきます。
第9週目では、オリジナルアプリ開発を始めるにあたって、気をつけるべきポイントについて解説していくので、ぜひご覧ください。
