Vue.jsでレスポンシブ な Webアプ リを作ろう

こんにちは! 私はグウェン([https://twitter.com/gwenskiesHere](https://twitter.com/gwenskiesHere))です。今年には新しい技術を勉強するつもりですから、Vue.jsを勉強しました。今日、Vue.jsでモバイルレスポンシブなWebアプリについて説明したいです。わかりやすくするために、サンプルウェブアプリを作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/300937/319799bf-4db4-cfd7-3d7a-7712e7acc198.png)


## レスポンシブなWebアプリ
今、色々なスマートデバイスがあります。スマートデバイスはパソコンのサイスやスマートフォンのサイスが様々なあります。必要な情報が見えらなければならなって、それでもまだ良いインタフェースで提示されなければなりないので、ウェブページのインターフェースは色々なスマートデバイスに滑脱できなければなりません。


## サンプルウェブアプリ
![Untitled presentation (2).png](https://qiita-image-store.s3.amazonaws.com/0/300937/175ac308-8e4f-9ef5-f23e-6f12e96834c0.png)


今日、これのサンプルなWebレイアウトを作ります。上部はナビゲーションバーです。ナビゲーションにはロゴとウェブのメーニュを見えます。次はWebページの本文です。Webページの本文にすべての情報があります。

![Untitled presentation.png](https://qiita-image-store.s3.amazonaws.com/0/300937/cc93b8d3-e5cd-8427-a227-eee4a584ef44.png)

ウェブページはスマートフォンに開いたとき、上のイメージのようになります。

そのサンプルウェブページの内容には自分のポートフォリオを書かなければなりません。

## 必要なツール
このサンプルなウェブページのために、以下のツールを使用します。

- [Vue.js](https://vuejs.org/) - javascriptのフレームワークです。
- [Vuetify](https://vuetifyjs.com/en/) - Vue.jsのライブラリーです。

## セットアップ
```bash:setup
# vueプロジェクトを作成します
vue create sample-responsive-web
cd sample-responsive-web

# vuetifyのライブラリーを追加します。
vue add vuetify

# アプリをスタートします
npm run serve
```
もし既成のプロジェクトがあったら、セットアップはこの[リンク](https://vuetifyjs.com/en/getting-started/quick-start)をチェックしてください。
アプリをスタートする時、ウェブページは下のイメージのようになります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/300937/358648a2-5d02-f962-125e-e96fe3d16176.png)

## レスポンシブなウェブアプリを作ろう
まず、ヘッダにはポートフォリオをアピールするイメージを入れます。次は自己紹介のために、自分の写真を入れて、自己紹介を書いてください。全部センターを揃えます。アウトプットは下のイメージのようになります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/300937/c3d27959-1bbd-e754-084e-6c782f6c0332.png)

####コード
```vue:home
<template>
  <v-container id="container-full">
    <v-layout>
      <v-flex xs12>
        <v-img src="https://www.symph.co/static/img/banner-illus.svg"></v-img>
      </v-flex>
    </v-layout>
    <v-layout text-xs-center mt-5 px-3 py-3 id="about">
      <v-flex xs12>
        <span class="display-2 font-weight-bold">About Me</span>
      </v-flex>
    </v-layout>
    <v-layout mt-3 px-5 class="text-xs-center" row wrap>
      <v-flex xs12>
        <v-avatar size="250" color="grey lighten-4">
          <img
            src="https://scontent-nrt1-1.xx.fbcdn.net/v/t1.0-9/50988163_10213734001079444_2817855097181044736_n.jpg?_nc_cat=104&_nc_ht=scontent-nrt1-1.xx&oh=d558e14acbf714985470fb4b740c35a8&oe=5D357E65"
            alt="avatar"
          >
        </v-avatar>
        <p class="headline font-weight mt-2">Gwen Danielle Merida</p>
        <p
          class="title font-weight-thin mt-3"
        >Hello I'm a Full Stack Web Developer and iOS Developer from Philippines. Have 5 years work experience in IT Industry.</p>
      </v-flex>
    </v-layout>
  </v-container>
</template>
```
Vuetifyを使用するので、12点グリッドシステムを使用します。Vuetifyの義務はウェブページの柔軟性です。Vuetifyのエレメントな「＜vーflex＞」を使います。ですから、簡単にウェブページをレスポンシブになりました。
スマートフォンでは下のイメージのようにアウトプットします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/300937/e4b6cbc6-e622-378e-b7e1-c93f0d20161b.png)

これはポートフォリオですから、スキルセットを見せる必要です。スキルセットについて使う技術を書いてください。下のイメージのようにならなければなりません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/300937/ea19bf1d-9c80-8b49-61f5-05d66608be49.png)

```vue:home
<v-layout text-xs-center mt-5 px-3 py-3 blue>
      <v-flex xs12>
        <span class="display-2 font-weight-bold white--text" id="skills">Skill Sets</span>
      </v-flex>
    </v-layout>
    <v-layout text-xs-center px-3 py-3 blue row wrap>
      <v-flex lg4 sm12 xs12>
        <v-avatar size="150" color="grey lighten-4">
          <img src="https://vuetifyjs.com/apple-touch-icon-180x180.png" alt="avatar">
        </v-avatar>
        <p class="subheading font-weight mt-2 white--text">Vue.js</p>
      </v-flex>
      <v-flex lg4 sm12 xs12>
        <v-avatar size="150" color="grey lighten-4">
          <img src="https://cdn.auth0.com/blog/react-js/react.png" alt="avatar">
        </v-avatar>
        <p class="subheading font-weight mt-2 white--text">Reactjs</p>
      </v-flex>
      <v-flex lg4 sm12 xs12>
        <v-avatar size="150" color="grey lighten-4">
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png"
            alt="avatar"
          >
        </v-avatar>
        <p class="subheading font-weight mt-2 white--text">Angular 7</p>
      </v-flex>
    </v-layout>
    <v-layout text-xs-center px-3 py-3 blue row wrap>
      <v-flex lg4 sm12 xs12>
        <v-avatar size="150" color="grey lighten-4">
          <img src="https://tutorialedge.net/images/node.png" alt="avatar">
        </v-avatar>
        <p class="subheading font-weight mt-2 white--text">Node.js</p>
      </v-flex>
      <v-flex lg4 sm12 xs12>
        <v-avatar size="150" color="grey lighten-4">
          <img
            src="https://cdn.freebiesupply.com/logos/large/2x/mysql-6-logo-png-transparent.png"
            alt="avatar"
          >
        </v-avatar>
        <p class="subheading font-weight mt-2 white--text">MySQL</p>
      </v-flex>
      <v-flex lg4 sm12 xs12>
        <v-avatar size="150" color="grey lighten-4">
          <img src="https://go.neo4j.com/rs/710-RRC-335/images/neo4j_logo_globe.png" alt="avatar">
        </v-avatar>
        <p class="subheading font-weight mt-2 white--text">Neo4j</p>
      </v-flex>
    </v-layout>
```

アウトプットはスマートフォンを使う時、下のイメージのようになるつもりです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/300937/2b46327a-e62e-7e72-faf1-9ac96f07ba6f.png)


## まとめ
いつもウェブページをきれいにしてください。良いインターフェースはたくさんユーザーを得ることができるので、プロジェクト計画の時、UI/UXをもっと考えてください。また、作成するアプリに対してユーザーが使用するデバイスについても考えてください。
これから、キャリアのウェブページを追加してください。もし、Vuetifyのタイムラインなエレメントを使うことからいいと思います。

もしコードを入手したいですから、リンクをクリックしてください。
https://github.com/gdmeridabit/sample_responsive_web

読んでくれてありがとうございます。