来年の目標

この記事は『真・エンジニアの登壇を応援する会』 Advent Calendar 21日目の記事です。（https://adventar.org/calendars/3064）

昨日は、KANEさんの2019年やりたいことでした。

かつ、この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の21日目の記事です。

目次

どんな内容を書けばいいの？

このカレンダーは、少し気が早いですが来年の目標をつづる為に作られました。 今年1年の行動を振り返り、そしてあなたが来年どう成長したいかについて是非教えてください。 リンクが貼れればアウトプットの形式については何でも構いません。 クリスマスまで毎日届けられる皆さんの決意を楽しみにお待ちしています。

ということで、来年の目標を決めてみます。来年の目標を決めるにあたって、KPTをしてみたいと思います。

KPTとは

こちらをご覧ください

kuranuki.sonicgarden.jp

Keep

良かったこと・継続したいことを書き出します。

週1でブログを更新した

無事に1年通して週1回のブログ更新を続けることが出来ました（まだあと1週ほど残っているけど）。 自分でやるって決めて1年間継続できたことってあっただろうか…素直に自分を褒めたいと思います。100記事も超えました。

yoshitaku-jp.hatenablog.com

3つホッテントリに入った

この経験は本当に嬉しかったです。

3ヶ月続けた kakakakakku ブログメンティーを卒業しました - よしたく blog

技術書典5に参加してきた！！ - よしたく blog

今年のアウトプットを振り返る - よしたく blog

アドベントカレンダーを立てた

write-blog-every-week Advent Calendar 2018のアドベントカレンダーを立てました。 皆さんの協力があり、無事にすべて埋めることが出来ました。

去年は自社のアドベントカレンダーを立てましたが枠が全て埋まらず悔しい思いをしたので純粋に嬉しいです。

一人アドベントカレンダーをやった

yoshitaku_jpの1人 Advent Calendar 2018

一人アドベントカレンダーというものをやりました。 現時点ですが、無事に一日も落とすことなく更新できたことは良かったと思います。 師走で忘年会なども重なり忙しくなるだろうと予想したので、ストックを用意して対応できました。 最終的にストックが足りなくなってしまったのは見通しが甘かったです。

LTをした

11月に初LTをしました。12月もあるので頑張ります。

勉強会の運営リーダーになった

これは年をまたぐのですが、2月におこなうLT大会のリーダーとなりました。 鋭意準備中です。ここで得た経験を別のところでも生かしていきたいです。

AppleWatchのリングを閉じ続けた

ムーブゴールは256日間閉じ続けています。台風で歩くのが難しい日も隙間を見つけて外に飛び出してよかったです。

Problem

良くなかったこと・継続したくないことを書き出します。

勉強会に行き過ぎた

勉強会に行くのが悪ではないですが、やった気になってしまうので難しいと思います。同じ思いをしている人もいるんじゃないだろうか… もくもく会は手を動かすのでいいとして、その他の勉強会をどういう基準で申し込むか精査したいと思います。

ブログでやってみた系が多かった

チュートリアル程度のものをやってみた系が多かったです。 これもそれ自体は悪くないのですが、自分のやりたい方向性とあっているかは検討していかなければならないと思いました。

ブログの質が保てなかった

書き方がぶれていたと思います。 12月の一人アドベントカレンダーで改めて気がついて、エラー報告のテンプレート化やTextlintツールを使ってチェックする体制を整えています。

技術ネタのLTがなかった

11月12月しか無いので難しかったですが、課題としてあげました。 自由研究としてハードルの低いところでやらせていただけた次は成長を見せる意味でも技術ネタをやっていきたいと思います。

自分のこれからの方向性が定まらなかった

全てに関するザックリとしたことになってしまいますが、自分がどうなりっていきたいかが定まりませんでした。少なくとも現状維持は嫌なので、転職や社内転職を検討していきます。

Try

来年取り組んでみたいことを書き出します。

技術ネタで週1本ブログを書く

勉強会行った・雑記は自分の中でカウントしないようにしてみます。 せっかく週1を継続できたので技術の濃度を上げてみようと思います。

ブログの質にこだわる

