各所で書かれている方法で、proxyを記述していました。

module.exports = {
    devServer: {
        port: 8888,
        proxy: {
            '/api/': {
                target: 'http://localhost:8081'
            }
        }
    }
};

久しぶりに起動すると、何故かproxyが動作しない。
port: 8888 は読み込まれていたので、ファイルの置き場所などが原因ではないみたい。

原因調査

まずは情報が欲しいので、 logLevel: 'debug' を仕込みます。

        proxy: {
            '/api/': {
                target: 'http://localhost:8081',
                logLevel: 'debug'
            }
        }

起動

$ npm run serve

起動時のメッセージを確認。 Proxyがなんだか怪しいですね。

 INFO  Starting development server...
[HPM] Proxy created: [Function: context]  ->  http://localhost:8081

ググって辿り着いた様々な記事を見ると、 [Function: context] の部分には本来パスルールが入るはずです。

こんな感じ

[HPM] Proxy created: /api  ->  http://localhost:3000

引用 : https://www.yoheim.net/blog.php?q=20170803

次に、 pathRewrite を設定するのが良いという方法を見つけた

引用 : https://forum.vuejs.org/t/devserver-proxy-in-vue-config-js-not-working/87316

早速やってみる。頭に ^ を付与し、pathRewriteにて外したものを定義する

        proxy: {
            '^/api/': {
                target: 'http://localhost:8081',
                logLevel: 'debug',
                pathRewrite: { "^/api/": "/api/" }
            }
        }

この状態でアクセス。proxyが動作しました！

[HPM] GET /api/get_user_list?user_id=1 -> http://localhost:8081

何故前まで動いていて、今回動かなくなったのかは正直なところわかっていません。（バージョン？）

【ゴール】

Vue.jsでfirebaseを使用してログイン機能、ユーザー登録機能作成

【環境】

mac catarina 10.156
Vue.js v2.6.12

【実装】

firebaseをセットアップ

firebaseのURL
https://firebase.google.com/

※プロジェクトの作成は詳しくこちらで紹介しています。
https://qiita.com/tanaka-yu3/items/192886ce66522f027365

1　ログインし、プロジェクト作成後、Authenticationの「メール、パスワード」を有効に変更

2　プロジェクトのWEB＿APIキーを確認

左のメニューバー→設定→プロジェクトを設定,ウェブAPIキーを確認

　firebase auth apiを確認

「firebase auth api」の公式サイトから、使いたい機能のドキュメント確認
https://firebase.google.com/docs/reference/rest/auth

※※確認する項目は以下2点※※
■エンドポイントのURL
■応答ペイロード（firebaseに送る情報、データのことです。）

今回は、sign-in、sign-upですね！！

　コーディング

※「axios」を事前にインストール（http通信を利用する為）
※「data」には先ほど１で確認し、必要である「email, password」のデータをセット
※「.then」の記述はコンソールでデータの確認をする為
※「this.email = "";」は入力完了後に空に戻す処理です。
※「input」に「v-model」ディレクティブを忘れないように！！正常にデータ渡せません
※「returnSecureToken」は常に「true」を返します

Login.vue

<template>
  <div>
    <h2>Login</h2>
    <div class="form">
      <label for="emial">Email:</label>
      <input type="text" v-model="email" />
    </div>
    <div class="form">
      <label for="password">password:</label>
      <input type="password" v-model="password" />
    </div>
    <div class="form">
      <button @click="Login">ログイン</button>
    </div>
  </div>
<template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      email: "",
      password: "",
    };
  },
  methods: {
    Login() {
      axios
        .post(
          "https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=あなたのWEB_APIキー",
          {
            email: this.email,
            password: this.password,
            returnSecureToken: true,
          }
        )
        .then((res) => {
          console.log(res);
        });
      this.email = "";
      this.password = "";
    },
  },
};
</script>

Register.vue

