かんたんな紹介と動機 有給Holderというアプリを作りました。有給を取り忘れないように1年間である程度計画的に取りたいと思って作りました。 個人的な話ですが、去年度たまたま人生初の入院（コロナではありません）というイベントがあったため、3月末で消えてしまうはずだった有給を辛うじて消化できました。 しかし、そんなイベントが無いと消化できないのは大変もったいないことです（また入院はしたくありません）。 更に、上場企業は有給消化率を公表しているので、そういった企業に勤めている場合はより良い就業環境であることをアピールするために、有給消化率は向上していくことが望ましいと考えられます。 ですので、ある程度余裕をもって有給を消化していくために、いつごろとればいいのかを計画したくて作りました。 なぜVue.jsか 仕事で使うことになり、練習も兼ねて作ってみました。 また、v-calendar というpluginがありまして、年間カレンダーを表示するのにちょうど良かったので使っています。 Netlifyにデプロイ Nuxt.jsで作ったアプリを簡単にデプロイできるNetlifyに作りました。 無料で作れましたし、アフィリエイトを載せても問題ないようです。 有給Holderの使い方 基本的には、休みたい日をカレンダーでクリックするだけです。 スマホは以下のような感じで、月ごとに選択していきます。 PCだと、1年分すべてを一枚のカレンダーで表示しながら、休みたい日を選べます。 休みたい日をクリック まず、来年の3月までに消えてしまう有給の日数を入力します。 次に、カレンダー上で有給を取りたい日をクリックしましょう。 土日祝日は予め色が変わっているので、完全週休二日制の場合は色が変わっていない日を選択すれば大丈夫です。 特に土日で制限もしていないので、土曜日や日曜日、祝日を選択することもできます。 選択した日はURLに保持されますので、それをどこかで持っていれば予定が変わったときに最初から作り直す必要がなくなります。 Twitterでフォロワーに共有 「有給予定日をツイート」のリンクを押すと、URLと一緒にツイートできます。 これであなたが休みの日がフォロワーに共有されるので、休みを合わせて遊ぶのも良いかもしれません。 GoogleCalendarにインポートして同僚に教える 仕事でも使いたい場合は、CSV形式でダウンロードできます。 GoogleCalendarにそのままインポートできるCSV になっています。 有給を使ってすることがない場合は漫画を読みましょう アプリ名の元ネタと色合いとか細かいネタと個人的にオススメの漫画のリンクを載せました。是非読んでみてください。 （エヴァのコミック版だけ完読していなかったので、全部Kindleで買って読みました。絵柄がちょっと古い感じがしましたが、それもまた懐かしく、なかなか良かったです） まとめと今後 Vue.jsやNetlifyを使って、こういったツールをサクッと作って公開できて、時代が進んでいることを感じました。 いったん2021年度で作ってあるので、来年度になる前に有給をとって2022年などにも対応していきたいと思います。祝日は毎年微妙に変わっていくので、そのあたりを反映させていく予定です。