キャプチャを整えたり、OGPをちゃんと設定したりいきます。LT資料を作っているときに気が付きましたが、作り込まれている資料はそれだけで目が行くと思います。ブログの内容が良かったとしても、ブログへたどり着いてもらわないとダメですし、その導線を整える必要があるなと感じました。

自分で手を動かし試行錯誤する

やってみた系が多かったことに対するTryです。 一つのことをやってみただけではなくて組み合わせたりして、価値を届けていけたらいいと思います。この記事がささったときは自分の中では意外でした。こういうのを増やしていきたい。

yoshitaku-jp.hatenablog.com

月1本LTする

せっかく11月・12月と継続できているので、1月・2月と続けていきたいと思います。出られる場の探し方とかあった教えてほしいです。

週に1回振り返る時間を設ける

「自分のこれからの方向性が定まらなかった」ことに対するTryです。大前提として方向が定まったあとですが、そのベクトルに向かって進めたかをしっかり振り返る時間を確保したいと思います。

勉強会・イベントの開催

勉強会の運営リーダーになったので、継続して取り組んでみたいと思います。せっかくブログに関するコミュニティに関われているので、ブログの書き方とかのち県を共有しあう場なんか作れたら最高じゃないかと思います。勉強会ではないのですが、単純にエンジニア周りの人とフットサルとかしたいです。体動かしましょう。

ヘルスケアアプリの言いなりになってみる

AppleWatchをつけていい感じに回っているので、AutoSleepをインストールしたりして自分自身をハックしていこうと思います。一番パフォーマンスが出る条件とか知れたら面白いな。

まとめ

ざっくりと振り返ってみました。 このエントリは適宜追加して更新していきたいと思います。

自分で振り返ることも限界があるので、新しい気づきを与えてくださる方がいらっしゃいましたらご連絡ください。

Cloud Firestoreを触ってみた

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の20日目の記事です。

目次

tl;dr

• Cloud Firestoreを触ってみた
• データの挿入と削除をやってみた

先日RealtimeDatabaseを触りましたが、今回はCloud Firestoreを触ってみます。

201812/20日現在、ベータ版となっていますが今後RealtimeDatabaseから置き換わっていくのかなと思っています。

yoshitaku-jp.hatenablog.com

準備

alligator.io

自分で試行錯誤していたのですが全然うまくいかなかったので、上記サイトで公開されていたチュートリアルを実施してみました。

• ディレクトリの構成
• Todo.vueのソース
• router/index.jsのソース

Vue-firestoreのインストール

今回はこちらを使います。

github.com

自分は前回からの続きでしたのでnpm install vue-firestore --saveを実行しました。

今回がはじめての方はnpm install @firebase/app @firebase/firestore vue-firestore --saveを実行しましょう。

ディレクトリ構成

今回のディレクトリ構成は下記の通りです。Reptile.vueを適切に読み込めれば、どのような構成でも大丈夫だと思います。

tree -I "node_modules|test|assets|config|static|README.md|build" -L 3
.
├── index.html
├── package-lock.json
├── package.json
└── src
    ├── App.vue
    ├── components
    │   ├── HelloWorld.vue
    │   ├── Reptile.vue
    │   ├── Signin.vue
    │   ├── Signup.vue
    │   └── Todo.vue
    ├── main.js
    └── router
        └── index.js

main.js

全体

import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase'
import VueFirestore from 'vue-firestore'

Vue.config.productionTip = false

// Initialize Firebase
//Firebaseの値は置き換えましょう
var config = {
  apiKey: process.env.NODE_API_KEY,
  authDomain: process.env.NODE_AUTH_DOMAIN,
  databaseURL: process.env.NODE_DATABASE_URL,
  projectId: process.env.NODE_PROJECT_ID,
  storageBucket: process.env.NODE_STORAGE_BUCKET,
  messagingSenderId: process.env.NODE_MESSAGING_SENDER_ID
}
const firebaseApp = firebase.initializeApp(config)

const db = firebaseApp.firestore()
db.settings({timestampsInSnapshots: true})
Vue.use(VueFirestore)

export default db

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Firestoreの読み込み

Firestoreを読み込みます。db.settings({timestampsInSnapshots: true}) この設定はないといけないようです。