<template>
  <div>
    <h2>Register</h2>
    <div class="form">
      <label for="emial">Email:</label>
      <input type="text" v-model="email" />
    </div>
    <div class="form">
      <label for="password">password:</label>
      <input type="password" v-model="password" />
    </div>
    <div class="form">
      <button @click="Register">登録</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      email: "",
      password: "",
    };
  },
  methods: {
    Register() {
      axios
        .post(
          "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=あなたのWEB_APIキー",
          {
            email: this.email,
            password: this.password,
            returnSecureToken: true,
          }
        )
        .then((res) => {
          console.log(res);
        });
    },
  },
};
</script>

【まとめ】

■firebaseのプロジェクトでAuthenticationのメールパスワードを有効に
■firebase auth apiで使用したい機能のドキュメントを確認
■URL、タイポのミスがないように記述

【オススメ記事】

■ 【Vue.js】 axios / firebaseを利用して、データのやり取り
https://qiita.com/tanaka-yu3/items/192886ce66522f027365

■ 【Vue.js】クリック処理　@click
https://qiita.com/tanaka-yu3/items/e578cadf35a7bc024770

■ 【Vue.js】 IF文・For文　条件分岐、繰り返し処理
https://qiita.com/tanaka-yu3/items/0ccf9a11525331b764de

{ apple: 'りんご', lemon: 'レモン' }

testObjectという名前の上記のようなオブジェクトを参照したいとします。

「りんご」という文字を取り出したいので、

console.log(testObject.apple);
console.log(testObject['apple']);

などとしてもコンソールには

undefined

の表示。

オブジェクト自体はあるのになぜ中身は参照できないの！？！？と困惑するかと思います。
それは、実はオブジェクトではなくてjson型のデータではないでしょうか。

試しに、元のデータを見るため

console.log(testObject);

としてみてください。

{ apple: 'りんご', lemon: 'レモン' }

ではなく

{ "apple": "りんご", "lemon": "レモン" }

のように出てくるかと思います。(※キーも値もダブルクォーテション)

こうなった場合、これはオブジェクトではなくjson型のファイルということです。

結論

testObject = JSON.parse(testObject);

をしましょう。

これをすることでjson型がObject型に変換されます。

その後

console.log(testObject.apple);

をすると

りんご

表示できました！

逆に、Object型からjson型に変換したい場合には

testObject = JSON.stringify(testObject);

を使ってくださいね！

こんにちは！たわちゃんです

私は３ヶ月前からプログラミングを学び始めた初心者ではございますが、
プライベートでサービス開発にチャレンジしようとしております・・・！

その開発までの道のりを、これからQiitaにちょこちょこ書いていこうかなと思うので、
さりげな～く応援よろしくお願いします！

構想中のサービス

現在、考えているのがこちらのサービス！

私の兄はマジシャンをしているのですが、常日頃から告知や宣伝活動に困っているのを見てきました。

そこで、兄のような芸人さん、さらには個人経営の店主さんを対象に
告知専用サービスを作ろうと考えました！

主な機能は３つ
（１）スケジュールの管理・共有URLの発行
（２）SNSで簡単にシェア！
（３）告知用の画像もラクラク作成できる！

※「できる・できない」は度外視して考えた機能です！もちろん全部実現させる予定ですが・・・！

そこで、個人開発への道、第一歩として！

（１）の機能で使えるカレンダーページを作ってみることにしました！

前提

カレンダーページを作る前に、Nuxt.jsでサイトを作りました。

トップページに「カレンダーを見る」というボタンを作ったので、
それを押すとカレンダーページに飛ぶようにしたいと思います！

いざ！カレンダーページ作り！

Nuxt.jsでカレンダーコンポーネント『FullCalendar』のVue.js版を使う
高機能でかつ軽快に動作するカレンダーFullCalendarをNuxt.jsで使う

これらの記事を参考に、シンプルだけど機能性が高そうなFullCalendarを使ってページ作成にチャレンジしました！

FullCalendarをインストール

まず、以下のコマンドでFullCalendarのモジュールをインストール！

$ npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

FullCalendar用のプラグインファイルを作成

