CSSあんま書きたくないー!画面手抜きしたい!LaravelでVuetifyを使いたい!本記事はこういった悩みに対しての記事です!この記事を書いている僕(@Shoot58153748)は、2020年3月現在メガベンチャーの社内スタートアップの部署でエンジニア(1年目)をしており、プログラミング未経験からメガベンチャーへの転職を成功させた経験・ノウハウWebエンジニアになってから学んだことをブログにまとめています。今回はLaravelでVuetifyを使う方法を紹介します!学べるポイントを以下にまとめました。設計スキルは必要ありません。素晴らしいアプリケーションを作成するために必要なものはすべて手元にあります。https://vuetifyjs.com/ja/つまり、Vuetifyはデザイン済みのボタンやフォーム、ヘッダー、テーブルなどのコンポーネントライブラリ群であり、CSS要らずで簡単に画面が作れてしまうというスーパー優れものです!正直はじめてVuetifyの存在を知ったとき、あまりの便利さに震えました。CSSがいよいよなくなるな。CSSを実装する機会は少なくて画面作るの楽したいって人やサーバーサイド側で色々試したいけど、画面も多少オシャレにしたいみたいな人にとっては最高だと思います。ポートフォリオも1日で作れるぐらい手軽です!https://shoot-portfolio.netlify.com今回は、LaravelでVuetifyを使える環境を整えた後、ログイン画面をサクッと実装します。必要なパッケージ一覧material-design-icons-iconfont@mdi/fontvuetifyアイコンやフォントなども含めてvuetifyの機能全て使うには、vuetifyだけでなく、material-design-icons-iconfontと@mdi/fontも必要です!以下のコマンドでインストールします。vuetify実装インストールしたパッケージを読み込ませてログイン画面を作成していきます。今回の制作物は以下です。※アプリの環境設定はこちらの記事を踏襲しています。Vuetify(),});インストールしたパッケージたちをインポートして、コンポーネントを登録します。./csrf.jsはLaravelの標準機能であるCSRF対策のためのファイルです。以下のようにCSRFトークンをaxiosのヘッダーに付与する処理を読み込ませています。'material-design-icons-iconfont/dist/material-design-icons.css';を読み込まないとアイコンが表示されません。vuetify2.0以降の仕様ぽいですね。後ろにdefaultをつけないとうまくいきませんでした。}</script>Laravel標準のログイン機能をそのまま使えるように作成しました。emailとpasswordをポストすれば、問題なくログインできます。画面部分はタグが多く複雑なので、コンポーネントを設計図に落としてみました。justify="center"です。画面の中央にログインフォームが表示されるようになります。v-card内にv-toolbar,v-card-text,v-card-actionを配置。それぞれタイトル、入力フォーム、ボタンの役割です。実際にポストするデータは、v-text-fieldタグでバインディングv-modelすることでユーザー入力したデータがそのまま、vueの変数に格納されます。入力した状態で、v-btnをクリックすると、@click="postLogin"でクリックイベントが発火し、axiosを用いてサーバー側にAjax通信(POST)されるという仕組みです。別途、vuetifyコンポーネントの解説記事は書こうと思ってます。devでビルドします。</body></html><body>タグのなかで作成したlogin-componentを呼び出し、idがloginであるdivタグで囲んであげます。コンポーネント=画面にしちゃってます笑ただ、そもそもvuetify自体がすでにコンポーネント化されているので、laravelで使うときはこんな感じで良いのかなと思ってます。これでログイン画面完成です!まとめ以上、Laravel×Vuetifyでログイン画面を実装しました!最後に今回のポイントと成果物をまとめます。制作物JsVueコンポーネントWebpack.mix画面(blade)サーバーサイドエンジニアにとってデザインが整った画面を手軽に早く作れるのは大きな魅力です。僕はVuetifyに出会ってから、画面はnuxt×vuetifyかlaravel×vuetifyで作ることが増えています。CSSあんま書きたくないー!画面手抜きしたい!LaravelでVuetifyを使いたい!本記事はこういった悩みに対しての記事です!この記事を書いている僕(@Shoot58153748)は、2020年3月現在メガベン...kumatetsublog.com2020.03.24もし、こんな機能を実装してほしいというリクエストがあったら連絡ください!実装して皆さんに共有したいと思います。私が独学でプログラミングを勉強していた時、おそらく最も混乱したポイントです。同じような経験をされている方、いるんじゃないだろうか?この記事を書いている私は、2...プログラミング【Laravel初心者向け講座】ページ表示までの流れを掴もう(ルーティング⇒コントローラー⇒ビュー)学べる内容:・MVCモデルとは何か・Webページを作れるようになる先日の記事で開発の準備は整ったと思いますが、今回は、どういう流れでページを表示しているかを解説しながら、実際にWebページを作ります。いった方に対して書きました!この記事を書いている私(@Shoot58153748)は、2020年2月現在メガベンチャーの社内スタートアップの部署でエンジニア(1年目)...プログラミング【実体験】未経験からWebエンジニアへの転職に必要なプログラミング学習法こんにちは、SHOOT(@Shoot58153748)です!私は、1年間の大手SIer期間を経て、Webエンジニアになりました。本記事はこんな悩みを解決します。この記事を書いている私は、2020年1月現在メガベンチャーの社内スタートアップの部署でエンジニア...プログラミングgradleでSpringBootアプリケーションをスクラッチ開発する方法こんにちは、2019年4月からWeb系で働き始めました、末っ子界No.1破天荒エンジニアのSHOOTです!今回は、gradleというビルドツールを用いて、スクラッチでWebアプリケーションを作ってみました。コメントをキャンセルメールアドレスが公開されることはありません。した大手SIerを1年で退職し、プログラミング未経験ながらWebエンジニアに転職した27歳(現在Webエンジニア2年目、既婚、フロサポ)。普段は、スタートアップの部署でWebアプリ(フロント・API)やツール開発などなんでもしてます。副業でもWebアプリ開発してます。PHP/Laravel、Vue/Nuxt、Java、Go、GCPあたり得意です。ブログでは、以下の情報を発信しています。した大手SIerを1年で退職し、プログラミング未経験ながらWebエンジニアに転職した27歳(現在Webエンジニア2年目、既婚、フロサポ)。普段は、スタートアップの部署でWebアプリ(フロント・API)やツール開発などなんでもしてます。副業でもWebアプリ開発してます。PHP/Laravel、Vue/Nuxt、Java、Go、GCPあたり得意です。ブログでは、以下の情報を発信しています。転職タイトルとURLをコピーしました。