const db = firebaseApp.firestore()
db.settings({timestampsInSnapshots: true})
Vue.use(VueFirestore)

Reptile.vueのソースコード

<template>
  <div id="app">
    <div>
      <input type="text"
        v-model="newReptile"
        @keyup.enter="addReptile">
      <button  @click="addReptile">
        Add Reptile
      </button>
    </div>
    <ul class="reptileList">
      <li v-for="reptile in reptiles"  :key="reptile.id">
        {{ reptile.name }} -
        <button @click="deleteReptile(reptile)">
          Remove
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
import db from '../main'

export default {
  name: 'app',
  data () {
    return {
      reptiles: [],
      newReptile: ''
    }
  },
  firestore () {
    return {
      reptiles: db.collection('reptiles')
    }
  },
  methods: {
    addReptile: function () {
      this.$firestore.reptiles.add(
        {
          name: this.newReptile,
          timestamp: new Date()
        }
      )
      this.newReptile = ''
    },
    deleteReptile: function (reptile) {
      this.$firestore.reptiles.doc(reptile['.key']).delete()
    }
  }
}
</script>

<style>
.reptileList {
  list-style: none;
}
</style>

firestore ()

Cloud Firestore上の、reptilesコレクションから値を持ってきています。Vue側のreptiles変数にいれて、表示しています。

  firestore () {
    return {
      reptiles: db.collection('reptiles')
    }
  },

methods/createTodo、methods/deleteTodo

この辺はあまり難しいことをしていないです。

  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }

デモ

まとめ

• RealtimeDatabaseとは違う実装なので、違いをまとめていきたい
• 個人的にはコンソール画面での編集はCloud Firestoreが使いやすいと感じている

yoshitaku-jp.hatenablog.com

【解決】Twitterの検索でURLにハイフンが入っていると検索できない問題

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の19日目の記事です。

tl;dr

• Twitterで自分のブログyoshitaku-jp.hatenablog.comを検索したら出てこなかった
• URLにハイフンが入っているのが原因だった
• url:"yoshitaku\-jp.hatenablog.com" で検索に出てきた！

エラー？内容

Twitterで自分のブログyoshitaku-jp.hatenablog.comを検索したら出てきませんでした。

なぜ気がついた？

自分のブログがTwitter上でシェアされたときに通知が欲しかった

tadaken3さんが下記の記事で述べていた、「自分のブログがシェアされた通知する」をやってみたかったのが始まりでした。

tadaken3.hatenablog.jp

IFTTTは使ったことあったので、Twitterで特定の文字列を検索して、Slackに通知を送るんだなーということはすぐに理解できたのですが…

他の方は通知が来ているようでしたが、自分は通知が一向に来ませんでした…

解決までの過程

yoshitakuにs**tという文字が隠れているので弾かれている？

ゲームのアカウントを作るときに結構弾かれるので疑っていましたが、違いました。

Twitterの検索窓で試行錯誤する

調査に協力してくれた方がTwitterの検索窓でも出力されないことから、yoshitaku-jp.hatenablog.comの文字列が原因じゃないかという話になりました。

yoshitaku-jp.hatenablog.comで検索

でない

url:"yoshitaku-jp.hatenablog.com" で検索

でない

解決策

url:"yoshitaku\-jp.hatenablog.com" で検索

出た！！！ハイフンが原因でした！ハイフンをエスケープすれば検索結果に出てきます！

余談

yoshitaku\-jp.hatenablog.comはダブルクォートで囲っていないのでダメでした。ハイフンを付けている人はurl:"hoge\-hoge"の形式でやりましょう

まとめ

• URLにハイフンが入っているのが原因だった
• url:"yoshitaku\-jp.hatenablog.com" で検索に出てきた！
• 最終的にはurl:"yoshitaku\-jp.hatenablog.com" -from:@yoshitaku_jp -rt で検索している
  • -from:@yoshitaku_jpは自分の投稿を除く
  • -rt はリツイート除く

シェアしてくれた人を見つけて、感謝の言葉をかけにいきましょう！！！

Isaaxフォントを使ってみた

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の18日目の記事と、

https://qiita.com/advent-calendar/2018/isaax の18日目の記事です

tl;dr

