みなさん、こんにちは！

今日は、3月の記事を公開します！

今回は、LaravelとVue.jsのウェブアプリケーション開発入門コースについて、共有したいと思います。

 

背景

最近は、川島のITスキルサロンが順調に運営しております。

 

それに合わせて、「川島のガッツリプログラミング伴走コース」も作っています。

詳細はこちら

川島のガッツリプログラミング伴走コース

 

川島のガッツリプログラミング伴走コースでは、以下の三つのコースを私のリソースを集中的に投下して、長期に作って丁寧に仕上げて、育てていきたいと思っています。

❶Python,機械学習・深層学習入門コース

• https://github.com/kawashimaken/salon/blob/master/ai_lesson.md
• Python, Django, Flask, TensorFlow, PyTorch

❷ウェブアプリケーション入門コース

• https://github.com/kawashimaken/docker-vue-laravel
• PHP, mySQL/mariadb, Laravel,redis
• HTML, CSS, jQuery, Vue.js, React.js,ウェブ
• Docker, AWS, GCPなど

❸スマホアプリ開発入門コース

• React Nativeスマホアプリ開発(iOS/Android)
• JavaScript, Node.js, Express.js, MongoDB, React.js

一番目の「Python,機械学習・深層学習入門コース」はすでに、開講しております。

三番目は、今まですごい数で、タイムチケットで累計２３回開催しました。最近がストアカで2件開講しています。

 

• https://www.street-academy.com/myclass/48296
• https://www.timeticket.jp/items/32428

ここで、ご紹介するのは、２番目のウェブアプリケーション開発入門です。使っているフレームワークはPHPのLaravelです。

これで、川島のEduTechの三つの柱がついに完成！笑

一つだけ言えるのは、たくさんの技術をチャレンジしていきますが、当面はこの三つにコミットしていきたいと思います。

 

Laravelにした理由

ウェブアプリケーションの開発というと、たくさんの選択肢があります。

Ruby： Ruby On Rails

PHP：CakePHP, Symfony, Laravel, etc.

Python：Django, Flask, Bottle. etc

JavaScript：node.js+express.js, etc.

Go：Gin, Beego, etc.

本当に、このリストが無限にあるぐらいにあります。

その中で、どうして、 Laravelにしたのか？

理由は下です。

1. 私が、これから大規模ビデオ配信サービスのAPI刷新案件を担当することになり、Laravelのノウハウが溜まるからです。
2. PHPはウェブのための言語で、今まで長い歴史をもち、その中Laravelは非常に優秀なウェブアプリケーションフレームワークで、海外ではほぼ定番になっています。日本も浸透し始まっています。これからはLaravelのシェアが上がるのではともくろんでいます。
3. GitHubでも圧倒的人気です。ということは、Laravelは開発者にも愛されていると言えます。
4. GolangやJavaScriptのフレームワークを味見して、最先端を体験するのも何も悪くないし、むしろ積極的にやってほしいですが、少し職業、キャリアのことを考えるとやはりある程度安定感、と未来の市場での採用率を意識すれば、Laravelがリーズナブルな結果になるはずです。

上記の理由で私のガッツリコースの三つの柱の一つはLaravelにしたいと考えている次第です。

もちろん、他のウェブアプリケーションフレームが劣っているというわけではありません。個人の趣味もあれば、ガッツリプロダクションで動いている他のフレームワークもあって、それぞれしっかり存在感を確立しているでしょう。そこは選択の自由です。

私のコースではLaravelを選んだだけです。また、私も時間が許す限り、他のフレームワークの研究したり遊んだりする予定です。

どんな領域でも、多様性がいいことです。

 

Vue.jsを選んだ理由

続いて、フロントエンド、Vue.jsを選んだ理由ですが、下記となります。

1. 私がVue.jsをやりたかったです。私が、Angular.jsでガッツリアプリケーションを量産したことがあります。ReactもReact Nativeでガッツリ思い存分使ったことがありますが、Vue.jsはまだ大規模なアプリケーションを書いたことがないです、経験を摘みたいのと、Vue.jsの使いやすいという噂を一回はっきりさせたいです。そうしたら三大 JavaScriptフロントエンドフレームワーク制覇って格好良くないですか？
2. 例のプロジェクト もVue.jsを採用したからです。
3. Vue.jsがLaravelと相性がいいそうです。Vue.jsが指定されてはいないですが、公式にLaravelと一緒に使われることは想定しています。
4. 学習コストの低さです。私がすでにAngularとReact.jsの経験があって、おそらくすぐにVue.jsを操ることができると思いますが、そうじゃない人でも、Vue.jsはAngularとReact.jsと比べて、簡単だと思います。

どこが簡単なのかは、またこのシリーズの中で書いていきたいと思います！

 

これからの予定

これから、このウェブアプリケーション開発入門コースのみならず、他のコースも並行してこのマガジンでどんどん公開していきたいと思います。

上記の三つの内容に興味のある方はぜひ「川島のITスキルサロン」の入会をご検討ください。

https://note.com/kawashimaken/m/me13f2d6e0ab8

LaravelとVue.jsのウェブアプリケーション開発入門コースは

「Laravel+Vue.js黄金入門コース」の名前で、これからシリーズ化していきたいと思います。コードもGitHubに公開していきます。

