カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-3

ソースコードを修正してみよう

ソースコードを修正してみよう

本パートの目標物

本パートではデフォルトのトップページを変更して以下のようなページを実装します。

Image from Gyazo

ソースコードを修正する

プロジェクトの雛形の作成が完了しましたので、実際にコードを修正します。Vue.jsのプロジェクト内のフォルダ構成は下記画像のようになっています。今回修正するのは、srcディレクトリ以下となります。

Image from Gyazo

では、ポートフォリオページ内で使用するアイコン画像を、srcディレクトリ内に、「icon_image.png」という名前で保存してください。(ファイル名、拡張子は変更しないでください)

以降のターミナルで実行するコマンドはすべて、「portfolio-deploy-automation」リポジトリ内直下で実行する想定です。cdコマンド等でリポジトリ内に移動をお願いします。

Copied!
# icon_image.pngファイルが作成されているか確認 # icon_image.pngが出力されていれば、問題ありません $ ls -1 src/ | grep icon_image.png icon_image.png

次に、src/App.vueファイルを修正します。
下記コードすべてををsrc/App.vue内に上書きしてください。(既存のコードが消えても問題ありません)

Copied!
src/App.vue
Copied!
<template> <v-app> <v-container> <v-row no-gutters > <v-col> <div class="display-1 pl-3 pt-3 pb-3 port-title">マイポートフォリオ</div> </v-col> </v-row> <v-row no-gutters > <v-col class="col-4"> <v-container fluid=""> <v-row justify="center"> <v-img :src="require('@/icon_image.png')" max-width="250"> </v-img> </v-row> <v-row justify="center"> <p class="display-1 mt-4">XX_ここに名前を入力します</p> </v-row> <v-row class=""> <v-col class="col-2"> </v-col> <v-col> <p class="title">Twitter</p> </v-col> <v-col justify-self="center"> <v-btn href="https://twitter.com/?lang=ja" target="_blank" text> <v-icon color="#55acee" x-large>mdi-twitter</v-icon> </v-btn> </v-col> </v-row> <v-row> <v-col class="col-2"> </v-col> <v-col> <p class="title">Facebook</p> </v-col> <v-col> <v-btn href="https://www.facebook.com/" target="_blank" text> <v-icon color="#3b5998" x-large>mdi-facebook</v-icon> </v-btn> </v-col> </v-row> <v-row> <v-col class="col-2"> </v-col> <v-col> <p class="title">GitHub</p> </v-col> <v-col> <v-btn href="https://github.com/" target="_blank" text> <v-icon color="black" x-large>mdi-github</v-icon> </v-btn> </v-col> </v-row> </v-container> </v-col> <v-col> <v-row> <v-col class="col-1 d-flex"> <v-container fluid="" class="pa-0"> <v-row no-gutters justify="center" > <div class="border"></div> </v-row> </v-container> </v-col> <v-col> <v-row no-gutters class="pb-8" > <v-col class="col-11"> <v-card class="pt-4 pb-1 pr-4 pl-4" outlined tile color="#cfe2f3" > <p class="title">自己紹介</p> <p> XX_ここに自己紹介文を入力します </p> </v-card> </v-col> </v-row> <v-row no-gutters class="pb-8" > <v-col class="col-11"> <v-card class="pt-4 pb-1 pr-4 pl-4" outlined tile color="#ead1dc" > <p class="title mb-0">興味のある技術</p> <v-list class="transparent"> <v-list-item class=""> <v-list-item-icon> <v-icon color="#43a047">mdi-checkbox-marked</v-icon> </v-list-item-icon> <v-list-item-content> XX_ここに興味のある技術を入力します </v-list-item-content> </v-list-item> <v-list-item class="my-n4"> <v-list-item-icon> <v-icon color="#43a047">mdi-checkbox-marked</v-icon> </v-list-item-icon> <v-list-item-content> XX_ここに興味のある技術を入力します </v-list-item-content> </v-list-item> <v-list-item class=""> <v-list-item-icon> <v-icon color="#43a047">mdi-checkbox-marked</v-icon> </v-list-item-icon> <v-list-item-content> XX_ここに興味のある技術を入力します </v-list-item-content> </v-list-item> </v-list> </v-card> </v-col> </v-row> <v-row no-gutters > <v-col class="col-11"> <v-card class="pt-4 pb-1 pr-4 pl-4" outlined tile color="#f5e4bf" > <p class="title">好きな言葉</p> <p> XX_ここに好きな言葉を入力します </p> </v-card> </v-col> </v-row> </v-col> </v-row> </v-col> </v-row> </v-container> </v-app> </template> <style scoped> #app { background: #e8e8e8; } .border{ background-color: #585858; width: 1px; height:80vh; } .port-title { border-left: solid 10px #4a86e8; border-top: solid 3px #4a86e8; border-bottom: solid 3px #4a86e8; border-right: solid 3px #4a86e8; } </style> <script> // import HelloWorld from './components/HelloWorld'; export default { name: 'App', components: { // HelloWorld, }, data: () => ({ alignments: [ 'start', 'center', 'end', ], }), }; </script>

上記のソースコードについて少し解説を行います。
.vueファイルは下記の3つのセクションで構成されています。

  • templateセクション
  • styleセクション
  • scriptセクション

templateセクションには、ページのメインの要素となるHTMLを記述します。今回はVue.js独自の記法を多用しているため、一見するとHTMLであるとわかりにくくなっていますが、Pタグなどが含まれていることが確認できるかと思います。

styleセクションにはtemplateセクションで定義したHTMLに適用するCSSを記述します。

最後のscriptセクションにはページで動作させたいJavascriptのコードを記述します。今回はベースのテンプレートを最小限に変更した内容となっておりますので、data属性にalignmentsを定義していますが、実際には使用しておりません。本来はdata属性の部分に、templateセクションで使いたい変数を定義する必要があります。

では、一度このタイミングで、一度ブラウザのページを確認しましょう。
下記コマンドを実行してローカルのサーバーを起動させます。
(既に下記コマンドが実行中の場合は、再度実行する必要はありません)

Copied!
# ローカルサーバーを起動する $ yarn serve

http://localhost:8080/」にブラウザでアクセスします。
下記画像のようなページが表示されるかと思います。
(アイコン画像は指定した画像が表示されているはずですので、下記画像とは異なります。)

Image from Gyazo

src/App.vue内の下記項目を各自の好きな内容に変更します。

  • XX_ここに名前を入力します
  • XX_ここに自己紹介文を入力します
  • XX_ここに興味のある技術を入力します
  • XX_ここに好きな言葉を入力します

src/App.vueファイルを保存してください。その後、「http://localhost:8080/」にブラウザでアクセスします。ページの内容が、修正した内容に反映されていることを確認してください。
(ページが変更されない場合は、yarn seveコマンドが実行中である必要がありますので、実行中であるかをご確認ください)

最後に、修正した内容をGitHubにプッシュします。
「portfolio-deploy-automation」リポジトリ内にいることを確認後、下記コマンドを実行してください。

Copied!
$ git add . $ git commit -m 'ポートフォリオの内容を追加' $ git push origin master

ウェブブラウザのGitHub内の自分の作成したリポジトリ内に、自分が作成したコードが表示されていることを確認ください。

Image from Gyazo

以上で、コードの修正は完了です。
お疲れさまでした。

現在のパート (0)
全パート (4)
みんなで助け合おう!
現在のパートのディスカッション 全0件