webpack先日、Webpackを使用してVue.jsのSPA環境を構築し、実際にHelloWorld画面を表示する方法(下記記事参照)を紹介しましたが、今回は前回に続き、そのHelloWorldを実際に編集してみたいと思います。関連記事Webpackを使ってVue.jsのSPA環境を簡単に構築をするどうも、こんにちわ。気づけば2019年もあっという間に3月ですね。この間年が開けたような気もするのですが。まとめ環境なお、今回の環境は以下の通りとなります。sampleなお、先日の記事で、Webpackをインストールして下の画面を表示するまでの過程を説明したので、そこまで環境が構築されているものとして話しを進めていきます。環境構築していない人は前回の記事を参照してください。ディレクトリ構造では、まず今回使用するWebpack(Vue.js)の構造を簡単に確認します。sampleディレクトリを開くと色々なディレクトリやファイルがあるかと思います。それぞれの詳細は割愛しますが、プロジェクトの根幹、基礎となるファイル類は「config」、ビルド関連のファイルは「build」、各モジュールは「node_modules」といった感じでそれぞれ役割に応じたディレクトリ構成に分かれています。今回編集するファイルこういったフレームワークの場合、実際に編集していくファイルは限られているのですが、今回も編集するのは下記ファイルのみになります。編集するファイル/sample/src/components/HelloWorld.vue/sample/src/router/index.jsそれぞれ全て「src」というディレクトリ内に格納されているファイルですが、Webpackにおけるコンテンツ作成は基本的に新規作成を含め編集はほぼこの「src」ディレクトリ内で作業していきます。今回編集するファイルが格納されている「components」と「router」ディレクトリに関して簡単に説明します。componentsディレクトリcomponentsディレクトリには、実際にHTMLやcss、jsを記述するコンテンツファイル(vue)を格納していきます。「HelloWorld.vue」というファイルが生成されていると思います。このファイルに記述されている内容が上の画像の内容になります。内容をみてみればHTML、css、jsが記述されているかと思います。命名規則としてはアッパーキャメルケースになるので、そこだけ気をつけてください。routerディレクトリrouterディレクトリにも既に「index.js」というファイルが生成されていると思いますが、このファイルがプロジェクト全体のルーティングの制御を行なっています。このファイルにコンポーネントをインポートして命名したり、パス(URL)を設定したりします。簡単に言うと、作成したコンテンツファイルはcomponentsディレクトリに格納して、ルーティングはrouterディレクトリのindex.jsで制御するという感じです。開発環境を起動とりあえず、簡単にディレクトリ構造を確認したところで開発環境を起動していきましょう。下記コマンドを実行します。dev起動したら「http://localhost:8080」にアクセスします。アクセスしたら冒頭の画像の内容が表示されると思います。ルーティングを確認する今、アクセスしているのはルートになるのですが、そのルーティング設定は上で説明したように「/sample/src/router/index.js」ファイルで制御されています。このファイルを開いてみましょう。HelloWorld}]})色々記述されていますが、ポイントは3行目と10〜12行目になります。3行目でHelloWorldコンポーネントをインポートして、10〜12行目でパス(URL)と名前、コンポーネントをそれぞれ指定しています。簡単にまとめると「http://localhost:8080/(ルート)」に「/sample/src/components/HelloWorld.vue」ファイルを表示しますよと制御しているわけですね。HelloWorldを編集するでは、実際にHelloWorldを編集していきたいと思います。ルーティングファイルを編集まず、今開いている「/sample/src/router/index.js」ファイルを下記のように「HelloWorld」から「Home」という名前に変更してみましょう。ここを編集}]})変更して保存します。found」エラーが表示されると思いますが、ひとまず無視して「/sample/src/components/HelloWorld.vue」ファイルを「Home.vue」という名前に変更します。これでエラーは消えると思います。ファイル名を変更したら、実際に開いて下記のように編集して保存します。48px;}</style>そうすると、これまで表示されていた内容が下の画像のように変更されると思います。問題なくHelloWorldを編集できましたね。まとめということで、今回はWebpack環境のVue.jsの構造を簡単に把握するためにHelloWorldを編集してみました。簡単で何も難しいことはありませんが、これでWebpack環境のコンポーネントとルーティングの感覚がなんとなく掴めるのではないかと思います。次回は、新たにコンポーネントを作成し画面遷移までする方法を紹介したいと思います。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!noteinstagram詳しく見るプログラミングの記事一覧へ他のブログも見る人気記事2018.01.09FITNESS【ダイエット】確実に痩せたいなら、まずやるべきこと8選。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。nori-life.com。