バックエンド

【Laravel】フロントエンドをわかりやすくまとめてみた【初心者向け】

初心者向けに『Laravel』解説の追加動画を撮影中で、

これは公開してもいいかなと思ったので無料公開することにしました。

動画はこちら。

動画を見ていただきつつ、補足解説をしていきたいと思います。

Sponsored link

Laravel フロントエンドの分離

『Laravel』 5.8までは、
Bootstrapが内蔵されていたのですが、

『Laravel』6.xからフロント側が分離されて、

『Laravel-ui』というパッケージに変わりました。

インストール方法は『composer』を使って、

// Laravel最新
composer require laravel/ui --dev

// Laravel 6.x
composer require laravel/ui "1.x" --dev

としてあげるとインストールすることができます。

『Laravel/ui』には大きく3つの選択肢があります。

  • Bootstrap
  • Vue
  • React

プログラミング初心者の場合はまずは『Bootstrap』がいいかなと思います。

Bootstrapの関連記事

最近勢いが増している『SPA』を作る場合は、『Vue/React』どちらかになるかなと。

SPA・・シングルページアプリケーション

また、いずれかをインストールするときに、–authとオプションをつけることで、
認証機能も同時にインストールすることができます。

php artisan ui bootstrap --auth 
アオキ
ログイン機能があっさりつくれちゃう・・なんて便利な機能なんでしょう。

Laravel フロントエンド 3つの必須ツール

動画の中で3つの必須ツールを紹介しています。

  • Node.js/npm
  • webpack
  • babel

他にもたんまりあるんですが、まずは3つを押さえておくといいかなと。

フロントエンドが進化しすぎてブラウザ表示ができない場合があるので、

新しい書き方 -> 古い書き方 にコンパイルして(babel)、

たくさんのファイル -> 一つのファイル にがっちゃんこ(webpack)して、

それらを1つの管理ツール(npm)でまとめちゃうことで、

作り手としてもつくりやすく、
使い手としても読み込み時間が短くストレスフリーになるという、

ウィンウィンな環境にはなります。

とりあえず『Node.js』をインストールしておもむろに、

npm install
npm run dev

という魔法のコマンドを打つことで、

あれよあれよとフロント側のパッケージがどーんとインストールされて、
いろいろとよしなにやってくれるというのが体感できるのではと思います。

アオキ
最近のフロント側の開発では必須と言ってもいいと思います。
Sponsored link

Laravel フロントエンド 認証の補足

『PHP/Laravel』初心者向け動画でもご説明しているのですが、

『Laravel』標準の認証機能だと、1つの管理画面しか作成されないのですが、

ファイルをいくつかつくったり、いじったりすることで、

使う側と管理側それぞれに管理画面を持たせることもできたりします。

『マルチログイン』と呼ばれたりもして、
過去にリサーチしていた記事もあるのでご紹介しておきます。

関連記事

最近流行りの『SPA』をつくるなら、
この辺りの機能も『フロント側』でつくることになるかなと思うのですが、

『SPA』はまだ『SEO』が弱いという情報もあったりするし、
管理画面でいえば『SPA』化させる必要はないのかなと思ったりもするので、

引き続き、
『Laravel』のフロント側パッケージ『Blade(ブレード)』の出番も多いのかなと思っています。

アオキ
もちろんつくるアプリ次第にはなってくると思います。

Laravel フロントエンド を解説してみて

『フロントエンド』は進化が激しく、
来年にはまだ状況が変わっているかもですが、

昨今の環境をできるだけわかりやすく解説することで、

少しでも『Laravel』にとっつきやすくなって、

自在に『webアプリ』がつくれるようになる人が増えればいいなと思っています。

アオキ
軽めのwebアプリならつくれるようになるところまで解説していきたいと思い、がっつり動画の追加撮影を頑張っております。

関連記事

アオキ
Youtubeでもどんどん情報発信していきますので、ぜひチャンネル登録お願いしますm(_ _ )m

Youtubeもんプロチャンネル

『Laravel』ではこんな記事も読まれています。

1. 【Laravel】マルチログイン対応ECサイトの講座をリリースしました【Udemy】

2. 【PHP/Laravel】初心者向けの動画をリリースしました【Udemy】

3. 【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【techpit】

4. 『Carbon』でよく使うパターンをまとめてみた【Laravel向け】

5. 【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【用語集も兼ねて】【初心者向け】

6. 【Laravel】フロントエンドをわかりやすくまとめてみた【初心者向け】

7. 【PHP】【Laravel】CSVエクスポートの方法〜5つのポイント〜

8. 【PHP】CSVインポートの方法〜大量データもバルクインサートでバッチリ!〜【laravel】

9. 【Laravel】ダミー(テスト)データを作る方法 シーダー(seeder)とfactoryとfaker【初心者向け】

10. 【Laravel】Webアプリ環境構築の仕方【Vue.js】【初心者向け】

11. 【Laravel】と【Vue.js】のサンプル動画を見ながらさらりと解説してみる

12. 【Laravel】マルチログイン(ユーザーと管理者など)機能を設定してみた【体験談】

13. 【Laravel】フォトギャラリーを作るための画像アップロード方法【php】

14. 【Laravel】多対多テーブルを複数つくる方法【ちょっとコツがいります】

15. 【Laravel】【Slack】に通知する方法をまとめてみた【自作ファサード】


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  2. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  3. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  4. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  5. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
100% Free SEO Tools - Tool Kits PRO