【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう!

【中級レベル/15~20時間】LaravelとVue.jsを使ってSPAアプリ開発する際に、サーバーサイドとフロントエンドの簡単な連携を学ぶ。

学習内容

  • LaravelやVue.jsなどの今時のフレームワークの環境構築を学びます
  • LaravelとVue.jsを使ったSPAのサーバーサイドとフロントエンドの簡単な連携を学びます
  • Laravel-Adminを使用した管理画面の開発を学びます
  • Herokuを使ったWebアプリケーションを公開する方法を学びます

SPAとは、Single Page Applicationの略で、単一のページでコンテンツの切り替えを行うWEBアプリケーション設計のことを指します。

単一のWebページでコンテンツ切り替えを行うことで、高速なページ遷移を実現するだけでなく、快適なユーザー体験をお届けするとともに、ブラウザの挙動に縛られないWeb表現を可能にします。


受講における必要条件

  • HTML/CSSの基礎知識
  • PHPの基礎知識
  • JavaScriptの基礎構文の理解


教材内容

本教材はPHPフレームワークのLaravelとJavaScriptフレームワークのVue.jsを使ってクイズアプリケーションを作成します。

0からクイズアプリケーション基本的な機能をステップごとに作成していきます。 本教材はLaravel, Vue.jsなどの今時のフレームワークの環境構築ができるようになること。 今時のフレームワークを使ったSPA開発ができるようになることを一番の目的としています。

実際にどういったアプリを作成するかイメージをつかむために下記のリンクにアクセスして利用してみてください。 https://laravel-vue-quiz.herokuapp.com/


この教材の対象者

  • LaravelとVue.jsを使用したSPAの実装について学びたい方
  • SPA実装する際のサーバーサイドとフロントエンドの簡単な連携が知りたい方


本教材で身に付くスキル

開発現場でもよく使われるAxiosを使ったSPAの開発〜管理画面開発まで、一般的なWebサービスを開発するために必要な機能を学ぶことができる。


学ばないこと

本教材では、HTML, CSS, Bootstrap, Sassなどの解説は詳しくしておりません。

Sassは最近のフロントエンドコーディングに必須となる知識/スキルですが、本教材では詳しい解説をしておりませんので、細かく知りたい方はご自身で調べていただくことをオススメします。


本教材で質問対応可能なOSや環境

  • Mac OS


本教材の対応バージョン

  • PHP 7.3
  • Node.js 10
  • Vue.js 2.6.10
  • Laravel 6.8


この教材を執筆した思い

LaravelとVue.jsのチュートリアルをやってみたけど、実際に組み合わせるときどうしたら良いかわからない。設定ファイルの書き方がわからない。そういった思いをしながら、仕事をして現場に出て大変苦労してきた思いがあります。 同じような苦労をされている方々のサポートをできたら良いなと思い、本教材を執筆しました。 表に出る面のサービス部分だけでなく、簡易的ではありますが管理画面を含む一般的なWebサービスの開発を一通り学ぶことができます。

本教材のカリキュラム


  2章:Vue.jsの環境構築(Vue.jsのHello World)
利用可能
日 購入してから
  5章:ホーム画面・クイズ画面のSPA化
利用可能
日 購入してから
  トラブルシューティング・開発の手助け
利用可能
日 購入してから

この教材の執筆者


M2@カルネジスト
M2@カルネジスト

個人事業主としてPHP・Laravelメインのサーバーサイドエンジニアをやっています。 主なコミット先は受託開発企業。最近になってようやくTDD始めました。直近ではPWA、TypeScriptなどフロントエンドの仕事多めです。