Vue.jsでWebサイトを作るときに使ったライブラリ

Webサイトでよく見る動きや機能を追加しようとしたときに便利だった、実際に使ったライブラリのリストです。

vue-backtotop

名前の通り、トップに戻るボタンです。
ボタンに表示する文字やアイコンの変更も簡単。

vue-scrollto

ページ内リンクにスムーススクロールをつけるときに使いました。
Webサイトのヘッダーをトップに固定しているとスクロール先がヘッダーの下に潜りこんでしまうので、offsetの設定を忘れずに。
main.js
Vue.use(VueScrollTo, {
  offset: -80 //headerの高さの分
})
 offset以外にもスクロールの速度なども設定できます。

他画面からの移動

idを指定するだけではアンカーリンクが機能しなかったので以下のように対処しました。
URLパラメータからアンカーを取得し、this.$scrollTo()を使ってスクロール。
移動先のページ
  mounted () {
    const hash = this.$route.hash
    if (hash && hash.match(/^#.+$/)) {
      this.$scrollTo(hash)
    }
  }
 しかし、これだけだとページの中にidを指定しているにも関わらず、 [vue-scrollto warn]: Trying to scroll to an element that is not on the page となってしまいました。むむむ。

setTimeout()してみたら動きました。

 mounted() {
    setTimeout(this.scroll, 300);
  },
 methods: {
    scroll() {
      const hash = this.$route.hash;
      if (hash && hash.match(/^#.+$/)) {
        this.$scrollTo(hash);
      }
   }
  }

vue-carousel

カルーセルが簡単に実装できます。
マウスドラッグやスマホのスワイプでも動く。便利。
カスタマイズの設定はGitHubで確認。

vue-material-design-icons

マテリアルデザインアイコン。
使いたいところにコンポーネントを入れるだけなのでお手軽。
アイコンの名前を調べる時はこちらのページが便利。

vue-meta

title、descriptionやogなど、headに記述するメタ情報の設定に使いました。

vue-social-sharing

FacebookやTwitterなど、SNSのシェアボタンを各ページに付けるときに。

google-maps-api-loader

GoogleMapを入れるときに使いました。
ページにマップを追加するコンポーネントを作る時はこのあたりを参考にしました。

date-fns

日付の書式を整えるときに使いました。

create-react-app でreact-styleguidist をつかってReactコンポーネントのスタイルガイドを作成する

先日スタートアップカフェコザで行ったセッション(コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 in スタートアップカフェコザ)で紹介したReactコンポーネントのスタイルガイドの作成を記載します。
ボタンのコンポーネントを作成してスタイルガイドで表示するまでの手順です。

プロジェクトの作成

プロジェクトを作成

create-react-app ui-react

ui-reactフォルダに移動
styleguidistとnode-sassを入れます

yarn add react-styleguidist

package.json

scriptsに追記


"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "styleguide": "styleguidist server"//これを追加
  }

ボタンのコンポーネントの作成

src/components/atoms/btn/
でフォルダを作成して、


Btn.jsx
Btn.scss
Btn.md

のファイルを作成

ボタンのjsx作成


import React from 'react';
import './Btn.scss';
export const Btn =(props)=>{
  return(
    <div 
      className='btn'
      onClick={(e)=>{this.props.handleClick(e)}}
    >
      {props.children}
    </div>
  )
}

ボタンのscss作成


@mixin btn {
  border-radius:4px;
  padding:4px;
  font-sie:12px;
  text-align:center;
  &:hover {
    cursor:pointer;
    font-weight:bold;
  }
}

.btn {
  @include btn;
}

ボタンのmd作成

このファイルにスタイルガイドに表示するものを記述
いろいろ設定できます(Documenting components)


```jsx
<Btn handleClick={}>.btn</Btn>
```

スタイルガイド作成


yarn styleguide

コンパイルすると、


yarn run v1.7.0
$ styleguidist server
Loading webpack config from:
D:\work\FrontendJ\react-styleguidist\node_modules\react-scripts\config\webpack.config.dev.js

You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://172.24.138.209:6060/

 DONE  Compiled successfully!

 
 


http://localhost:6060/

このurlを開くと表示されます。
 
 

 
 

気をつけること

  • 1つの.jsxに1つのコンポーネント

React-Native( Expo )を使って作るアプリ開発の導入方法

アプリのインストール

まず初めに、Expoを使うのでスマホにExpoの公式アプリをインストールする。
インストールしてアプリを起動すると、アカウントを作るように言われるのでアカウントを作成する。

アプリのひな型を作成

作成したら次に、コンソールでnpmを使ってcreate-react-native-appをインストールする。


$ > npm i -g create-react-native-app

次に任意のフォルダーに入って、react-nativeのひな型を作成


$ > cd 任意のフォルダー
$ > create-react-native-app 任意のプロジェクト名

typescriptを使う場合は、以下を実行


$ > cd 任意のフォルダー
$ > create-react-native-app 任意のプロジェクト名 --scripts-version=react-native-scripts-ts

アプリを実行

上記で、ひな型を作成したら作成されたフォルダーに入って npm start をする。
するとコンソール上QRコードが出てくるので、それをスマホのカメラを使ってスキャンする。


$ > cd 任意のプロジェクト名
$ > npm start
/*
* ここのQRコードをスマホのカメラを使ってスキャンする
*/

QRコードをスキャンするとさっきインストールしたExpoのアプリが起動するので、そこでcreate-react-native-appで作成されたアプリを実行することができる。

デバッグ方法

デバッグなどは、スマホを振ると管理画面が出てくるので一番下にあるDebug Remote JSをクリックするとPC側でブラウザが起動するのでそこでデバッグすることができる。

設定や便利なnpmモジュール

vsCode

React Native Tools

npmモジュール

react-map-glのPopup

1.Popupをインポート

import {Popup} form ‘react-map-gl’;

2.使い方

hoge(){

return (

<Popup

tipSize={5} //座標を指すチップのサイズ。

anchor=”top” //座標に対するポップアップの位置を示す文字列。オプションはtopbottomleftrighttop-lefttop-rightbottom-leftbottom-right

longitude={~~~}

latitude={~~~}

onClose={function}

>

<div>{~~~~~}</div>

</Popup>

);

}