What's New Qiita

20210106のvue.jsに関する記事は6件です。

  • 投稿日：2021-01-06T23:53:00+09:00

【Vue(Vuetify)】1月は日本全国酒飲み音頭ジェネレーターを作ったので酒が飲めるぞ

この記事は、リンク情報システムが主催するイベント「2021新春アドベントカレンダー Tech Connect」のリレー記事です。
「2021新春アドベントカレンダー Tech Connect」は engineer.hanzomon のグループメンバによってリレーされます。
（リンク情報システムのFaceBookはこちらから）

3日目となります本日は「【Vue(Vuetify)】1月は日本全国酒飲み音頭ジェネレーターを作ったので酒が飲めるぞ」という記事を@usankusaiが投稿いたします。

成果物

こんなの作ってみました。
https://sakenomi-5733e.web.app/
2021-01-06_17-52-46.gif

はじめに

あけましておめでとうございます！
2021新春アドベントカレンダー Tech Connectの3日目を担当します@usankusaiです。

突然ですが、皆さんは「日本全国酒飲み音頭」という曲をご存じでしょうか。
ご存じの方には言わずもがなとは思いますが、何かしらの理由をつけてお酒を飲めるぞ、という飲兵衛なら誰もが共感するであろう歌詞を耳に残る音頭に乗せた昭和の名曲の一つです。
この曲は1974年にバンド「バラクーダ」さんによってリリースされ大ヒットを記録しました。

我が家は年始に親戚一同で集まることが多いのですが、酔っ払った祖父が赤ら顔で両手を叩きつつこの曲を歌うため、私にとってはこの歌を聞くのがこの時期の風物詩となっています。
…が、今年はご存じのとおりコロナ禍ということもあり、年始の親戚の集まりは見送りになることが決まりました。

年始の風物詩が見送りになったところに今回のアドカレのお誘いを受け、居ても立っても居られずジェネレーターの開発を決めました。

要件

今回のシステムでは、原曲である日本全国酒飲み音頭の歌詞を元に、それっぽい歌詞を作り出すジェネレーターのwebサービスを目指しました。
原曲の歌詞は下記などをご参照ください。
日本全国酒飲み音頭(うたまっぷ.com)

歌詞を分析すると１番・２番はそれぞれ

１番：（１～１２月）は（イベント※）で酒が飲めるぞ
２番：（都道府県※）は（郷土料理※）で酒が飲める（方言）
※の部分は例外あり。

といった構成になっています。

当初は上記を理想値として実装をしたかったのですが、最終的には

１番：（１～１２月）は（イベント※）で酒が飲めるぞ　→　【月別イベント版】
２番：（都道府県）は（郷土料理）で酒が飲めるぞ →　【郷土料理版】
※の部分は例外あり。

というところまでの実現となりました。

使用した技術について

今回はかねてから興味があったvue + vuetify + javascriptの構成で、勉強をしつつシステムを構築しました。

処理の大まかな流れについて

ジェネレーターの大まかな処理の流れは下記のとおりです。
　①：初期表示時にaxiosでMediaWiki APIにHTTPリクエストを送信し、Wikipediaから情報を取得する。
　②：①で取得した情報を元に画面を描画する。
　③：「酒を呑む！」ボタンを押下したらリール回転を実行する。
　④：（月別イベント版）イベントをクリックしたらwikipediaで記事のページを開く。　※記事が存在しないケースあり
　　　（郷土料理版）wikipediaの記事の内容をから該当の料理の情報を表示する。
　　

公開リポジトリ―

ソースは下記で公開しています。
https://github.com/usankusai-dev/sakenomi_public

大雑把に開発して後で綺麗にしようと思ったのですが、とてもそんな時間がなかったのでかなり汚いコードになっています…（言い訳）

ポイント

ここからは開発の際に時間が掛かった、
　・月別イベント、都道府県別の郷土料理の情報の取得先について
　・スロット機能について
上記２点について実装の解説を記載します。

・月別イベント、都道府県別の郷土料理の情報の取得先について

月別のイベント情報と都道府県別の郷土料理の情報は、MediaWiki ウェブサービス APIを利用し、wikipediaの記事からそれぞれ取得しています。
　-月別：年中行事
　-都道府県別：日本の郷土料理一覧

どちらも記事の情報自体はaction=queryを指定することで取得が可能です。
ただし今回使用した２つの記事はそれぞれ書式が異なるため、取得方法が異なっています。