タイトルのまんまですが、久しぶりにVuexを触って忘れていたのでメモがてら記事にします。 環境 vuex: 3.6 説明 dispatch()はPromiseを返すみたいです。 なので、dispatch()は非同期です。 store actions: { actionA({ commit }) { //このmethodTooLong()は時間がかかる const result = methodTooLong() }, }, 呼び出し側 dispatch('actionA') method2() methodTooLong()の処理が長い場合、method2() → commit("end", result)の順番で実行されます。 処理順序を制御する？ ふむふむ そうだった。思い出した。 ということは、長い処理にawaitをつけって　と、、、、、 store actions: { async actionA({ commit }) { //awaitをつけて処理を待つ（methodTooLong()はPromiseを返す想定） const result = await methodTooLong() //methodTooLong()が終わったらcommit commit("end", result) }, }, 呼び出し側 dispatch('actionA') method2() methodTooLong()にawaitを付けているし、これでcommit("end", result) → method2()の順番になるだろう 、、、といつも引っかかってしまいます。 結論 しかし、dispatch()は非同期 なのでした。 なので、、、 store //↓ここは上に書いた内容と同じです。 actions: { async actionA({ commit }) { //awaitをつけて処理を待つ（methodTooLong()はPromiseを返す想定） const result = await methodTooLong() //methodTooLong()が終わったらcommit commit("end", result) }, }, 呼び出し側 //ここにもawaitをつける await dispatch('actionA') method2() dispatch()自体にもawaitを付けることで commit("end", result) → method2() の順番になります。

概要 Vue.js を使って、サクッとローカルに環境構築をしてWebアプリの立ち上げを行う手順の備忘録。 前提 ・初めて Vue を触るし、まだ環境構築もしていない人向け ・使用する Vue のバージョンは v3.x を使用 手順１：環境構築（Node.js のインストール） Node.js をインストール まだマシンに Node.js をインストールしていない場合は、以下のサイトから「推奨版」のインストーラをダウンロード https://nodejs.org/ja/ Node.jsは、JavaScriptをサーバサイドで動かすための実行環境を提供するソフトです。 ダウンロードしたインストーラを開いて「はい、はい」ってやればインストールは完了します。 Node.js がインストールされたかの確認 場所はどこでも良いので、ターミナルツールで以下を実行して、バージョンが返却されればインストール完了 # Node.js バージョン確認コマンド node -v # 何かしらバージョンの数字が帰ってくればOK v14.17.0 # ついでに、npm バージョンも確認 npm -v # バージョン返却されたらOK 6.14.13 ※「npm」は node とセットで、勝手に一緒に入る別機能。プログラムやパッケージのインストール作業などに使用する。 手順２：環境構築（Vue のインストール） Vue CLI ツールのインストール Vueでアプリを開発するときに作業を効率化するCLIツールとともに、Vueをインストールします。 グローバルインストールをオプションで指定しているので、マシンの固定の場所にインストールされるため、コマンド実行場所はどこでも構いません。 npm install -g @vue/cli ※インストールに失敗する場合は、先頭に sudo を付与して実行してみてください。以降のインストール時でも同様です。 ※もうすでに vue 2.0系がインストールされている場合は、2.0系をアンインストールしてから3.0系を再インストールすればOK? # 2.0系のCLIツールを削除 npm uninstall -g vue-cli # 3.0系をCLIツールをインストール npm install -g @vue/cli Vue がインストールされたか確認 #　バージョン確認 vue --version # バージョンが表示されたらOK @vue/cli 4.5.13 手順３：Vue アプリの作成 node および vue のインストールが完了し、開発環境ができました。 では、VueのWebアプリを作成します。 プロジェクト生成 適当な場所にフォルダを作り、そこでターミナルを立ち上げた後、 以下の Vue プロジェクト（Vue アプリ）を作成するコマンドを実行。 #　 「demo-app」という名前でプロジェクト生成 vue create demo-app ※諸々テキストが表示されますが、 「Xcode」に関すること以外でエラー表示がなければOK（XcodeはPCに入れてなければエラーが出ちゃいます） 動作確認 生成した場所に、指定したプロジェクト名のフォルダが生成されているので、ディレクトリ移動してアプリを起動してみます。 # 指定したプロジェクト名のフォルダへ移動 cd demo-app # 開発モードで起動 npm run serve " Compiled successfully " と表示されたら、Webブラウザから http://localhost:8080 にアクセスすると以下の画面が表示されます。 これで Vue アプリの環境構築は完了。 エディタを立ち上げてソースの編集を行うと、リアルタイムにWeb画面に反映されます。 ※ターミナルツールで「Ctrl＋C」を入力すると、起動しているアプリを停止できます。 まとめ 以下の作業を行うことで、15〜20分ほどでVueアプリの基礎を生成できました。 Node.jsを入れる Vue CLIを入れる（v3.0系） createコマンドでプロジェクト生成 あとは、チュートリアル等を見ながら、ボタンやフォームを追加したらWebアプリとして完成します。 具体的な記法やコツなどはまた別記事で。

概要 Vue.js を使って、サクッとローカルに環境構築をしてWebアプリの立ち上げを行う手順の備忘録。 前提 ・初めて Vue を触るし、まだ環境構築もしていない人向け ・使用する Vue CLI のバージョンは Vue 3 を開発可能な CLI を使用 ・記事投稿時点では、主要なUI系フレームワークがほぼ全て Vue 3 未対応なので、実際にアプリを開発していく際には Vue 2 になる可能性があります。 手順１：環境構築（Node.js のインストール） Node.js をインストール まだマシンに Node.js をインストールしていない場合は、以下のサイトから「推奨版」のインストーラをダウンロード https://nodejs.org/ja/ Node.jsは、JavaScriptをサーバサイドで動かすための実行環境を提供するソフトです。 ダウンロードしたインストーラを開いて「はい、はい」ってやればインストールは完了します。 Node.js がインストールされたかの確認 場所はどこでも良いので、ターミナルツールで以下を実行して、バージョンが返却されればインストール完了 # Node.js バージョン確認コマンド node -v # 何かしらバージョンの数字が帰ってくればOK v14.17.0 # ついでに、npm バージョンも確認 npm -v # バージョン返却されたらOK 6.14.13 ※「npm」は node とセットで、勝手に一緒に入る別機能。プログラムやパッケージのインストール作業などに使用する。 手順２：環境構築（Vue のインストール） Vue CLI ツールのインストール Vueでアプリを開発するときに作業を効率化するCLIツールとともに、Vueをインストールします。 グローバルインストールをオプションで指定しているので、マシンの固定の場所にインストールされるため、コマンド実行場所はどこでも構いません。 npm install -g @vue/cli ※インストールに失敗する場合は、先頭に sudo を付与して実行してみてください。以降のインストール時でも同様です。 ※もうすでに 古い Vue CLI がインストールされている場合は、アンインストールしてから新しい CLI を再インストールすればOK? # 旧CLIツールを削除 npm uninstall -g vue-cli # 新CLIツールをインストール npm install -g @vue/cli Vue がインストールされたか確認 #　バージョン確認 vue --version # バージョンが表示されたらOK @vue/cli 4.5.13 手順３：Vue アプリの作成 node および vue のインストールが完了し、開発環境ができました。 では、VueのWebアプリを作成します。 プロジェクト生成 適当な場所にフォルダを作り、そこでターミナルを立ち上げた後、 以下の Vue プロジェクト（Vue アプリ）を作成するコマンドを実行。 #　 「demo-app」という名前でプロジェクト生成 vue create demo-app ※諸々テキストが表示されますが、 「Xcode」に関すること以外でエラー表示がなければOK（XcodeはPCに入れてなければエラーが出ちゃいます） 動作確認 生成した場所に、指定したプロジェクト名のフォルダが生成されているので、ディレクトリ移動してアプリを起動してみます。 # 指定したプロジェクト名のフォルダへ移動 cd demo-app # 開発モードで起動 npm run serve " Compiled successfully " と表示されたら、Webブラウザから http://localhost:8080 にアクセスすると以下の画面が表示されます。 これで Vue アプリの環境構築は完了。 エディタを立ち上げてソースの編集を行うと、リアルタイムにWeb画面に反映されます。 ※ターミナルツールで「Ctrl＋C」を入力すると、起動しているアプリを停止できます。 まとめ 以下の作業を行うことで、15〜20分ほどでVueアプリの基礎を生成できました。 Node.jsを入れる Vue CLIを入れる createコマンドでプロジェクト生成 あとは、チュートリアル等を見ながら、ボタンやフォームを追加したらWebアプリとして完成します。 具体的な記法やコツなどはまた別記事で。 今回導入した CLI なら、Vue 2/3 両方のアプリが生成可能です。

Vue.js(Nuxt.js)にて、 v-if使用時に$refsがundefinedになってしまう時の対処法になります。 v-if使用時$refsがundefinedになってしまう <template> <div> <input v-if="isInputName" ref="inputName" type="text" name="name" /> <button @click="inputFocus">編集</button> </div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ data() { return { isInputName: false } }, methods: { inputFocus() { this.isInputName = true const inputName = this.$refs.inputName inputName.focus() } } }) </script> 上記のコード例ですと、TypeError: Cannot read property 'focus' of undefinedと言うエラーが出ます。 v-ifはレンダリングされないので、$refsでは取得できずにundefinedとなる為です。 v-showに変更すればundefinedにはなりません。 v-ifのレンダリングを待つことで解決 v-ifによるレンダリングを待つことで解決することができます。 setTimeout <script lang="ts"> import Vue from 'vue' export default Vue.extend({ data() { return { isInputName: false } }, methods: { inputFocus() { this.isInputName = true setTimeout(() => { const inputName = this.$refs.inputName inputName.focus() }, 100) } } }) </script> setTimeoutで処理を遅らせることで、$refsがundefinedになるのを防げます。 async/await <script lang="ts"> import Vue from 'vue' export default Vue.extend({ data() { return { isInputName: false } }, methods: { async inputFocus() { await (this.isInputName = true) const inputName = this.$refs.inputName inputName.focus() } } }) </script> async/awaitでv-ifのレンダリングを待つことでも対応できます。