• Isaaxフォントを使ってみた
• Vueでのフォントファイルの使い方がわかった
• かっこよくてお気に入り

Isaaxフォントとは

http://isaax-font.xshell.io/

Isaax Font はアポロ計画やスペースシャトル計画など20世紀後半の宇宙開発計画を意識したフリーフォントです。未知の領域を探索し開拓する人の意志とテクノロジーの力をデザインに投影しています。どなたでも自由に利用することが可能です。

以前Isaaxのアドベントカレンダーを書いているときに、Isaaxでフォントを出していることを知りました。 眺めていたらかっこいいですし、コンセプトもよかったので早速使わせてもらいます。

vueでフォントファイルを使うために

ディレクトリの構成

今回は./src/assets/fontsディレクトリにIsaaxフォントを配置します。

tree -I ".cache|dist|node_modules"
.
├── index.html
└── src
    ├── App.vue
    ├── Posts.vue
    ├── assets
    │   └── fonts
    │       ├── IsaaxOrigin-Regular.woff2
    │       └── IsaaxSans-Regular.woff2
    ├── components
    │   ├── PageFooter.vue
    │   └── PageHeader.vue
    └── index.js

.src/components/PageHeader.vueにフォントファイルを読み込む設定

scssの@font-faceで、./src/assets/fontsディレクトリに配置したIsaaxフォントを指定します。さらに、h1でfont-family: 'IsaaxFont';を指定することでフォントが切り替わります。

<template>
    <nav class="page_header">
      <h1>Write Blog Every Week</h1>
    </nav>
</template>

<script>
export default {
  name: 'page-header',
}
</script>
・
<style lang="scss" scoped>
@font-face {
  font-family: 'IsaaxFont';
  src: url('~src/assets/fonts/IsaaxOrigin-Regular.woff2');
}

h1{
  font-family: 'IsaaxFont';
  text-align: center;
  font-size: 64px;
}


</style>

Write-Blog-Every-Weekのサイトに使ってみて比較

フォントなので実際に見てもらいたいです。

未使用

IsaaxFont使用

かっこいいですね！気に入ってます！

まとめ

• IsaaxFontかっこいい！
• scssを使って、フォントファイルを読み込み使った。
• フォントを変えるだけで見た目が凄く変わるのでこれからは注目してみようと思う！

今年のアウトプットを振り返る（趣味）

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の17日目の記事と、 Everyone Outputer Advent Calendar 17日目の記事です

adventar.org

結構真面目な記事も並んでいる中、趣味について語っていらっしゃったので、自分も今年のアウトプットを振り返る（趣味）として、この流れに乗りたいと思います。

真面目なものはこちらをご覧いただければ

yoshitaku-jp.hatenablog.com

サッカー

実際に体を動かすサッカーとして

今年は4チームに加入し大会に出る回数が増えました。交友関係も広がったのですごく良かったです。自分を磨いてもっとチームに貢献していきたいですね。

観るサッカーとして

海外はLiverpoolというチームが好きです。今シーズンはリーグで1位を走っており非常に楽しいです（2018/12/17現在）。今シーズン優勝できそうであれば、学生の時以来にイングランドへ飛び立ちたいと思います。またチャンピオンズリーグでは準優勝という悲しい結果となってしまいましたが、いつか優勝できることを願っています。

日本国内のJリーグではガンバ大阪というチームが好きで、今シーズンは2試合観戦してきました。大阪での観戦はなく、佐賀と兵庫まで応援しにいきました。有名なイニエスタ・フェルナンド・トーレスを見てきました。旅行も兼ねていて楽しかったです。関東の試合はもっと見に行かないといけないなと感じています。

技術として

ワールドカップのデータがGitHubにあるのはご存知でしょうか？

github.com

なんかやってみたいなと思ってやれていないですが、こういうデータをもとに新しい戦術が生まれていってもっともっとサッカーは面白くなるんだろうなと考えるとワクワクします。まずはforkしている人たちのリポジトリを覗いてみようと思います。

競馬

応援として

