config.yml
の environment
で TZ: Asia/Tokyo
を指定する
version: 2 jobs: build: docker: - image: node:8.9.0 environment: TZ: Asia/Tokyo
config.yml
の environment
で TZ: Asia/Tokyo
を指定する
version: 2 jobs: build: docker: - image: node:8.9.0 environment: TZ: Asia/Tokyo
家電をアップグレードしてQOLが向上した年。
自分用と妻用、2台のSwitchを必死こいて購入。スプラ2、マリオデ、DLソフトなどいろいろ楽しんだ。これによってゲーム熱が高まり、ゲーム用PCを購入するに至った。
Steamのゲームがやりたい、とくにCupheadがやりたくてゲーム用のWin機を購入。買ったのはこれ
メモリとHDD足してこんな感じのスペック
CPU: Core i5-7500 ( 3.40GHz 2400MHz 6MB ) メモリ: 24GB(8.0GB PC4-19200 DDR4 UDIMM 2400MHz * 3) ストレージ: SSD 256GB + HDD 4T グラボ: NVIDIA GeForce GTX 1060 6GB GDDR5
とりあえずどのゲームも快適にやれてる。3ヶ月で50くらいのゲーム購入。
Dead Cellsが一番のお気に入り。おもしろい store.steampowered.com
LG モニター ディスプレイ 27UD88-W 27インチ/4K(3840×2160)/IPS 非光沢/USB Type-C、HDMI×2、DisplayPort/高さ調節、ピボット対応
これ買った。作業が捗る。
オフィスにこたつが導入されたのに引っ張られる形でこたつを購入。毎日のようにこたつでダメになっている。
日立の555のやつ。 kadenfan.hitachi.co.jp
真空チルドが最高な感じ。
容量がでかくなって買い置きも作り置きもいっぱいできるようになった。日本酒買いまくって材料が入れられないてのがなくなったのも最高。QOL👆👆。
パナソニックのスリム型。
乾燥までできるおかげで洗濯に使う時間が相当減った。その分の時間を仕事とか料理とかいろんなことに使えるようになったので、QOL👆👆。
別の一回り大きいやつ頼んだら洗濯機置き場が小さくて持って帰ってもらった。サイズは幅だけでなく奥行きも考えて通路の幅を測りましょう…。
New: Anova Precision Cooker - WIFI 2nd Gen (900 Watts)
セールで購入。紀伊国屋のうまい牛肉で作るとなんでもうまい。
豚肉は値段に関わらずうまくなってコスパが大変良い。
あげもの超うまい。
象印 あげあげ 電気フライヤー メタリックカカオ EFK-A10-TJ
からあげととんかつおいしい☺
料理の腕を上げていきたい所存💪
今年はいろいろな面で成長を実感できた年でした。
技術記事のコードブロックをdiffにしてみたらどうか、と思いたって作ったやつ。作ったといっても実際はライブラリを2つくっつけただけなんだけど。
を使ってjson-serverをストアにしてローカル環境での開発時にクライアントサイドのパフォーマンスデータを蓄積してく。DevToolsでやりゃいいやつだけど、モバイルのブラウザとかSafariとか、クロスプラットフォームな感じでログを残せるようにしたい、というモチベで作ったやつ。
勉強がてらにReact+MobXで作成した。
Electron + Vue + Slack API
詳しくは過去のエントリで
privateなリポジトリのままで公開してないのがいくつか。完成させるのはやはり勢いが必要だ。
お仕事、個人プロジェクトを通して使ったもろもろ。中でも👇のやつが印象深い。
去年から引き続き、案件のほとんどでVueを採用した。慣れているというのが一番の理由だが、悩むことなく進められるのはやはり良い。
Nuxtは個人プロジェクトで少しさわったあと、案件で採用してみた。今のところ開発体験を向上させてくれる良いもの、という印象。2018年はNuxtに乗っかっていく年になりそう。
Firebaseには大変お世話になりました。連載で解説も書いた。
個人プロジェクトで何かつくるとき、バックエンドのデータストアを用意する手間も悩みも解消。functionsに色々と処理を任せられるのも大きい。
OAuthで認証するAPIとかはコールバックURLの登録が必須で、Electronで使う場合に困ってたのが、functionsに丸投げすることで解消できて最高だった。
5月に入籍しました。大変幸せに暮らしております。
2018年もいい年になりますように🙏
ググっても最小限のサンプルがなかったので調べて試した。node環境を想定。
npm i axios
しておく。
const axios = require('axios') const accessToken = 'xxxxxxxxxxxxxxxxxxxxxx' axios({ url: 'https://api.github.com/graphql', headers: { Authorization: `bearer ${accessToken}`, Accept: 'application/vnd.github.v4.idl' }, method: 'POST', data: { query: `query { repository(owner: "vuejs", name: "vue") { name, description, license } }` } }) .then(res => res.data) .then(console.log)
実行すると👇のが返ってくる
{ data: { repository: { name: 'vue', description: 'A progressive, incrementally-adoptable JavaScript framework for building UI on the web.', license: 'MIT License' } } }
accesToken
はAPIの認証用のトークン。こことかcurlで取得しておく。
漏れるとダメなやつなのでpublishするときは環境変数とかに入れときましょう。
パッケージがいろいろ必要。npm i
しておく。
{ "dependencies": { "apollo-cache-inmemory": "^1.1.4", "apollo-client": "^2.0.4", "apollo-link": "^1.0.7", "apollo-link-http": "^1.3.2", "graphql": "^0.12.3", "graphql-tag": "^2.6.1", "node-fetch": "^1.7.3" } }
const gql = require('graphql-tag') const access_token = 'xxxxxxxxxxxxxxxxxxxx' const {ApolloClient } = require('apollo-client') const {HttpLink } = require('apollo-link-http') const {ApolloLink, concat} = require('apollo-link') const {InMemoryCache } = require('apollo-cache-inmemory') const fetch = require('node-fetch') const authMiddleware = new ApolloLink((operation, forward) => { operation.setContext({ headers: { Authorization: `bearer ${access_token}`, Accept: 'application/vnd.github.v4.idl', } }) return forward(operation) }) const httpLink = new HttpLink({ uri: 'https://api.github.com/graphql' , fetch}) const client = new ApolloClient({ link: concat(authMiddleware, httpLink), cache: new InMemoryCache() }) client.query({ query: gql`{ repository(owner: "vuejs", name: "vue") { name, description }}` }).then(console.log)
headerの設定が若干めんどくさい。
実行すると👇のが返ってくる。
{ data: { repository: { name: 'vue', description: 'A progressive, incrementally-adoptable JavaScript framework for building UI on the web.', __typename: 'Repository' } }, loading: false, networkStatus: 7, stale: false }
graphql-tag
がGraphQLのquery書くのに便利なやつぽい雰囲気。
Qiitaに書いた。
SFCSSは.vue
ファイルという1ファイルにtemplate
script
style
の全てが詰め込めるからこそできる命名。
外部ファイルでCSSを書くときにSFCSSを適用するのはあまり利点がないように思う。
各種JSのコンポーネント指向なフレームワーク、コンポーネントの切り方がむずいなーっていう問題、CSS的な都合によるコンポーネント感とJSで制御したいコンポーネント感が必ずしも一致しないからなのかなーとか想像した。その埋め合わせはどっちかが妥協して頑張るみたいな
— Takeshi Takatsudo (@Takazudo) 2017年12月15日
コンポーネントの粒度、Vueではtemplate
とstyle
を一緒に書くのでこの辺りの乖離が少なく済むような感じがしている。
4.12.5
DeprecationWarning: open() is deprecated in mongoose >= 4.11.0, use openUri() instead, or set the useMongoClient option if using connect() or createConnection()
and
DeprecationWarning: Mongoose: mpromise (mongoose's default promise library) is deprecated, plug in your own promise library instead: http://mongoosejs.com/docs/promises.html
mongoose.connect(mongoURL, { useMongoClient: true })
and
mongoose.Promise = require('bluebird')
https://github.com/Automattic/mongoose/issues/5399
https://github.com/Automattic/mongoose/issues/4951
Upgrading is not always the best option.
IE11にはEventSourceがないのでwebpackのHMRが動かず、そのままだと手動リロードするハメになる。
nuxt.config.js
でpolyfillを読み込ませれば動くようになる。
npm i -D event-source-polyfill
指定はbuildのvendorで。👇な感じに。
module.exports = { build: { vendor: process.env.NODE_ENV !== 'production' ? [ 'axios', 'event-source-polyfill' ] : [ 'axios' ], } }
プロダクション用ビルドに入り込まないように気をつけましょう。
https://ja.nuxtjs.org/api/configuration-build/#vendor
動いてる
Nuxt.jsに限らずwebpackのHMRをIE11で効かしたいときはEventSourceのpolyfill追加すれば動く(はず