Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Laravel+Vue.jsのアプリを再現しようとしたらBootstrap4の勉強まで出来ました。

More than 1 year has passed since last update.

LaravelとJavascriptフレームワークを組み合わせたサンプルが無いかを探していたところLaravel+Vue.jsで作れる出席管理アプリに関する記事を見つけたので再現してみようと試していました。

実際にやってみて分かったことですが、Docker-Composeで構築した自分の環境にはBootstrap4が入っていた為に必要に応じてBootstrap4用の書き方に修正する箇所がありました。

今回勉強としてアプリを作って行くことで図らずともLaravel+Vue.js、BootStrap4についても学ぶことが出来たのでまとめたいと思います。

*Bootstrap4対応が必要だったところについてまとめています。(基本的なソースは参考資料にてご参照ください。)

動作環境について

OS:macOS High Sierra
version: 10.13.4

Docker(Engine):18.03.1-ce
Compose:1.21.1

Laravel:5.6
PHP:7.1
MySQL:5.7

参考資料

Laravel + Vue.js で出席管理Webアプリを作成する – Part.3

内容

下記、Laravel+Vue.jsの環境にBootStrap4対応をしていく過程をまとめていきます。

そもそもBootstrapが読み込めていなかった

基本的な話なんですが、「bootstrap.scss」を読み込めていませんでした。
「node_modules/bootstrap/scss/bootstrap.scss」をコピーして、「/resources/assets/sass/_bootstrap.scss」を作成します。

ファイルの中身はライブラリをインポートしている為、「_bootstrap.scss」内のパスを書き換えます。全て書き換えます.
(例)

scss
@import "~bootstrap/scss/functions";

次に「app.scss」のbootstrapのimportの箇所を修正します。
(「_bootstrap.scss」が同一ディレクトリ内にある為、bootstrap直打ちで大丈夫です。)

scss
@import "bootstrap";

これでBootStrapを読み込むことが出来ました!!

bootstrap4の影響が出たところ

・「panel」クラス

⇨「card」クラスで代用しました。

参考
Bootstrap4に用意されているクラス【card編】

変更前後の対応関係は下記の通りになっています。

panel panel-default:card
panel-heading:card-header
panel-body:card-body
panel-footer:card-footer

全て右側の記述に変更したら想定通りに表示されました。
カード間の余白をつける為に少し「app.scss」も修正しました。
marginを指定して余白をつけています。(app.scss)
下記で対応

.card {
  margin: 10px auto;
}

・「navbar」クラス

参考
Bootstrap4の使い方

まず「app.scss」に書いてある「.navbar-laravel」を「.navbar」に変更します。

「navbar」クラスに関しましては本来下記の様に記載されていましたが、Bootstrap4だと反映されませんでした。
例の通りに記載を変更したところ、navbarが表示される様になりました。

navbar navbar-findcond:
collapse navbar-collapse:
nav navbar-nav navbar-right:
active:

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
  <!-- Navbar content -->
  <p>Navbar content</p>
</nav>

・「well」クラス

参考資料にある「AttendanceForm.vue」の、同じ様に「card」クラスに変更します。

<div class="well well-sm" id="attendance-form">
class="card"

さらにcardクラス内をさらに「class="card-body"」のdivタグで囲ったら想定通りのレイアウトで表示されます。

あと背景をグレーにしたかったのでクラス名に下記の通り変更しました。

class="card bg-light mb-3"

ビルドを忘れない様に。(しないと反映されません。)
npm run watch-poll

・アイコン(glyphicon)

bootstrap4と関係があるか分からないですが表示されなかったので代わりに「FontAwesome」で対応させました。

インストール
npm install font-awesome-scss --save-dev

インポートするファイルを探します。
root@834ed9a86fea:/var/www/test# ls node_modules/font-awesome-scss/css
font-awesome.css.map font-awesome.min.scss font-awesome.scss

「font-awesome.scss」をインポートさせます。

パスは下記の通りになります。
node_modules/font-awesome-scss/css/font-awesome.scss

上記パスを「app.scss」ファイルに追記する。

// FontAwesome
@import "node_modules/font-awesome-scss/css/font-awesome.scss";

クラス名「glyphicon glyphicon-user」を下記に変更します。

<span class="glyphicon glyphicon-user" id="start"></span><span class="fa fa-user" id="start"></span>

アイコンが表示されました。
同様に他のアイコンも変更させました。
fa fa-calendar
fa fa-flag

これで参考通りのアプリが出来て動かすことが出来ました!

実際にアプリを作ることによってトレンドの技術+αの勉強になりました。
ありがとうございました!!

maejima_f
PHPでWeb開発をしているエンジニアです。 自分用のメモとしてまとめています。
rosso-tokyo
渋谷にある少数精鋭のベンチャーSierです。最新技術・手法は常にキャッチアップし社内勉強会で情報共有しています。最近では外部技術セミナーも開催し情報発信の幅を広げています。
http://www.rosso-tokyo.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away