今年は馬主デビューしました。一口馬主です。今後の人生考えたときに馬主なんてやってる余裕ないよなと思ったので、勢いで申し込んでみました。正確には2017年に出資しはじめて、2018年に馬が走ってくれました。夏に新潟まで応援しに行って、残念ながら2着でした。競馬というものを見はじめて8年、毎週末やってくるレースですが「一つ勝つことの難しさを」改めて感じました。さらには、勝つためにどれだけの人が見えないところで頑張っているのかを想像したら涙が出てきました。世の中には見えないところで頑張っている方が大勢いるんだなということが知れてよかったです。

技術として

ギャンブルと機械学習って面白いんじゃないかと思っています。 pydataに行って話も聞いてきました。

競艇の「みずはのめ」もずっと追っています。

v2.mizuhanome.net

競馬は毎週レースが行われてデータが増えるので仮設と検証ができて面白いとか、自分にはない視点で面白かったです。競艇は走る数が決まっているので、走る数が変動する競馬とは違ってやりやすいなんて話も聞きました。

まとめ

自分の趣味も少し語りつつ技術と結びつけてみました。来年は自分の趣味に関連してなにかアウトプットできたらいいなと思っています。ただただプログラミングをやるのもいいですが、自分の趣味に関連して探すとまた違った面白さがあるかもしれませんよ？

OSS Gateで司会をしてきた

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の16日目の記事です。

目次

tl;dr

• OSS Gateで司会をした。
• 今年でビギナー、サポーター、司会とすべての立場を経験できた
• 来年はもっとOSSに貢献する

OSS Gateとは

oss-gate.github.io

OSS Gate | Doorkeeper

「OSS Gate」とはOSS開発に参加していない人が参加する人に変わる「入り口」を提供する取り組みです。
OSS開発に未参加の人向けに参加方法を伝える場を継続的に提供することにより、OSS開発に参加する人を増やすことができるのではないか。
それを実現することが「OSS Gate」という取り組みの目的です。

過去の自分の参加会はこちらです

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

OSS Gate東京ワークショップ2018-12-15

oss-gate.doorkeeper.jp

というわけで、OSS Gate東京ワークショップ2018-12-15に参加してきました。 会場の提供はSIOS様です。ありがとうございます。

お菓子も提供していただきました。

広い会場

タックス

初めて司会をした

初めて勉強会で司会をしました。今回はOSS Gateで共有されているスライドがありましたので、それを利用しました。

slide.rabbit-shocker.org

tl;drにも書きましたが今年の中だけで、ビギナー、サポーターを経験していたので、進行中に自分の体験談を織り交ぜることができました。基本的には共有スライドを読むだけでいいようになっていますが、それだけでは面白くないので自分なりに体験談を交えて説明していきました。この点は他の人と差別化できてよかったかなと思います。Github上に、ビギナーで参加したときのメモも残っていたので、適宜利用することができました。今後の初司会者の方のための参考となれば幸いです。

スライドの中でいくつか直したいところもあったので、OSS Gate振り返り会でフィードバックを出してみようと思います。

今後

OSS Gateとしては、明日（17日・月曜日）に「もくもく会&ミートアップ」があります。急ではありますが、参加できる方はぜひご参加ください。

oss-gate.doorkeeper.jp

個人としては、OSSに対してそこまで絡めなかったことが反省点なので、来年は2ヶ月に1回PR出せたらいいなと思っています。

今回のワークショップの中での意見にありましたが、Githubであがっている以外のOSSにも触れていったほうがいいんじゃないかというものがありました。Github以外にもあるんだろうなということは理解していましたが、そこにたいしてどう貢献していけばいいのかというのがわからなかったので、もっと視野を広げていければと思いました。

まとめ

• 1年間通してOSS Gateに継続参加した
• OSSにはあまり貢献できなかったが、OSS Gateには貢献できたのでよしとする
• 司会は楽しい
• 1年間ありがとうございました

Macで簡単にgifを作ろう！

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の15日目の記事です。

tl;dr

• Macで簡単に画面の録画ができる
• gifの作成もできる
• ブログ上でのデモ動画はこうやって作ろう！

目次

1. 画面の録画のやり方
2. gifの作成方法
   1. ffmpegとimagemagickのインストール
   2. gifの作成
3. まとめ

画面の録画のやり方

