SSTエンジニアブログスマートフォン用の表示で見るSSTエンジニアブログSSTのエンジニアによるWebセキュリティの技術を中心としたエンジニアブログです。Vue.jsはじめにこんにちは。脆弱性診断業務に携わっています、かをると申します。先日、弊社の東京オフィスではオフィスツアーが実施され、子どもたちが遊びに来てくれました。私が子どもの頃の夏休みといえば、だいたい遊び倒しで...プール、虫取り、花火大会、かき氷、スイカ、マンガ、ゲーム...そして終わらない宿題...だと思っていましたが...子どもたち「宿題やって当然。」というわけで(?)私も宿題として「LaravelでVue.jsにさわってみる」を自ら設定して、8月の土日や学習時間*1を利用してブログ執筆をしてみました。Laravel導入Laravelを利用できるまでの設定もいろいろと実施したのですが、ブログが長くなってしまうのでさらっと書きます。Boxを利用しました。Homestead上でComposerを利用しました。(プロジェクト名はLaravelにしています。)また、Homestead環境の設定ファイルHomestead.yamlにて、ホスト名をHomestead.appに設定しています*6。5.6.33、プロジェクトのディレクトリ構成と、本記事に出てくるファイルは以下のように配置しました。Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPIを提供しています。*9...ドキュメントがしっかりしているので、きっとなんとかなる😇。Mixを使うにあたり、マストなのがこの2つ。Homesteadを利用していたので、デフォルトのまま利用*10しました。Mixをインストールしました。パッケージがインストールされます。*12どういうリクエストのときに、どのビューが表示されるかの設定を行います。デフォルトのビューではなく、自分で作成したビューが表示されるように設定します。view('vuesample');});コンポーネントの作成まずはサンプルのコンポーネントを表示してみようとおもうので、特に編集せずそのまま読み込みます。mounted.」と表示してくれるものです。*13サンプルのコンポートが表示されるように、ビューを作成します。<!--vue.jsのコンポートなどをロードするので、app.jsは全てのコンポートのあとに追加する。中の"development"のスクリプトが実行され、イイカンジにしてくれます。--config=node_modules/laravel-mix/setup/webpack.config.js",アセットは以下。結果さっそくhttp://Homestead.app/にアクセスして確認してみます。HelloWorld(見辛くてごめんなさい)達成〜なんとかゴール🏁です!おわりにここまであっさり記載しましたが、自分的にじつはいろいろな沼にはまっていました。時間を特に溶かした2つを紹介します。ファイルは全アセットコンパイルのエントリポイントです。Webpackの軽い設定ラッパーだと考えてください。Mixタスクはアセットをどのようにコンパイルすべきかを正確に定義するため、チェーンでつなげます。書かれているのかな?と考えました。そこに記載はありませんでした。「こういう風に利用されています」とかブログに書きたかったのですが理解及ばず...。わかる方にぜひ教えて頂きたいです🙇コンポーネントが表示されない??本記事に記載したもの以外にも、vue.jsのコンポーネントを作成してみました。ところがエラーも出ないのになぜか描画されない...?ということがありました。こちらは「スーパーリロード」で更新して解決したのですが、地味に時間をとかしたのでここで供養します...それでは、私の夏の宿題につきあってくださり、ありがとうございました!今回の記事は私の見解に基づくものであり、所属組織を代表するものではありません。できるだけ正確に記載するよう努めましたが、至らない点ばかりかと思います。宿題ですので、どうぞみなさま赤ペン先生💯💮となって教えてください。終わらない、ひたすら書きまくった、8月最終日のブログでした🐊💭*16注釈一覧*1:SSTではスキルアップの一環として、業務時間中に興味のある内容を学習できる制度があります。*2:私は2017年に新卒としてSSTへ入社しました。新人研修の一環で「1か月半程度・自由なテーマでモノづくり」があり、私はフレームワークに触れるというテーマで初心者向けタスクリストを作成しました。MVCに分けたり、自分で機能を追加するということを実施しました。Mix*10:調べていく中で、インストール時のバージョン等によってうまく行かない場合も散見しました。詰まってしまった場合は、少し調べてみてください。installコマンドについてきちんと教えてもらいました。*12:ルーティングはLaravelの担当。ドキュメント-Routing*13:View自体はLaravelの担当。LaravelからVue.jsを使う最短レシピ*15:Readouble-アセットのコンパイルより引用*16:今回の作業用BGM。はじめまして、福岡オフィスで働いている前平です。かた勉強会に参加してきました。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。