Bootstrap4でポートフォリオサイトの雛形を作ろう!CSSJavaScriptBootstrapVue.jsこんにちは、masa08です。今年ももうすぐ終わりです。「あ〜寒いな〜、寒いしVue.jsを使って何か作ってみたいなぁ」と思っていた矢先、Qiitaで以下のサイト等を読んで、急にポートフォリオサイトを作成してみようと思い、爆速で作成してみました。今回、Vue.jsとBootstrap4を使ってポートフォリオサイトを作成した結果、自分で思ったよりも早く実装することができました。今回はサイトを作る過程を解説していきたいと思います。基本的には何も知らない初心者対象にして書きますが、僕自身もVueに関しては初心者なので、何か間違い等ありましたら、指摘していただけると幸いです。SPAとは、Webアプリケーションのアーキテクチャの一つで、ブラウザによるページ遷移を行うことなく、コンテンツを切り替えることによって表示を変えるようなサイトを作成することが可能になります。完成品について完成品はこちら↓https://masa08.github.io/vue_introduction/#/制作期間は約3日間です。HTML/CSSの経験がある人であれば、思ったよりも時間をかけずに実装することができるかと思います。今回は、Vue.jsとBootstrap4を使ってSPAを用いたポートフォリオの雛形を作るところまでを解説したいと思います。それでは初めていきます。環境を整えよう!nodeとnpmをインストールまず最初にnodeをインストールしましょう。以下のサイトからダウンロードします。https://nodejs.org/ja/download/ダウンロードしたファイルを開いて、nodeをインストールします。インストールが終わったら、ターミナルで以下のコマンドを打って、nodeがインストールされているのかを確認しましょう。nodeをインストールするとnpmを一緒にインストールされるので、そちらも確認しましょう。結果がv6.4.1であれば正解vue-cliをインストール以下のコマンドを打ってvue-cliをインストールします。vue-cliは一種のフレームワークみたいなもので、これを用いることによって簡単にアプリケーションの雛形を作成することができます。vue-cli以下のコマンドを打って、実際に雛形を作成してみましょう。途中に色々と出てくると思いますが、全部Enterを押してしまって大丈夫です。portfolio以下のコマンドを打った後に、localhost:8080にアクセスしてみてください。dev以下のような画面が出てくれば正解です。これで準備が整いました!Bootstrap4をvueに導入それではBootstrap4をVueに導入したいと思います。以下のサイトを参考に進めていきます。https://bootstrap-vue.js.org/docs/まずターミナルで以下のコマンドを打って、bootstrap-vueをインストールしましょう。bootstrapそしてsrc/router/index.jsを以下のように編集します。]})importの部分でbootstrap-vueを読み込んでいます。それではBootstrapが適用されているか確認してみましょう。src/App.vueのtemplateの部分を以下のように編集します。</div></template>以下のように、青いボタンが表示されていたら、正解です!無事にBootstrap4が適用されました。以下のような手順で作業を進めていきます。src/App.vueのの部分にcomponentが挿入されるコンポーネントとは、画面に表示されている要素をまとめたもので、その中にはHTMLやCSS、データ等を要素として含むことができます。このようなコンポーネントを組み合わせることによって、Webサイトを作成していきます。試しに数ページ実装してみましょう。index.jsのimportとroutingを編集index.jsを以下のように変更します。ここでは、test1、test2、test3というコンポーネントをimportして、ルーティングの設定を行なっています。この段階では、まだコンポーネントを作成していないので、エラーが出るかと思います。実際にコンポーネントを作成していきます。以下3つのファイルを作成します。<h1>test3</h1></template>コードを書き終えたら以下のリンクにアクセスしてみてください。それぞれのページが表示されるはずです。src/App.vueのrouter-viewタグの部分にcomponentが挿入されるここは特段書くコードはないのですが、どうやって画面が表示されているかをみていきましょう。</div></template>となっています。各コンポーネントはこのファイルのrouter-viewタグの部分に埋め込まれます。App.vueに書かれたコードは、main.jsによって読み込まれ、その後、index.htmlのid=appを持つタグに内容がマウント(既存のDOM要素を、Vue.jsによって書かれたコードに置き換えること)されます。headerを作ってみよう!さて、4枚ほどページが出来上がったところで、headerを作っていきましょう。src/components下に新しくcomponentを作成します。<div>header</div></template>次に、App.vueをいじります。templateの中身とscriptの中身を、以下のように編集してください。},}</script>importの部分で、コンポーネントを読み込み、scriptタグ内で、myheaderタグを定義して、実際にHTML内でmyheaderタグを使っています。画面を見てみると、全てのページの上部に文字が表示されていることがわかります。Bootstrap4を用いてデザインを整える!ここでBootstrap4を使用します。今回は以下のサイトからコードを拝借します。Bootstrapで実現できる実装のほとんどが以下のサイトに乗っていると言っても過言ではないので、Bootstrapを使っている人はぜひ使って見てください(あまり使いすぎると勉強にならない気もしてるので注意)。https://hackerthemes.com/bootstrap-cheatsheet/それでは上記サイトからnavbarを拝借して、それを少しだけ編集して、myheader.vueに貼り付けます。</div></template>router-linkを使うことで、App.vueのrouter-viewの部分を、任意コンポーネントに切り替えることができます。aタグではなくてrouter-linkを使うことがポイントです。pagesを使えば、自分だけのポートフォリオをネットに公開することができます。pagesへの公開に関しては、ディレクトリ構成等で少し苦戦することになるとは思いますが、以下の記事を参考にすればなんとかなると思います。requestStockLike124@masa08永遠の初学者。Ruby(RoR/Sinatra)とTS/JS(React)を書いています。記事に間違い等ありましたら指摘いただけるとありがたいです。エンジニアメンバーが在籍し、0→1開発特化のプロフェッショナルが集まっています。upLoginユーザーは見つかりませんでした。