Mojaveからはcommand + shift + 5で画面の録画をすることができます。

• 画面全体の収録
• 選択部分の収録

の２つから選択することができます

余談ですが、スクリーンキャプチャを撮る方法はcommand + shift + 3またはcommand + shift + 4です。

gifの作成方法

ffmpegとimagemagickのインストール

brew install ffmpeg
brew install imagemagick

gifの作成

cd //gifにしたい動画のあるディレクトリに行きます
mkdir result
ffmpeg -i tmp.mov -an -r 10 ./result/%04d.png
cd result
convert *.png -resize 40% output_%04d.png
convert output_*.png result.gif

参考にさせていただきました。 https://qiita.com/kosuke0820/items/ebeb0c59b603c7224eac

注意

これはエンジニア向けに書いているので、アップロード先にはてなブログを想定しています。はてなブログは1ファイル10MBまでしか写真を投稿できないので、長い動画は短くしたり画質を落とす必要があります。（20181215現在）

自分は長めの動画を作ってしまい、何故アップロード出来ないか必死に原因究明していました…

まとめ

スクリーンキャプチャを何枚も撮って貼り付けるのは冗長的になることも多いし、デモ動画は実際に動いているところを貼り付けて見てもらうほうが早いと思います。

Firebase RealtimeDatabaseで実際に動いているところを見せたいときに活用しました。

Firebase RealtimeDatabaseを触ってみた

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の14日目の記事です。

tl;dr

• Firebase RealtimeDatabaseを触ってみた
• データの挿入と削除をやってみた

準備

• ディレクトリの構成
• Todo.vueのソース
• router/index.jsのソース

ディレクトリ構成

今回のディレクトリ構成は下記の通りです。Todo.vueを適切に読み込めれば、どのような構成でも大丈夫だと思います。

yoshitaku$ tree -I "node_modules|test|assets|config|static|README.md|build" -L 3
.
├── index.html
├── package-lock.json
├── package.json
└── src
    ├── App.vue
    ├── components
    │   └── Todo.vue
    ├── main.js
    └── router
        └── index.js

Todo.vueのソースコード

<template>
    <div class="todo">
        <h1>タスクの一覧</h1>
        <div>
            <input type="text" v-model="newTodoName">
            <button type="submit" v-on:click="createTodo()">タスクの作成</button>
        </div>
        <ul v-for="(todo, key) in todos" :key="todo.id" >
            <li>
              <input class="toggle" type="checkbox" v-model="todo.isComplete">{{ todo.name }}
              <button type="submit" v-on:click="deleteTodo(key)">タスクの削除</button>
            </li>
        </ul>
    </div>
</template>

<script>
import firebase from 'firebase'

export default{
  name: 'Todo',
  created: function () {
    this.database = firebase.database()
    this.todoRef = this.database.ref('todos')

    var _this = this
    this.todoRef.on('value', function (snapshot) {
      _this.todos = snapshot.val()
    })
  },
  data () {
    return {
      database: null,
      todoRef: null,
      newTodoName: '',
      showTodoType: 'all',
      todos: []
    }
  },
  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }
}

</script>

<style scoped>
ul {
  list-style: none;
}
</style>

Firebase RealtimeDatabaseとの接続

個別に見ていきます。createdでインスタンスを作成したときに、データベースへ接続し保存されているデータを取得してきます。 this.todoRef = this.database.ref('todos')にFirebase Consoleで定義した名前を設定します。（Firebase RealtimeDatabaseの設定の項で再度説明）

  created: function () {
    this.database = firebase.database()
    this.todoRef = this.database.ref('todos')

    var _this = this
    this.todoRef.on('value', function (snapshot) {
      _this.todos = snapshot.val()
    })
  },

Todoの作成と削除

methodsにcreateTodoとdeleteTodoを設定しています。 createTodoは画面上のテキストボックスnewTodoNameに入力された値を引数に、todoRefにpushしています。終わったら、テキストボックスnewTodoNameを空欄でクリアしています。deleteTodoはkeyを引数にremoveしています。

  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }

router/index.jsのソース

これは、Todo.vueとURLを紐づけています