月別で使用している年中行事のほうは、見出しが月別で分かれており、月内のイベントもプレーンテキストで記載されています。
このため記事のプレーンテキストを返すprop=extractsを指定することで情報を取得することができます。

APIサンドボックス(年中行事)

(年中行事の取得結果　※内容の一部。実際だとマルチバイト文字はunicode形式となっています)
=== 四月 ===
稲荷祭 - 灌仏会 - 十三詣り - 入学式


=== 五月 ===
葵祭 - 白馬節会 - 神田祭 - こいのぼり - 三社祭 - 端午 - 運動会


=== 六月 ===
厳島神社例祭 - 山王祭 - 虫送り　- 大祓

記事を見れば分かると思いますが、月ごとのイベントはそれぞれ個別の記事ページが用意されているものが多かったため、wikipediaのそれぞれの記事ページへのハイパーリンクを付与しています。
（記事がないイベントもあります）

一方で日本の郷土料理一覧の記事は都道府県ごとの料理が表形式で記載されています。
この場合、prop=extractsでは表内のデータを取得することができません。

APIサンドボックス(日本の郷土料理一覧) ※prop=extracts版

(日本の郷土料理一覧の取得結果[prop=extracts]　※内容の一部。実際だとマルチバイト文字はunicode形式となっています)
== 北海道地方 ==


=== 北海道 ===


== 東北地方 ==


=== 青森県 ===

このように記事中の表内のデータを利用したい場合は、記事の情報を返すprop=extractsではなく履歴情報を返すprop=revisionsを利用します。
このprop=revisionsの中に特定のリビジョンの記事内容を返すrvprop=contextというのがあり、これを指定すると表も含めたネイティブのテキストを取得することができます。
（ただし下記の通りwikipediaの記事ページを作成時のテキストとなるためそれなりに加工が必要となります）

APIサンドボックス(日本の郷土料理一覧) ※rvprop=context版

