年末にTwitter上で見かけた達人出版会のセールで Vue.jsとFirebaseで作るミニWebサービス (Webサービスを作る本) を買いました。
50% off!! purchased bunch of ebooks on https://t.co/uKRiB5P95l 📕 #達人出版会 @tatsu_zine pic.twitter.com/6QFN4L36MY
— Eiji Shinohara (@shinodogg) December 25, 2018
尚、本ブログは私の個人的なものであり、所属企業・部門等とは関係ございませんmm
#Webサービスを作る本 なので、webservicecreate というディレクトリを作りました。
$ mkdir webservicecreate
$ cd webservicecreate/
vueコマンドを使ってプロジェクトを作ります。
$ vue init webpack-simple doggmarkdown
? Project name doggmarkdown
? Project description A Vue.js project
? Author shinodogg <shinodogg@gmail.com>
? License MIT
? Use sass? Yes
vue-cli · Generated "doggmarkdown".
To get started:
cd doggmarkdown
npm install
npm run dev
なんか色々言われてるけど、とりあえず起動はしましたw
$ npm install
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
> fsevents@1.2.4 install /Users/eshinoha/learning/webservicecreate/doggmarkdown/node_modules/fsevents
> node install
[fsevents] Success: "/Users/eshinoha/learning/webservicecreate/doggmarkdown/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote
> node-sass@4.11.0 install /Users/eshinoha/learning/webservicecreate/doggmarkdown/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/darwin-x64-59_binding.node
Download complete ⸩ ⠋ :
Binary saved to /Users/eshinoha/learning/webservicecreate/doggmarkdown/node_modules/node-sass/vendor/darwin-x64-59/binding.node
Caching binary to /Users/eshinoha/.npm/node-sass/4.11.0/darwin-x64-59_binding.node
> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/eshinoha/learning/webservicecreate/doggmarkdown/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
> node-sass@4.11.0 postinstall /Users/eshinoha/learning/webservicecreate/doggmarkdown/node_modules/node-sass
> node scripts/build.js
Binary found at /Users/eshinoha/learning/webservicecreate/doggmarkdown/node_modules/node-sass/vendor/darwin-x64-59/binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
added 940 packages from 638 contributors and audited 9455 packages in 29.864s
found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
784f4396d814:doggmarkdown eshinoha$ npm run dev
> doggmarkdown@1.0.0 dev /Users/eshinoha/learning/webservicecreate/doggmarkdown
> cross-env NODE_ENV=development webpack-dev-server --open --hot
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
localhost:8080でそれっぽいのが。
![Screen Shot 2019-01-04 at 15.23.35](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc403e95f08_44777838750_fa7215f11f_z.jpg)
firebaseのプロジェクトを作りつつ、index.htmlにソレっぽい情報を追加したり、ローカルにfirebase用のツールをインストールしたり。
$ npm install -g firebase-tools
firebase login で権限追加してあげて。
![Screen Shot 2019-01-04 at 15.41.12](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc403f3ebb0_45681338355_590467efe8_z.jpg)
firebaseなプロジェクトを作成
![Screen Shot 2019-01-04 at 15.43.15](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc40402ae71_45871559184_f85eb4a49c_z.jpg)
無事にfirebase deployできました
![Screen Shot 2019-01-04 at 16.20.30](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc4040b75eb_46595996871_d3430b8050_z.jpg)
いよいよvueコンポーネントを追加していきます。ログイン前。
![Screen Shot 2019-01-04 at 16.35.38](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc404165ff9_45872019374_85580172f0_z.jpg)
続いてfirebaseでGoogle認証
![Screen Shot 2019-01-04 at 16.35.58](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc4041e4dd3_32721937578_931a72bb07_z.jpg)
Home.vueにmethodsを追加してGoogleアカウント認証に遷移するように。
![Screen Shot 2019-01-04 at 16.42.14](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc40427c7e6_46544335002_3865762e58_z.jpg)
ログイン機能が出来たら、次はログアウト機能。propsを使って親から子へ値を引き継ぐ的なところは興味深げだけど、Vuexというライブラリを使ってデータをストアして色んなコンポーネントから値をホゲホゲみたいのが複雑なケースには推奨される、とのこと。
![Screen Shot 2019-01-04 at 17.04.23](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc4043151f8_45682095155_bb6a5e01b3_z.jpg)
そしていよいよ入力したデータをfirebaseに登録したり削除したり〜、の前に今回はマークダウン用のエディタアプリなので、markedというツールをインストールしてマークダウンからHTMLに変換してくれる君をインストール
$ npm install --save-dev marked
+ marked@0.6.0
簡単にマークダウンのプレビューが導入出来るの、すごい。v-modelを使ってtextareaのデータを指定した変数に格納することをデータバインディングと呼ぶ、とのこと。styleタグにscopedって記述すれば、そのコンポーネント内でしか適用されないので、他とバッティングしないとかメリットが実感できるようになってきた。
![Screen Shot 2019-01-04 at 17.16.26](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc40439c5a9_46544672472_78f6f4faba_z.jpg)
ガーッツリ写経してマークダウンのリスト表示が出来るようになった!
![Screen Shot 2019-01-04 at 17.59.18](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc4044250f2_45872741054_6461a7e067_z.jpg)
そして、リストからメモを消せるようになった!
![Screen Shot 2019-01-04 at 18.08.34](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc4044b7c14_32722735788_c8441b455d_z.jpg)
DBにデータが保存できた
![Screen Shot 2019-01-04 at 18.21.52](https://shinodogg.com/wp-content/uploads/2020/12/7928_img_5fcc4045b81a9_46545286782_2fa8baa625_z.jpg)
ボタンを押さなくてもCtrl + Sで保存できるようになったりしつつ、今日のところは一旦5章まで。
いやー、しかし勉強になるなぁ。そして書いたコードが動くのはやっぱり楽しいので、2019年は40歳になりますが(前厄らしいのでお祓い行かなきゃ)、沢山コード書いていきたいと思います 🙂
amzn_assoc_ad_type =”responsive_search_widget”; amzn_assoc_tracking_id =”diary045-22″; amzn_assoc_marketplace =”amazon”; amzn_assoc_region =”JP”; amzn_assoc_placement =””; amzn_assoc_search_type = “search_widget”;amzn_assoc_width =”auto”; amzn_assoc_height =”auto”; amzn_assoc_default_search_category =””; amzn_assoc_default_search_key =”Vue.jsとFirebaseで作るミニWebサービス”;amzn_assoc_theme =”light”; amzn_assoc_bg_color =”FFFFFF”; //z-fe.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&Marketplace=JP