はじめに Vue.jsの練習のためシンプルなカウンタアプリを作成しました。 作成した内容をまとめておきます。 作成したもの アプリ概要 以下の画面のカウンタアプリを作成していきます。 画面にはカウント数のラベル、「Count」ボタン、「Reset」ボタンを配置しています。 Countボタンを押すとカウント数が1ずつ増加して、Resetボタンを押すとカウント数が0になります。 実装概要 Vue + Typescriptを使って作成しています。 1つのコンポーネントで作成できる程度の小規模なアプリですが、以下のことも取り入れました。 - レスポンシブデザイン：Vuetifyを導入 - AtomicDesign：これも練習のため少し取り入れてます - デプロイ：firebaseにデプロイしました ソースコード 今回作成したものはGithubで公開しています。 コードの詳細を確認したい方は以下URL先からご確認ください。 https://github.com/Ruketa/simple-counter それでは、実装した内容を紹介していきます。 開発環境 以下のライブラリとFWを使用しました Vue.js Typescript vuetify node.js 以下のツールを使用しています Vue CLI Vueで開発するためのツールです。 以下サイトを参考にインストールして下さい。 参考：https://cli.vuejs.org/ Firebase CLI Firebaseプロジェクトの管理、表示、デプロイを行う様々な機能が使えます。以下サイトを参考にインストールして下さい。 参考：https://firebase.google.com/docs/cli?hl=ja firebaseへデプロイするためには事前にプロジェクトを作成する必要があります お持ちでない方は公式サイトからプロジェクト作成をしてください。 私はSparkプラン（無料プラン）を使っています 公式サイト：https://firebase.google.com/?hl=ja 実装内容 プロジェクトの作成 まずvue cliを使って初期プロジェクトを作ります。 適当な場所に移動して以下コマンドでプロジェクトを作成します。 プロジェクト名はお好きな名前を指定してください。 vue create "プロジェクト名" 実行するとDefault設定を使うか問われるのでManually select featuresを選択して詳細設定を行います。 いくつかプロジェクト設定をどうするか問われるので選択していきます。 各項目は下図のように設定しました。 主な設定としては以下の二点です。 TypeScriptを利用 class style component syntaxは有効（Yesを選択） その他の項目はLinterの設定等なのでお好きに設定頂いて構いません しばらくしたら初期プロジェクトが作成されます。 そして、npm run serveを実行して,コンソールに出力されるアドレス（http://localhost:8080とか）へアクセスすれば動作確認できます こんな画面が表示されます。楽チンですね。 カウンタ機能の実装 ベースとなるプロジェクトを作れたのでまずは画面から作っていきます。 下図のファイルが作成されていて、編集対象となるのは拡張子が「.vue」のファイルです。 App.vueから始まってHelloWorld.vueを呼び出す構成になっているのでHelloWorld.vueを編集していきます。 ***.vueファイルはシングルファイルコンポーネントといい、ファイル内は以下のタグで大きく区分けされています。 <template> HTMLの定義する箇所 <script> Typescript( or javascript ) を実装する箇所 <style> CSSを定義する箇所 詳細な説明は以下のサイト等をご覧ください 以下の流れで編集していきます。 HTML、CSSの定義（<template>、<style>の部分） 部品をクリックしたときの動作の実装（<script>の部分) HTML、CSSの定義 カウント番号は<p>タグ、count up、resetボタンは<a>タグで定義し以下のように作成しました。 HTML部分の定義だけではとても質素な見た目なので<script>の部分へ<a>タグ、<p>タグへのスタイルの定義をします。 ここはまだまだ未熟なのと、けっこう量が多くなるのでGithubでソースコードをご確認下さい。 ※Githubへアップしているコードはコンポーネントを分割しているのでHwlloWorld.vueではなく、CountButton.vue、CounterLabel.vue、ResetButton.vueをご確認下さい。 <template> <div> <p class="counter_label">{{ count_number }}</p> <a>count up</a> <a>reset</a> </div> </template> ... <style> <!-- ※ここはGithubのソースコードをご参照下さい --> </style> Scriptの定義 続いて<script>の部分にボタンを押したときの動作を実装していきます。 以下のような感じです。 <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; // @ is an alias to /src @Component export default class Home extends Vue { private counter = 0; private c_clicked = false; private r_clicked = false; mousedown(target:string):void{ if(target === "countup") this.c_clicked = true else this.r_clicked = true } mouseup(target:string):void{ if(target === "countup") this.c_clicked = false else this.r_clicked = false } countup():void{ this.counter++; } reset():void{ this.counter = 0; } } </script> 解説 カウント数を表す値のために変数counterを定義しています。 カウント数を変化させるためにcountup()メソッド、reset()メソッドを定義します。 countup()メソッドはcounterの値を1増やす処理、reset()メソッドはcounterの値を0に初期化します。 あと、ボタンを押したときにボタンのスタイルを変更したいので、押下中を表すフラグとしてc_clicked、r_clickedを定義します。 それぞれ、押したときにtrue、離したときにfalseを設定するメソッドmousedown、mouseupを定義します。 これで、表示用のカウント数とボタンを押したときの処理を実装できました。 HTMLとScriptの連結 まだ表示部分と処理部分が繋がっていないので、ボタンを押しても変化はありません。 ですので、次は<script>で定義した処理を<template>で定義した箇所と繋げていきます。 こんな感じです <template> <div class="home"> <div class="count-area"> <a class="counter-label">{{counter}}</a> </div> <div class="button-area"> <a v-bind:class="{'base cb-released':!c_clicked, 'base cb-pushed': c_clicked}" v-on:mousedown="mousedown('countup')" v-on:mouseup="mouseup('countup')" v-on:click="countup" >count</a> </div> <div class="button-area"> <a class="reset" v-bind:class="{'base rb-released':!r_clicked, 'base rb-pushed': r_clicked}" v-on:mousedown="mousedown('reset')" v-on:mouseup="mouseup('reset')" v-on:click="reset" >reset</a> </div> </div> </template> これでcountボタンを押すとカウント数が1ずつ増えていき、resetボタンを押すと0に初期化されます。 解説 カウント数を表す<a>タグの部分には変数counterの値を表示したいため{{counter}}を追記します。 これで変数counterの値が<a>タグによって表示されるようになります。 続いて、countボタン、resetボタンを表す<a>タグにそれぞれv-bind、v-onを使ってボタンを押したときに表示状態を変更する処理、カウント数を変更する処理を関連付けます。 v-bind:class=***の部分でボタンを押しているかを表すc_clicked、r_clickedの値に応じてスタイルを割り当てています。 また、v-onで、ボタン上でマウスを押したとき、上げたときにフラグの値の更新、クリックが発生したときにカウント数の更新処理を呼び出すように関連付けています。 アトミックデザインを導入 この時点でもカウンタアプリとして動作するのですが1コンポーネントにすべて詰め込まれていて、onmousedownでcountかresetかを見分けるために引数指定していたりでちょっとイケてない感じです。 ですので、アトミックデザインを参考にしてボタンやラベルをコンポーネントとして分割していきます。 アトミックデザインについては以下サイト等をご参照下さい。 今回は簡単なアプリですので、「atoms」、「molecules」、「organisms」の3つに分解するほどではないのと、「原子」、「分子」とかちょっと想像つきにくいので「component(部品)」と「composition(複合部品)」という名前で2つに分けました。 構成としては以下のようにしました。 src ┣ views ┃　┗ Home.vue(HelloWOrld.vueからファイル名を変更しました) ┗ components 　　┣ component 　　┃　┗ Label.vue 　　┗ composition 　　　┣ CountButton.vue 　　　┣ CounterLabel.vue 　　　┗ ResetButton.vue Home.vueからcompositionに作成したコンポーネントを使い、compositionの各コンポーネントはconponentのLabel.vueを使っている構成としました。 例えばこんな構図です。Home.vue→CountButton.vue→Label.vue これで各コンポーネントに実装が分解されて扱いやすくなってきたと思います。 例えば、Label.vueの実装は以下のようにほぼ<a>タグのみの単純な感じになりました。 <template> <a v-on:mousedown="$emit('mousedown')" v-on:mouseup="$emit('mouseup')" v-on:click="$emit('click')" >{{ label }}</a > </template> <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; @Component export default class Label extends Vue { @Prop() public label!: string; } </script> コンポーネントを分割したときにハマってしまったのが、プロパティとイベントハンドリングの部分です。 まずプロパティについてです。 各ボタンに対して表示文字を指定しますが、最終的にLabel.vueまで値が渡る必要があります。 ですので、@Prop()を使って各コンポーネントでプロパティを公開してHome.vueからの設定値をLabel.vueまで伝えていきます。 親コンポーネントから子コンポーネントにプロパティを渡してやる構図です。 これでCountButton、ResetButtonのラベルが表示されるようになります。 次にイベントハンドリングについてです。 ここが最初は中々わからなかったのですが、、、マウスをClickしたイベント等を最初に受け取るのはHTMLで定義された部品です。 今回の場合だと、Countボタンをクリックしたときにclickイベントを最初に受け取るのはLabel.vueとなります。 ですので、プロパティの時とは逆に子コンポーネントから親コンポーネントに向けてイベントを伝えないといけません。 そのため、子コンポーネントでは$emitを使ってイベントを親コンポーネントへ上げています。 この辺りは以下の記事が参考になると思います。 ここまでで、各部品毎のコンポーネントに分割してカウンタアプリが動作するようになりました。 レスポンシブデザインを導入 もう少し改善を加えます。 カウンタ機能としては機能するようになったのですが、ブラウザの幅を狭くするとボタンが見切れてしまうことがあります。 ですので、レスポンシブデザインを導入してブラウザ幅が狭い時にボタンが縦並びになるようにしました。 レスポンシブデザインというのは、複数の異なる画面サイズをWebサイト表示の判断基準にしてページのレイアウト・デザインを柔軟に調整する方法です。 これによって、PC、タブレット、スマートフォン用の画面を1つのHTMLで表現できます。 レスポンシブデザインについての詳細な説明は以下サイト等が参考になると思います。 今回はVutifyを使ってレスポンシブデザインを導入したいと思います。 Vutifyの公式サイトのインストール手順に従って以下コマンドを入力します。 vue add vutify これでVutifyがプロジェクトに追加されて機能が使えるようになります。 そして、Home.vueの<template>内のHTML定義を以下のように修正しました。 <template> <v-container fluid> <div> <v-row > <v-col cols="12"> <CounterLabel :label="count_number" /> </v-col> </v-row> <v-row > <v-col cols="12" xs="10," sm="6" md="6" lg="6" xl="6"> <CountButton @click="countup" /> </v-col> <v-col cols="12" xs="10," sm="6" md="6" lg="6" xl="6"> <ResetButton @click="reset" /> </v-col> </v-row> </div> </v-container> </template> 解説 vutifyではグリッドシステムを備えており、<v-container>、v-row、v-colを使ってレスポンシブデザインを表現していきます。 <v-container>はグリッド全体、v-rowは一行分、v-colはv-row内での1つのセルを表しています。 関係を図示すると以下のような形になります。 上記コードの例では、一行（v-row）を12セル（v-col）に分割してxs～xlまでの各ブラウザ幅サイズにおいてv-colが使うセル数をxsの時は10個、それ以外は6個に指定しています。 （各サイズ毎のブラウザ幅については以下リンクを御参考下さい。） ですので、ブラウザ幅がxs(< 600px)となったときに、CountButton、ResetButtonがそれぞれ一行内でセルを10個使うようにレイアウトされます。 一行内のセル数は12個なので、一行で収まらず改行が入りCountButton、ResetButtonは縦に並ぶ動きとなります。 これで簡単ですがレスポンシブデザインを実現できました。 デプロイ 最後に作成したウェブアプリをfirebaseへデプロイします。 現状では自分のローカル環境だけでした確認できないので例えばスマホで表示してみることはできません。 ですので、firebaseのようにホスティング機能を提供するサービスへWebアプリをアップロードすることでWebアプリが外部公開されて自分のスマホでも見れるようになります。 以下のような構図です。 デプロイするための手順ですが、まずはfirebaseの初期設定を追加します。 以下コマンドを実行することで追加できます。 firebase init 以下のような感じでいくつか確認されるので選択していきます。 私の設定内容は以下の通りです。 どのfirebaseの機能を使うか→ Hostingを選択 public directoryをどこにするか→ お好きな場所へ。デフォルトは./publicとなります。 Single page applicationとして設定するか→Yes Githubを使う設定とするか→私はNoとしました public directory以下のindex.htmlを上書きしていいか→既にある場合はNo これでfirebase設定が出来たので以下のコマンドでデプロイを実行します。 firebase deploy プロジェクトが複数ある場合などはデプロイ先を選ぶ質問が出てきますが選択後にしばらく待つと処理が進みデプロイが完了します。 デプロイ先のURLが表示されると思いますので、ブラウザで指定して開くとカウンタアプリが表示されると思います。 これはfirebase上でホスティングされていますので、ご自身のスマホからでもアクセス可能です。 ※URLは頑張って入力してください。 これで、ようやくデプロイまで完了できました。 おわり Webアプリ開発は初心者ですが取り組んだ内容を記載させて頂きました。 色々書いて長くなってしまいましたが、、、ここまで読んで頂きありがとうございました。 発展的な内容はないかと思いますが、何かお役に立つ情報があれば幸いです。