ガッツリ指導してほしい人は、ガッツリ伴走コースの購入をぜひご検討ください。

川島のガッツリプログラミング伴走コース

今回は、宣伝だけではなく

第一回目の環境構築についてもこれから書いていきたいともいます！

 

第一回目：Docker＋ Lavarel＋Vue.jsの開発環境構築

プログラミングを勉強している人なら

ほぼ全員共通で

「環境構築だるい！」「面倒くさい！」「心が折れた」などの感想を抱いていると思います！笑

私も初心者の時は、挫折しまくっていました！

そうですよね、環境構築はプログラミング初心者にとって、鬼門ですね！

ここで挫折したら、一気にプログラミングを勉強する熱量が下がりますね。

逆に、ここでなんとかして環境構築ができれば、「できない」から「できる」になるまでは、全部ノウハウです！

理屈は分かりますが、どうしても、その最初の熱量を無くして欲しくないです。

そこで、私はLaravel＋Vue.jsの開発を行う環境を用意しました。

忙しい人は、これをみてください。

https://github.com/kawashimaken/docker-vue-laravel

 

Dockerの導入

ここで、Dockerが登場します。

Dockerはおそらく今はもう聞いたことがないことはないと思います。Dockerはコンテナ技術で、あなたのOSの上で、コンテナ（軽量のヴァーチャルマシンのようなもの）を作ることによって、そのコンテナの「中」に必要なパッケージ、ソフトウェア、ライブラリーなどをインストールして、「環境」を用意します。

Dockerのメリットは、HostマシンのOSを完全に無視することができます。

例えば、あなたがWindowsを使っても、MacOSを使っても、Linuxを使っても、環境はそれぞれ、Windows, MacOS,Linuxに直接に構築するのではなく、どれも、OSの「上」にあるコンテナにインストールしているので、あなたのPCに「インストール」していないから、あなたの環境に「汚染」することがありません。

消すときも綺麗さっぱり消すことができますし、いくらでも類似のプロジェクトお互いに環境の干渉がなく、用意することができます。素敵でしょう！笑。

私は、今、可能な限り、全てのプロジェクトをDockerベースで開発環境を用意するようにしています。

そうすると、開発者動詞には、共有するのはソースコードだけではなく、「環境」もほぼ１００％共有することができます。

環境構築コスト、環境に関する作業の効率も上がり、無駄な時間はもうかかりません。

以前、 Laradockというのがありました。

私も、Laradockを使ってLaravelの開発環境を構築する手順を丁寧に書きました。

初めてでも確実に動くLaradockの起動までの手順(更新版)

しかし、正直私も戸惑うことがありました。流石に、初心者にとっては、ちょっと敷居が高いかもしれません。問題発生した場合は、ほぼ自力で解決ができないかもしれません。

今は、なるべく、考えずに、一発で起動できる環境の構築方法がないかと考えて、試行錯誤で、ここにたどり着きました。

https://github.com/kawashimaken/docker-vue-laravel

 

ここで、軽く、上のGitHub　リポジトリを説明します。

まず、rootに下記のフォルダとファイルがあります。

・docker：docker-compose 用の各種Dockerfile、設定です。dockerを使った環境構築の関連ファイルが格納されています。ここは基本何もしなくて良いです。

・project：Laravelプロジェクトのフォルダです。環境構築が完了したら、このフォルダが作業のフォルダとなります。昨日追加に連れて、Laravelのファイルを追加したりしていきます。

・README.md 説明

起動の方法

git clone https://github.com/kawashimaken/docker-vue-laravel.git

cd docker-vue-laravel

cd docker

docker-compose build

docker-compose up -d

docker-compose exec php bash

npm install

composer install

php artisan migrate

npm run dev

 

次、下記のurlをブラウザで開きます！　http://localhost/

今は、画面がこうなっています。（コースの開発も進んでいますので、これが変更する可能性があります。）

どうでしょうか！うまくできましたでしょうか！

 

Vue.jsの仲間

これから、フロントエンドはVue.jsを使っていきますが、Vueの仲間もいくつか必要です。

・VueX

参考：

https://vuex.vuejs.org/ja/

 

VueXはアプリケーションのための 状態管理パターン + ライブラリです。コンポーネント間のバケツリレーを無くします。

アプリケーション全体一元に状態を管理して、必要なデータがどこでも自由に、安全に、他に影響なく、使えるようになります。アプリケーションの規模が大きくなっても、混乱を発生しにく仕組みです。

Reactでいう、Reduxのような仕組みです。

https://redux.js.org/

・Vue Router

参考：

https://router.vuejs.org/ja/

Vue Router は Vue.js 公式ルータです。SPA（シングルページアプリケーション）の画面遷移を制御するライブラリーです。細かいナビゲーションの制御管理がこれで、簡単にできます。

Reactでいう、React Routerのようなものです：

https://reacttraining.com/react-router/web/guides/quick-start

VueXとVue Routerはほぼ定番なので、これで行きます。

次回の予定

次回は、Laravel側で、簡単なAPIを作る手順とVue.js側で、簡単なコンポーネントの作成と、APIのデータを取得、表示する方法をレクチャします。

では、また次回お会いしましょう！

ガッツリサポートが必要な方は、ぜひご検討ください！

川島のガッツリプログラミング伴走コース