(日本の郷土料理一覧の取得結果[rvprop=context]　※内容の一部。実際だとマルチバイト文字はunicode形式となっています)
== 北海道地方 ==
{{seealso|Category:北海道の食文化}}
{{seealso|アイヌ料理}}
=== <!-- 01 -->北海道 ===
{|class="wikitable" style="font-size:smaller;"あ
|-
!料理名!!別名!!発祥時期!!地域!!料理概要!!出典!!備考
|-
||[[石狩鍋]]||秋味鍋||-||[[石狩地方]]<br />（沿岸地域）||土鍋に昆布のダシを取り、サケをぶつ切りにして野菜と共に煮込んだ物。<br />味噌仕立てと[[酒粕]]を入れる物がある。||<ref name="hiiragi">全国料理研究会柊会、『日本の郷土料理』、1974年、ドメス出版、東京</ref><ref name="okada_029">[[#岡田|岡田]]、p.29</ref><ref name="nousangyoson">「[http://www.rdpc.or.jp/kyoudoryouri100/recipe/menu_list/ 選定料理一覧]」『[[#農山漁村の郷土料理百選|農山漁村の郷土料理百選]]』</ref>||-
|-
||[[なんこ鍋]]||なんこう||-||[[空知地方]]||なんこ（馬の腸）を鍋に投入した味噌仕立ての鍋料理。もっぱら産炭地で鉱山労働者の間で広まり食べられていた。

・スロット機能について

「酒を呑む！」ボタンを押下した際のスロット機能はCSSを利用して実現しています。
下記はスロットのスタイルを一部変更した場合の描画になります。
2021-01-06_18-15-23.gif

このように、縦に並べた文字列の要素を下から上にアニメーション再生することでスロットのリールっぽい動きを再現しました。

スロットの内部的な動きとしては
　１：選択した月（都道府県）によって文字列の配列を作成
　　　（月を変更した場合はスロット用のdiv要素を初期化）
　２：「酒を呑む！」ボタンを押したら１の配列からスロット用のdiv要素を【１周分＋】適当な位置まで最後尾から作成する
　３：スロット表示欄のtop要素を一番下まで移動し、top要素が0になるまでアニメーション移動をさせる
という流れになっています。
２の【】の部分ですが、この部分がないとアニメーションの移動数が少なかった場合、下記のような描画となり、あまりスロットっぽく見えなくなります。
2021-01-06_18-53-05.gif
このため必ず配列１周分を追加し、スロットっぽい動きをするように対応を行いました。

反省点

今回の開発の反省点ですが、一番はVue(Vuetify)をあまり有効活用できなかった点です。
正直なところ、今回の開発はVueやVuetifyを使わずともhtmlとjsで十分実装が可能でした。
（おそらくコードももっと簡潔になったと思います）

今回は学習目的もありVue+Vuefityの構成を選択しましたが、
　・結局使ったのはcomponentやrouter機能のみ
　・レガシーなCSSやHTMLの実装がほとんどで、レスポンシブ対応も行えていない
など、結果としてはあまりメリットのない構成となってしまいました。

特にこうしたネタ系のサービスはPC以外にスマホなどでも手軽に動かせてナンボだと思うため、
レスポンシブ対応は時間があればやってみたいです。

さいごに

いまだ猛威を振るうコロナにより、季節のイベントは行うことができず、郷土料理を食べに各地へ赴くこともできませんが、
このジェネレーターで出た結果をコロナ禍を乗り切った後の楽しみとして考えて頂ければ幸いです。

(余談)
私個人としてはコロナ禍による宅呑み機会の増加により、
むしろ飲酒量が増えた結果、見事自己歴代新記録となる高値の尿酸値を叩き出ました。
現在は禁酒の毎日を送っていますが、引き続き摂生に努めたいと思います…
（ただし、タイトル通りこのジェネレーターの開発が終わった日はとっておきのウィスキーを吞みました）

アドベントカレンダー4日目は週明け1/12(火)、担当は@ssscさんです。お楽しみに！

リンク情報システム株式会社では一緒に働く仲間を随時募集しています！
また、お仕事のご依頼、ビジネスパートナー様も募集しております。お気軽にご連絡ください。
Facebookはこちら。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T21:09:23+09:00

【Vue.js】入力フォームにバリデーションをつける

Vue.jsを使ってバリデーション（正しく入力されているか検証する機能）のついた入力フォームを作成してみました。

よく入力フォームで「メールアドレスが正しく入力されていません」とかエラーメッセージが表示されるのを見たことがあるかと思いますが、それらをVue.jsの条件付きレンダリング、算出プロパティ、双方向バインディングを用いて実装していきます。

ユーザーが情報を送る前に入力のミスを動的に教えてあげることで、結果的にUXの優れたアプリに仕上げることが可能です。

やること

今回は以下のような基本的なバリデーションチェックを名前、メール、電話番号それぞれに施していきます。

  • 名前：〇文字以上か
  • メール：正しい形式か
  • 電話番号：またはになっていた場合

バリデーションチェックは他にも色々なパターンや正規表現があったりしますので、どういう仕組みになってるかを理解した上で、実装できるようになりましょう。

【名前】 〇文字以上かチェック

「文字数の合計が4文字未満だった場合エラーメッセージを表示する」バリデーションを施していきます。

エラーメッセージにCSSで警告色を付けたりできるように ”error”というclassを付けてあげています。

HTMLの実装

HTMLは以下のようにv-ifで文字数が違うことを知らせるエラーメッセージを設定しましょう。

<div id="app">
  <div class="form-area__name">
    <p>名前</p>
    <input type="text" name="name" v-model="name"/>
    <p v-if="isInValidName"class="error">名前は4文字以上で入力してください</p>
  </di
</div>

Vue.jsの実装

文字列が4文字以上かチェックする処理を施します。

new Vue({
  el: '#app',
  data(){
    return {
      name: 'name',
    };
  },
  computed:{
    isInValidName(){
            //文字列が4文字以上かチェックする
      return this.name.length < 4;
    }
  }
});

【メール】正しい形式かチェック

メールアドレスが「@.~~」といった形式になっているか判定するバリデーションを施します。

HTMLの実装

<div id="app">
  <div class="form-area__email">
    <p>メールアドレス</p>
    <input type="text" name="email" v-model="email">
    <p v-if="isInValidEmail" class="error">メールアドレスの形式で入力してください。</p>
  </div>
</div>

Vue.jsの実装

入力内容が正規表現担っているかを判定する処理を施していきます。

メールアドレスの正規表現は他にも色々ありますので、使い方さえ理解したらググってそのサービスに適した物を使うようにしましょう。

new Vue({
  el: '#app',
  data(){
    return {
      email: 'email@email.com'
    };
  },
  computed:{
    isInValidEmail(){
            //メールアドレスとして判定される文字列と記号の組み合わせを定数化
      const reg = new RegExp(/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/);
            //指定した組み合わせになっていなかった場合判定を返す。
      return !reg.test(this.email);
    }
  }
});

【電話番号】〇文字かつ、数値になっているかチェック

「またはになっていた場合」と、複数の条件式を与えてバリデーションチェックを施します。

HTMLの実装

<div id="app">
  <div class="form-area__tel">
    <p>電話番号</p>
    <input type="tel" name="tel" v-model="tel">
    <p v-if="isInValidTel" class="error">電話番号は8桁で入力してください。</p>
  </div>
</div>

Vue.jsの実装

こちらでは、「入力された文字列が8文字未満、または"数値でない"場合に」エラーメッセージを返してあげる処理を書きます。

new Vue({
  el: '#app',
  data(){
    return {
      tel:'12345678'
    };
  },
  computed:{
    isInValidTel(){
      const tel = this.tel;
            // 入力された文字列が8文字未満、または"数値でない"ばあいに返す
      const isErr = tel.length < 8 || isNaN(Number(tel));
      return isErr;
    }
  }
});

【補足】v-modelを使わない擬似的双方向バインディングの実装

入力したタイミングでJavaScript側に即座にデータ反映させることは上記のようなv-modelを使わなくても実装が出来ます。

  • 入力データを加工したい時
  • 入力データを使ってリアルタイムで他の処理をさせたい

サンプルコード

入力された文字をリアルタイムで表示させるといったプログラムのサンプルです。

HTMLの実装

<div id="app">
  <input type="text" @input="setText" :value="text">
  <p>入力された文字は：{{text}}</p>
</div>

JavaScriptの実装

フォームに入力された内容をそのまま返してあげる処理を記述します。

new Vue({
  el: '#app',
  data(){
    return {
      text:"aaaaaa"
    };
  },
    methods: {
      setText(e) {
        this.text = e.target.value;
      }
    }
});

このような処理はv-modelでの実装が難しいです。

なぜなら、v-modelは「データとテンプレート側の記述を、一対一で双方向バインディングするもの」で、それ以外の処理をするのが難しいからです。

v-modelで対応ができないような処理がでてきた時は、イベントハンドリングを使った実装をしてみましょう。

まとめ

今回のはかなり基本的なバリデーションチェックになりますが、これらの操作はJavaScriptでかなり頻出する操作になると思います。

うまく組み合わせることで、電卓を作ったりピアノ作ったり動的なアプリを作ることができそうです。

おつかれさまでした！

参考記事

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T19:28:13+09:00

リピート用！！Vue版ESLint、Prettierの導入・設定（初心者～中級者向け）

今回はVueにおけるESLint、Prettierの導入から設定までをご紹介します！

ESLint、Prettierの設定は正直個人の好き嫌いが分かれるので、ご参考までに見て下さい！！

特に上級者に向けたわけではなく、初心者～中級者に向けた設定となっております。

今回の記事を書くにあたって、下記の記事を参考にさせて頂きました。ご協力誠にありがとうございます。

【Vue】はじめてのeslintとprettier設定
もうprettierで消耗したくない人へのvueでのeslint設定

また、細かい設定などはこちらの記事を見ていただくと良いかと。

それでは順を追って説明します！

パッケージのインストール

npm i -D babel-eslint eslint-config-prettier eslint-plugin-prettier eslint eslint-plugin-vue prettier prettier-eslint vue-eslint-parser eslint-plugin-vue-types

ESLintの設定

プロジェクト直下に.eslintrc.jsを作成します。

そして、下記のように設定します。

eslintrc.js
module.exports = {
  "env": {
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:vue/recommended",
    "plugin:vue-types/recommended",
    "prettier/vue"
  ],
  "plugins": [
    "vue"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "sourceType": "module",
    "parser": "babel-eslint"
  },
  "root": true,
  rules: {
    "vue/html-closing-bracket-newline": ["error", {
      "multiline": "always"
    }],
    //propsの型定義をしない
    "vue/require-prop-types": 0,
    //propsのアッパーケース(myProp)、ケバブケース(my-prop)の使用を可とする
    "vue/attribute-hyphenation": 0,
    // jsのインデントは２
    "indent": [2, 2],
    // 不要なカッコは消す
    "no-extra-parens": 1,
    // 無駄なスペースは削除
    "no-multi-spaces": 2,
  }
}

ここで、主に２つの設定について説明します。

vue/html-closing-bracket-newline

eslintrc.js
"vue/html-closing-bracket-newline": ["error", {
      "multiline": "always"
    }],

こちらは、タグの最後を改行してよいかの判断を行っております。

App.vue
<!-- （１） -->

<input 
  v-model="email" 
  type="email" 
  class="form-control" 
  aria-describedby="emailHelp" 
  required="required" 
/>

<!-- （２） -->

<input 
  v-model="email" 
  type="email" 
  class="form-control" 
  aria-describedby="emailHelp" 
  required="required" />

恐らく、皆さんがしっくりくるのは（１）の方だと思います。"multiline": "always"この設定を行わないと、（１）にエラーが表示されてしまいす。また、（２）の方が好きと言う方は、"multiline": "never"と設定してください。

vue/require-prop-types

こちらは、propsで引数を受け取るときに型定義を行うかの判断を行っています。

下の例を見て下さい。

App.vue
<script>

props: {
    userRights: {
      type: Number,
      required: true,
      default: 1
    }
  },

props: ["userRights"]

恐らく、皆さんが見慣れているのはprops: ["userRights"]こちらだと思います。
"vue/require-prop-types": 0この設定を行わないと、上のように引数として受け取るものは文字型、数値、Boolean、Object、、、、など１つ１つ設定しなければなりません。Typescriptを学んだことがある人はそれほど抵抗はないかもしれませんが、僕が思うに、フロントの部分を作る上では非効率的かなと思ったので型定義は行わないようにしました。

Prettierの設定

/.prettierrc
{
  "printWidth":120,
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

自分が一番しっくりくるのはこの設定でした。

と、こんな感じで設定することでストレフリーで開発を進めることができました！

コピペして使って頂いても結構です！！

ESLint、Prettierの設定については、いまいち僕も理解はできていないので何か間違いがあればご指適ください。

設定を組むのに割と時間がかかったので、皆さんの助けになればなと思います！

以上、「リピート用！！Vue版ESLint、Prettierの導入・設定（初心者～中級者向け）」でした！

Typescript用の設定もこちらの記事保存用！！Typescriptファイル作成、ESLint、Prettier設定備忘録で書いているので、ぜひ気になった方はご覧ください！

良ければ、LGTM、コメントお願いします。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T13:23:55+09:00

dotenvはもう古い！最新Nuxtの環境変数管理方法

はじめに

Nuxtで環境変数管理でdotenvのインストール方法どうだたっけと思い調べているとMoving from @nuxtjs/dotenv to runtime configという記事に出会いました。

要約すると、Nuxtv2.13以降なら、@nuxtjs/dotenvからruntimeConfigに移行しようということ。

dotenvをわざわざあとからインストールしなくてもNuxtの標準機能で使えるのは嬉しい。

実際にやってみる

1. 環境変数をRuntimeConfigに定義

使い方は簡単。
これまで通り、.envファイルを作成し、nuxt.config.jsにpublicRuntimeConfigとprivateRuntimeConfigを定義するだけ。

.env
BASE_URL=http://localhost:8000
API_URL=http://localhost:8888
SECRET_KEY=test
nuxt.config.js
export default {
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL || 'http://locahost:3000',
    apiURL: process.env.API_URL || 'http://localhost:3333',
  },
  privateRuntimeConfig: {
    secret: process.env.SECRET_KEY,
  }
}

2. 環境変数を使う

  • $configのグローバルに定義されます。なのでどこからでも呼び出し可能。
plugins/axios.js
export default function ({ $config }) {
 consle.log($config.baseURL)
}

runtimeConfigの種類

  • publicRuntimeConfigとprivateRuntimeConfigが定義できます。
  • privateとpublicという言葉どおりではありますが、publicは、フロントエンド公開しても良い変数。privateはフロントエンドに公開してはいけないものという使い分けになります。
  • 上記の使い分けからspaモードの場合、privateRuntimeConfigは使用できません。

まとめ

  • dotenvは使わない、runtimeConfigに移行する
  • .envファイルや環境変数の管理方針（.gitignoreしてGitHub等に公開しない）などは変わらず、使い方が変わっただけ。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T08:44:39+09:00

Rails6でvue.jsを使った開発を行うための設定に挑戦

Rails x Vue.jsを用いた開発に挑戦している。手探りなので間違っている箇所もあるかもしれないが自分なりに検索してやってみた。そういう記事としてご覧いただけると嬉しいです。

環境構築

①npmを導入(ホームディレクトリでOK)

brew install npm

②npmのパッケージをアプリに導入(アプリのディレクトリで)

npm init

ここで対話プロンプトが起動し、いくつか入力を求められる。()内はnpmコマンドがデフォルトで用意した値。

package name: (a) sample
version: (1.0.0) 0.0.0
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: 
license: (ISC)

name…packageの名前。ソースコードでimportやrequireをする際に使われる。

version…最初なので1.0.0とか0.0.0とかで答えておく。更新するたびにバージョンを変える必要あり

description…パッケージの説明。特に入力しないと以下のように表示される

"description": "This README would normally document whatever steps are necessary to get the application up and running.",

アプリを使うための説明はREADMEに書いたから見てくれや〜って感じのこと言ってる

main…モジュールの中で最初に呼ばれるスクリプトファイル。パッケージをrequireした際に最初に呼ばれるファイル。今回はmain.jsとした。

test command…コマンドを使ってソースコードの実行ができるようにする設定。何も入力せずenterを押すと

"test": "echo \"Error: no test specified\" && exit 1"

こんな感じの値が保存される。

これは

npm test

というコマンドに対してecho以下の出力を出しますよ、という意味。実際に実行すると

% npm test

> アプリ名@0.1.0 test 
> echo "Error: no test specified" && exit 1 ここ

Error: no test specified
npm ERR! Test failed.  See above for more details.

こんな感じでechoのところが出力される。

repository…紐付けるgitリポジトリを指定。.gitが存在している場合特に入力していなくても勝手に現在紐付いているgitリポジトリのurl入力される。

author…パッケージの著作者。

license…パッケージの権利情報。標準ではISCとなっているのでそれに倣った。

対話シェルで入力していないものも含めて最終的に以下のようなpackage.jsonができた。

{
  "name": アプリ名,
  "private": true, (公開したくない場合true)
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "vue-loader": "^15.9.6",
    "webpack": "^5.11.1",
    "webpack-dev-server": "^3.11.1"
  },
  "description": "This README would normally document whatever steps are necessary to get the application up and running.",
  "main": "main.js", (パッケージを呼び出した時に最初に呼ばれるソースコード)
  "directories": {
    "lib": "lib",
    "test": "test"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": 紐付けているgitリポジトリ
  },
  "author": 自分で設定した著作者,
  "license": "ISC",
  "bugs": {
    "url": リポジトリのissue
  },
  "homepage": リポジトリ名のreadme
}

③webpack, vue-loaderを導入

#ローカルインストール
npm install webpack vue-loader  --save-dev
npm install vue --save

#グローバルインストール
npm install webpack -g

これらをインストールするとnode.jsのモジュールがnode_modulesフォルダに大量にインストールされるが、これらはpackage.jsonに依存関係が記述されていることで勝手に読み込んでくれる。よってgitにpushする必要がない。

なのでgitignoreをいじる

node_modules/

こうするとnode_modulesがgitにpushされなくなる。

【参考】

vue.jsを用いた開発の導入

https://qiita.com/m0a/items/34df129d6d8991ebbf86

node_modulesをgitignoreに含める理由とか

https://qiita.com/growsic/items/b2965c0ba3b0aaae1ff8

package.jsonの中身

https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847

npmコマンドでpermission deniedされたので参照したやつ

https://qiita.com/okohs/items/ced3c3de30af1035242d

vue-loaderってなに

https://vue-loader-v14.vuejs.org/ja/

【次やること】

package.jsonの細かい設定の修正

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-06T01:30:21+09:00

うわ、急にローカルホストが動かなくなった時の話

皆さんこんにちは！！

今回はエラー解決備忘録として記事を書いていきます。

同じエラーに直面した人の力になれればなと思います！！！

Vue.jsでサイト制作を行っているところ、急に下記のようなエラーが発生しました。

TypeError: Cannot read property 'process' of undefined :index.js

どうやら、router/index.jsのとあるプロパティが働いていないらしい。。。

router/index.js
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  },
});

こういうエラーって自分で考えても仕方ないから、とりあえずエラーメッセージをコピペして検索。

色んな解決策があるが、どれを試しても上手くいかない。。。

と、そこでとある記事を見つけた。

どうやら.eslintrc.jsの設定にミスがあるかもしれない。

見てみると、、、

eslintrc.js
"env": {
    "browser": true,
    "es6": true
  },

このbrowserが原因らしい。

つい最近、Typescriptの勉強を始めたのでESLintの設定をそのままコピペしたせいかエラーが起きてしまった。

色々調べてみたが、これといった理由は分からない。分かる方がいたらぜひコメント欄にてお教え下さい！

この部分を以下のように修正。

eslintrc.js
"env": {
    "node": true,
    "es6": true
  },

これで動くようになりました！

なにか腑に落ちない感じがする。。。

以上、「うわ、急にローカルホストが動かなくなった時の話」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