importfirebasefrom'firebase';// Your web app's Firebase configurationvarfirebaseConfig={apiKey:"自分のAPIキー",authDomain:"project1-aae93.firebaseapp.com",databaseURL:"https://project1-aae93.firebaseio.com",projectId:"project1-aae93",storageBucket:"project1-aae93.appspot.com",messagingSenderId:"598499664640",appId:"1:598499664640:web:fdeefdfb150f0d823009e5"};// Initialize Firebasefirebase.initializeApp(firebaseConfig);exportdefaultfirebase;
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your ch
oices. Database: Deploy Firebase Realtime Database Rules, Firestore: Deploy rules and create indexes for Firestore, Functions: Con
figure and deploy Cloud Functions, Hosting: Configure and deploy Firebase Hosting sites
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: project1-aae93 (project1)
i Using project project1-aae93 (project1)
=== Database Setup
Firebase Realtime Database Rules allow you to define how your data should be
structured and when your data can be read from and written to.
? What file should be used for Database Rules? database.rules.json
? File database.rules.json already exists. Do you want to overwrite it with the Database Rules for project1-aae93 from the Firebas
e Console? Yes
✔ Database Rules for project1-aae93 have been downloaded to database.rules.json.
Future modifications to database.rules.json will update Database Rules when you run
firebase deploy.
=== Firestore Setup
Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.
? What file should be used for Firestore Rules? firestore.rules
Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.
? What file should be used for Firestore indexes? firestore.indexes.json
=== Functions Setup
A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.
? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔ Wrote functions/package.json
✔ Wrote functions/index.js
✔ Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes
> protobufjs@6.8.8 postinstall /Users/kunosouichirou/Desktop/polp/functions/node_modules/protobufjs
> node scripts/postinstall
npm notice created a lockfile as package-lock.json. You should commit this file.
added 233 packages from 180 contributors and audited 662 packages in 7.21s
found 0 vulnerabilities
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔ Wrote public/404.html
✔ Wrote public/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
# Vue CLI のインストール ※すでにインストール済みなら必要なし$ npm install-g @vue/cli
$ npm install-g @vue/cli
# yarn global add @vue/cli$ cd 任意のディレクトリ
$ vue create moment-filter
$ cd moment-filter
Moment.js をインストールします。
# Moment.jsをインストールする$ npm install moment --save# yarn add moment
Moment.js を使ったフィルタを作成します。
importmomentfrom"moment";/* 中略 */filters:{/**
* @param {Date} value - Date オブジェクト
* @param {string} format - 変換したいフォーマット
*/moment(value,format){returnmoment(value).format(format);}}
上記で完成です。簡単。
テストの表示
テストデータを用意して試してみましょう。
data(){constformats=["MMMM Do YYYY, h:mm:ss a","dddd","MMM Do YY","YYYY [escaped] YYYY","LTS"];return{tests:newArray(formats.length).fill(newDate()).map((date,i)=>({date,format:formats[i]}))};}
今回はとりあえず以下のように並べて表示してみます。
<template><divid="app"><h2v-for="({date, format}, index) in tests" :key="index">{{date|moment(format)}}</h2></div></template>
ローカルサーバーを立ち上げます。
$ npm run serve
# yarn serve
フォーマットされた日付が表示できました。
今回作成したコンポーネントの全体は以下のとおりです。
./src/App.vue
<template><divid="app"><h2v-for="({date, format}, index) in tests" :key="index">{{date|moment(format)}}</h2></div></template><script>importmomentfrom"moment";exportdefault{name:"app",data(){constformats=["MMMM Do YYYY, h:mm:ss a","dddd","MMM Do YY","YYYY [escaped] YYYY","LTS"];return{tests:newArray(formats.length).fill(newDate()).map((date,i)=>({date,format:formats[i]}))};},filters:{moment(value,format){returnmoment(value).format(format);}}};</script><style>#app{font-family:"Avenir",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}</style>
// プロパティ a の値 undefined がオブジェクトとして destructure されているconst{a:{b}}={}// Uncaught TypeError: Cannot destructure property `b` of 'undefined' or 'null'.// 2番目の要素 5 が配列として destructure されているconst[a,[b,c]]=[3,5]// Uncaught TypeError: undefined is not a function
$npm info webpack //最新バージョンを確認してみる
$npm install--save-dev webpack@4.40.2 //現時点での最新バージョンをインストール
さらにwebpack-cliをインストールする
$npm info webpack-cli //最新バージョンを確認してみる
$npm install--save-dev webpack-cli@3.3.8 //現時点での最新バージョンをインストール
package.jsonを確認すると、上記インストールされた事が確認できる。
package.json
{"name":"webpackStudy","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/10mi8o/webpack.git"},"keywords":[],"author":"","license":"ISC","bugs":{"url":"https://github.com/10mi8o/webpack/issues"},"homepage":"https://github.com/10mi8o/webpack#readme","devDependencies":{"webpack":"^4.40.2","webpack-cli":"^3.3.8"}}
// メディアチェックletmedias={winobj:[],query:['screen and (max-width: 559px)',//SP'screen and (max-width: 959px) and (min-width: 560px)',//TABLET'screen and (min-width: 960px)',//PC],removeSpace:function(s){// スペースを除去するやつreturns.replace(/\s/g,'');}};// 切り替えイベントfunctioncheckBreak(query){if(medias.removeSpace(query.media)===medias.removeSpace(medias.query[0])&&query.matches===true){// spの処理console.log('sp');}if(medias.removeSpace(query.media)===medias.removeSpace(medias.query[1])&&query.matches===true){// tabの処理console.log('tab');}if(medias.removeSpace(query.media)===medias.removeSpace(medias.query[2])&&query.matches===true){// pcの処理console.log('pc');}}// ロード時実行document.addEventListener('DOMContentLoaded',function(){for(leti=0;i<medias.query.length;i++){medias.winobj[i]=window.matchMedia(medias.query[i]);medias.winobj[i].addListener(checkBreak);}});