import Vue from 'vue'
import Router from 'vue-router'
import Todo from '@/components/Todo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/todo',
      name: 'Todo',
      component: Todo
    }
  ]
})

Firebase RealtimeDatabaseの設定

データベースのルールタブを開きます。画像内のtodosに".read": "true"と".write": "true"と追加します。

todosの名前は好きな名称で大丈夫ですが「Firebase RealtimeDatabaseとの接続」で指摘したように、接続の際に指定するのでそこだけは一致させるようにしてください。

デモ

デモ1

デモ2

まとめ

• リアルタイムで変化していくのをみるのは業務上ないので新鮮だった。
• 今後のアプリ作成に生かしていきたい

他のFirebase系

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

【解決】npm run devでwebpack-dev-serverのエラー

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の13日目の記事です。

tl;dr

• TypeError: Cannot destructure propertycompileof 'undefined' or 'null'.が発生
• webpack-dev-server@3.0.0 をダウングレードして解決

エラー内容

TypeError: Cannot destructure propertycompileof 'undefined' or 'null'.が発生しました。

発生の状況

npm run devを実行したらエラー

上記のエラーはnpm run devの実行時に出力されました。

yoshitaku$ npm run dev

> vue_firebase_auth_test@1.0.0 dev /Users/takuyayoshimura/workspace/vue_firebase_auth_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

TypeError: Cannot destructure property `compile` of 'undefined' or 'null'.
    at addHooks (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/lib/Server.js:114:49)
    at new Server (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/lib/Server.js:127:5)
    at startDevServer (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/bin/webpack-dev-server.js:355:14)
    at processOptions (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/bin/webpack-dev-server.js:309:5)
    at internalTickCallback (internal/process/next_tick.js:77:7)
    at process._tickCallback (internal/process/next_tick.js:47:5)
    at Function.Module.runMain (internal/modules/cjs/loader.js:778:11)
    at startup (internal/bootstrap/node.js:300:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:826:3)

解決までの過程

TypeError: Cannot destructure property compile of 'undefined' or 'null'.で調べる

GitHubのWebpackのところへissueが上がっていました。

github.com

1 - Upgrade webpack to v4, you must change the webpack.config.js file for compatibility. or
2 - Downgrade webpack-dev-server to exactly v3.0.0 as @Nufeen said.

「webpackのバージョンを4にあげてwebpack.config.jsを編集するか、3.0.0にダウングレードをしてください」と書いてありました。

解決策

webpack-dev-serverをダウングレード

今回はnpm install --save-dev webpack-dev-server@3.0.0 でダウングレードしてみます。

yoshitaku$ npm install --save-dev webpack-dev-server@3.0.0
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.0.0 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.

+ webpack-dev-server@3.0.0
added 26 packages from 8 contributors, removed 49 packages, updated 10 packages and audited 31156 packages in 22.405s
found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

npm audit fixが気になりますが、実行すると再度バージョンが上がってしまうので、一旦思いとどまります

バージョンが下がったので、npm run dev を実行してみます。

yoshitaku$ npm run dev

> vue_firebase_auth_test@1.0.0 dev /Users/takuyayoshimura/workspace/vue_firebase_auth_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in -1970ms                                                                                                                                                                            8:32:14

 I  Your application is running here: http://localhost:8080

無事になおってwebpack-dev-serverを使うことが出来ました。

今年のアウトプットを振り返る

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の12日目の記事です。

かつ、『エンジニアの登壇を応援する会』 Advent Calendar 12日目の記事です。（https://adventar.org/calendars/2993）

11日目は、どももさんでした。お疲れ様でした。

LTに初めて申し込むときの不安要素とその取り除き方 - りんごとバナナとエンジニア

さらに「よしたくブログ」の100記事目になります。とうとう3桁のりました。よく続いたなぁ。

今年のアウトプットを振り返るまえに

今年28歳になり社会人としても5年目を迎え、今までのことをザーッと振り返ってみようと思います。

就職して配属した直後ぐらいまで