pluginsというディレクトリに適当な名前（今回はfullcalendar.js）でファイル作成し、以下の内容を入力！

plugins/fullcalendar.js

import Vue from 'vue'
import Calendar from '~/components/Calendar'

Vue.component('full-calendar', Calendar)

nuxt.config.jsに設定を追記

nuxt.config.js

// 省略
  plugins: [
     // 以下を追記
    { src: '~/plugins/fullcalendar', ssr: false }
  ],
// 省略

Componentを作成

componentsディレクトリにCalendar.vueという名前でファイルを作成し、以下を入力します。

components/calendar.vue

<template>
  <FullCalendar default-view="dayGridMonth" :plugins="calendarPlugins" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar
  },
  data () {
    return {
      // 使用したいプラグインを以下で指定。事前にimportでインポートする。
      calendarPlugins: [ 
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin
      ]
    }
  }
}
</script>
<style>
@import '~/node_modules/@fullcalendar/core/main.css';
@import '~/node_modules/@fullcalendar/daygrid/main.css';
@import '~/node_modules/@fullcalendar/timegrid/main.css';
</style>

カレンダーを表示させる

私は既に作っていたuserPageというページで表示させたかったので、以下のように追記しました！
fullcalendarを表示させるdivを追加し、呼び出せるようにしました！

userPage.vue

<!--CSS省略-->
<template>
  <div align="center" class="page">

    <h1>My Calendar</h1>
    <div class="columns is-mobile">
      <full-calendar />
    </div>
    <router-link to="/login">
        <button class="btn-calendar"><a class="btn-text">TOPに戻る</a></button>
    </router-link>

  </div>
</template>

<script>
//省略
export default {
  name: 'Schedule',
//省略
    },
</script>

いざ、や～んでぶ！

さぁ、準備は整いました。ページを見てみましょう！
や～ん　でぶっ！！！

$ yarn dev

なぜだ・・・。

そのあと、色々模索するも、うまくいかず・・・。
一旦元に戻そうとすると、そもそものページも出ず、以下のようなエラーが。

調べると、キャッシュが残っているとかなんとか。

不幸中の幸いなのかわかりませんが、カレンダーを入れる前の画面に戻す方法だけは会得しました・・・。

（１）node_modules　と　package-lock-json を削除
（２）以下のコマンドを実行

yarn install 
yarn dev

（参考記事▶nuxtプロジェクトの実行中にエラーが発生しました）

こちらでエラーは消えると思うので、私のようにつまずいた方の参考になりますよう・・・。

とりあえずのGoogleカレンダー

FullCalendarはもうちょい調査が必要なので・・・
とりあえず何かカレンダー表示させられないかと調べました。

Googleカレンダーの埋め込みなら私でもできそうだったのでチャレンジ！

Googleカレンダーの設定 ▶ マイカレンダーの設定 ▶ 表示させたいカレンダーを選択 ▶ カレンダーの統合

この手順で埋め込みコードを取得することができます！

今回はとりあえず、こちらをuserpageに追加！

  <div align="center" class="page">

    <h1>My Calendar</h1>
    <iframe src="https://calendar.google.com/calendar/embed?src=twtjudy%40gmail.com&ctz=Asia%2FTokyo" 
    style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
　　<br>
    <router-link to="/login">
        <button class="btn-calendar"><a class="btn-text">TOPに戻る</a></button>
    </router-link>

  </div>

とりあえずのGoogleカレンダー?#protoout pic.twitter.com/uiOyH1ssva

— カレー大好き★たわちゃん (@tawachan1128) October 15, 2020

これは簡単に表示されました。とりあえず良かった・・・。

結果まとめ＆今後の課題

・Nuxt.js難しい…。FullCalendarを表示できるように、引き続きチャレンジ！
・CSSもひどいので、ライブラリとか使ってシンプル＆見やすさを意識する
・PCとスマホどっちで見ても綺麗にするにはどうすればいいのか調べる
・エラーから学ぶことも多いので、エラー出てもくじけない