大学では会計学を学びITと関わる機会はありませんでしたが、ご縁があり中小のIT企業（いわゆるSES企業）に就職しました。 配属されてからは「やさしいJava」を1つ渡され「読み終わったら一人で掲示板を作ってみて」と言われ立ち向かう日々でした。 突然インストールされたEclipseに頭を悩まし、TomcatやDB接続するためのドライバーについてわからないままネットの情報を駆使して生き延びてきました。 土日もほとんどの時間を調べ物に費やし、やっと掲示板が出来たと思ったらSQLインジェクションが考慮されてないねと言われ、「？？？」が生まれるなかさらに調べ続ける毎日でした。 表現としてインパクトがあるように書いていますが、自分としては「こんな事ができるのか！！！」「こういうようにやれば解決するのか！！！」と毎日楽しかったです。 さらに、情報系卒業でないことを先輩も理解してくれていたので気長に育ててくれたように感じています。

実際の案件にアサインされてから

案件にアサインされてからもSDKの使い方や、ネットワーク、仮想技術など、わからないことが多く常に調べていました。 1個調べると10個わからないことが出てくる状態で、GoogleChromeのタブは常にパンパンでした。 BtoB系の製品だとインターネットに情報が出ていないので、似たような情報を探して、自分なりに考え対応しました。

2年・3年・4年と過ごしてきて

このような感じで、就職してからはわからないことだらけな上に常に調べて対応する日々でした。 もちろん2年・3年・4年と時を過ごすうちに、自分にもわかる・理解できることが増えていきました。それと同時に、こんな気持も芽生えてきました。

自分もなにか周りに貢献したい！！！

今年のアウトプットを振り返る

今年は週1でブログを更新しました。技術のことを中心に書き続けてきました。これには2つの理由があります。

1. 転職活動でアウトプットの実績として使う
2. インターネットへの恩返し

転職活動でアウトプットの実績として使う

これは見出しの通りです。

• 自分はいろいろな技術について調べる意欲
• 習慣化させ継続する力

を見せられたらいいなと思ってやってきました。 継続してこれたのには自分ひとりの力だけではありません。 3ヶ月間ブログメンターをしていただいたkakakakakkuさんや、write-blog-every-weekのみなさんには感謝しかありません。 加えて、自分のブログにリアクションをくださった方ありがとうございます。 リアクションがあるということだけで、非常にモチベーションが上がります。 ここまで続けてきたブログが今後の転職活動で活かせたら最高だと思います。

インターネットへの恩返し

ここが一番お伝えしたいところです。 「今年のアウトプットを振り返るまえに」で、自分は周りの人に助けられ続けてきました。 それは実際に直接関わっている人や、インターネットの先にいる知らない人にもです。 直接関わっている人には感謝の言葉などをかければいいと思いますが、インターネットの先にいる知らない人にはどうしたらいいでしょうか。 自分が行き着いた先は、「自分もブログを書く」ことでした。 最近聞いた言葉では、「恩送り」という言葉がしっくりきます。

恩送り（おんおくり）とは、誰かから受けた恩を、直接その人に返すのではなく、別の人に送ること。

「誰かが書いてくれたブログの記事で自分が助かり、その恩としてブログを書く。その自分が書いたブログを見て、誰かが助かる。」 そんな循環になったら素敵だなと思っています。

どの世界でも上を見ればキリがないですが、今の自分にしかできないことがあると思います。 技術レベルが低いために自信がなかったり、マサカリが飛んでくるのが怖かったりするかもしれませんが、恐れず自信を持って書いてみてください。 世の中には優しいエンジニアがたくさんいて、あなたのことをサポートしてくれるはずです。

最後に

ダラダラと書いてきてまとまりが無くなってしまいましたが、これで終わりにしようと思います。 要は今年はブログ頑張ったって話でした。来年はLTの回数増やしたり、アウトプットのベクトルをしっかり考えて実践していきたいと思います。それは来年の目標を綴るこちらのアドベントカレンダーで書きたいと思います。

真・エンジニアの登壇を応援する会 Advent Calendar 2018 - Adventar

「インターネットへの恩返し」についてはずっと思っていましたが、なかなか言語化する機会がなかったので1年が終わるタイミングでアウトプットできてよかったです。 今後も誰かの助けになればいいなと思い、ブログを書き続けていきたいと思います。

いつか自分のこの記事を読んで、ブログを書くことを決めた人に出会えたら嬉しいです。

おしまい。