今回はうまく行きませんでしたが、これからチャレンジすることのハードルを認識できたので良かったです。

ちょっと楽観的になってる部分があったので、ちゃんと気を引き締めて、課題を把握し、
ひとつひとつ潰していかないとサービス完成しないなと・・・

不安と焦りは強くなりましたが、ストレッチきいた目標がある方が成長できると思うので頑張ります。

おまけ

ボタンを押すとページ遷移するっていうのを覚えたら楽しくなったので、
遊びのボタンを２つ作りました。

「撃たれる」を押すと、以前自分で作ったステイサムに撃たれるアプリに飛びます。

参照▶ジェイソン・ステイサムに「死にたくないなら手を挙げろ！」と言われるのが夢だったので、自分でそんなアプリを作りました。

次に「映画を見る」を押すと、以前自分で作ったステイサムのオススメ映画を教えてくれるアプリに飛びます。

完成した〜〜〜(´；ω；｀)

ジェイソンステイサムのオススメ映画を教えてくれるアプリ！

I made an app that teaches you a recommended movie of Jason Statham❤#protoout #jasonstatham #本人に届け #javascript #vuejs #駆け出しエンジニア pic.twitter.com/0uYyYOIMDz

— カレー大好き★たわちゃん (@tawachan1128) August 5, 2020

参照▶あなたにピッタリなジェイソン・ステイサムの映画を教えてくれるアプリを作りました【Vue.js】

たのしい・・・。

自分は遊びもどこかに入れないと、モチベが保てないということも今回でわかったので
全部ひっくるめてどういうサービスを作っていくか方向性を決めていくのも大事だとわかりました。

個人開発への道は長い・・・。

（つづく）

概要

ユーザーが設定している表示言語設定に応じてvuejs-datepickerの表示言語を動的に変更するという実装をする際、vuejs-datepickerの表示言語を親コンポーネントから制御する方法に詰まったのでメモを残しておくの巻

困ったこと

親コンポーネントとvuejs-datepickerを使用している子コンポーネントが存在し、親コンポーネントから渡すpropsに応じて子コンポーネント側で使用しているvuejs-datepickerの表示言語を変更すること

解決策

全ての言語を配列としてimportし、dataオブジェクトの任意のプロパティの値として指定しておきます（下記コードの場合、all_langという名前でimportし、dataオブジェクトのlanguagesというプロパティの値としてall_langを指定しています）。
そして親コンポーネント側から使用したい言語を文字列でpropsとして渡し、その文字列をもとにlanguagesの配列から使用したい言語オブジェクトを抽出し、それをdatepickerのlanguageプロパティに指定すれば解決しました！あとは何らかの方法でjaやenなど言語の識別文字列をどこからか取得するだけ。
ちなみに下記の場合、親コンポーネントからスペイン語を指定しており、デフォルト日本語になっています！

App.vue

<template>
    <calender
        v-model="form.specical_date"
        title="ブロックタイトル"
        placeholder="プレースホルダー"
        language="es"
    />
</template>

<script>
import Calender from './components/Calender.vue';
export default {
    components: {
        Calender,
    },
    data() {
        return {
            form: {
                specical_date: null,
            },
        };
    },
};
</script>

Calender.vue

<template>
    <div>
        <span>{{ title }}</span>
        <datepicker
            format="yyyy-MM-dd"
            :language="languages[language]"
            :placeholder="placeholder"
            :clear-button="true"
            @input="updateDate"
        />
    </div>
</template>

<script>
import Datepicker from 'vuejs-datepicker';
import * as all_lang from 'vuejs-datepicker/dist/locale';
export default {
    components: {
        Datepicker
    },
    props: {
        title: {
            type: String,
            default: '',
        },
        placeholder: {
            type: String,
            default: ''
        },
        language: {
            type: String,
            default: 'ja'
        }
    },
    data() {
        return {
            languages: all_lang,
        };
    },
    methods: {
        updateDate(val) {
            this.$emit('input', val);
        },
    }
};
</script>