じまろぐ

めめ

Vueのバージョンアップの内容を追いかける方法

弊CodeGridにてVueの2.1から2.5で追加された機能からいくつかピックアップして解説した記事を書きました。 CodeGridで入門シリーズを連載したVue.js 2.0。その後のアップデートをおいかけ、特に注目したい機能を選んで解説します:キャッチアップ Vue.js - 2…

WebStormでJestが設定ファイルを見てくれなくなったから設定した

WebStormのJest連携便利 WebStormはエディタの中でJestによるテストを走らせられる。テスト全体ではなく、テストケースごと(it,test)やdescribe単位でも走らせられる。 (左のくるくる記号をクリックするとテストが走る) テストケース増やしたときにそこだ…

VueコンポーネントのnameからCSSのクラスを付与するディレクティブを作ってみた

VueのSFCでのCSSの命名について以前書いた。 nakajmg.hatenablog.com このSFCSSをやってくうえでクラス名を記述するのをなんとか楽できないか考えた。 この記事はその試行錯誤の軌跡である。 はじめに結論 コンポーネントのnameからクラス名を付与するディレ…

透明なSlackクライアントを作ってみた

タイトルの通り、背景が透明なSlackクライアントを開発合宿で作った。 モチベ 画面共有してるときにチャット見える状態にしたい(ウィンドウのサイズは小さくしたくない) 作業集中するとき公式クライアント終了させたいけど、案件のチャンネルとか見ておかな…

Airbnbで金沢8泊リモートワークをした話

1月の中頃から8泊9日で金沢を満喫しつつ仕事してきた。 三度目の金沢 金沢に行くのは三度目。前回の訪問が1年半前くらいで、観光地はほとんど訪問済み。 それでも金沢に行きたい理由は日本酒とご飯。金沢の日本酒好きだし、どこでお寿司食べてもだいたい美味…

Vueコンポーネントのビルド時に不要な属性をtemplateから取り除く

テスト用にdata-test属性を使ってる VueコンポーネントのテストをJest + vue-test-utilsで書いてる。 dataとかpropsの値によって状態が変化する要素のテストをするとき、要素の特定のためにクラス名使うといろいろ大変だからテスト用にdata-test属性を使って…

Circle CI 2.0 timezoneの設定

config.yml の environment で TZ: Asia/Tokyo を指定する version: 2 jobs: build: docker: - image: node:8.9.0 environment: TZ: Asia/Tokyo

2017年買ってよかったもの

家電をアップグレードしてQOLが向上した年。 Switch * 2 自分用と妻用、2台のSwitchを必死こいて購入。スプラ2、マリオデ、DLソフトなどいろいろ楽しんだ。これによってゲーム熱が高まり、ゲーム用PCを購入するに至った。 ゲーム用Win機 Steamのゲームがやり…

2017年振り返り

今年はいろいろな面で成長を実感できた年でした。 今年作ったもの GitHub風のdiffを生成するライブラリ 技術記事のコードブロックをdiffにしてみたらどうか、と思いたって作ったやつ。作ったといっても実際はライブラリを2つくっつけただけなんだけど。 gith…

GitHub API v4のGraphQLをaxiosとApolloで叩いてみる

ググっても最小限のサンプルがなかったので調べて試した。node環境を想定。 axiosで叩いてみる npm i axios しておく。 const axios = require('axios') const accessToken = 'xxxxxxxxxxxxxxxxxxxxxx' axios({ url: 'https://api.github.com/graphql', head…

コンポーネント思考なCSSの命名規則

Qiitaに書いた。 qiita.com SFCSSは.vueファイルという1ファイルにtemplate script style の全てが詰め込めるからこそできる命名。 外部ファイルでCSSを書くときにSFCSSを適用するのはあまり利点がないように思う。 コンポーネントの粒度 各種JSのコンポーネ…

resolve mongoose warning

version 4.12.5 warning 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 …

Nuxt.js IE11でもHMRしたい

HMRしたい IE11にはEventSourceがないのでwebpackのHMRが動かず、そのままだと手動リロードするハメになる。 nuxt.config.js でpolyfillを読み込ませれば動くようになる。 npm i -D event-source-polyfill 指定はbuildのvendorで。な感じに。 module.exports…

IE11でStorybookを動かす

syntax errorの解消 そのままだとsyntax errorでプレビューが動かないので.babelrcでpresetを指定する。 { "presets": ["es2015"] } 作成場所はルートに。 この.babelrcが読み込めている場合、起動時に次のようなログが出る @storybook/vue v3.2.16 => Loadi…

Slackのステータス機能を活用するためにアプリを作った

Slackのユーザーステータス、使ってますか?Slack上で絵文字+テキストによって自身の状態を示すことができる機能。 メッセンジャー系ソフトウェアの機能としては目新しいものではないが、コミュニケーションの質を向上させるポテンシャルがあるなと感じてい…

VS Codeへの乗り換えをあきらめた話

Veturのチカラを試したくてVS Codeに乗り換えようと試みました。 nakajmg.hatenablog.com が、Vueのアプリを書くうえでは、ちょっと耐えられないなという部分があるということで乗り換えをあきらめました。 足りない .vueファイルへの対応 vscはintellisense…

VeturのためにVS Codeを使ってみる

長いこと開発にはWebStormを使っているが、VueのLanguage ServerであるVeturのチカラを試してみたすぎて、VS Codeへ短期間の移行を決意。 Language Serverは各種言語やライブラリの、補完や構文チェックをサポートするやつで、veturをインストールするとVS C…

静岡JavaScript勉強会でVue.jsへの💓を話してきた

#3のときにこのスライドで名前とアイコンだけ登場してから1年半、ついに静岡JavaScript勉強会 #4でお気に入りなJavaScriptフレームワークのVue.jsについて話してきた。 今回の目標 今回は参加者に「Vue.jsなんかヨサソウだしちょっと使ってみようかな〜」と…

リモートワークを始めて起こった変化

リモートワークを始めてから、メンタル的にもフィジカル的にも変化があり、色々なことへの意識と考え方が変わった。変化には良いことも悪いこともどっちもあった。 リモートワークを始めたことで、自分には総じて良い変化が起きていて、まだまだこの仕事を続…

最近お気に入りの炭酸水

炭酸が飲みたいけど砂糖の入ってるやつは飲みたくない、ダイエット系のもヤダ、となると炭酸水の出番。 今までなんとなくウィルキンソンのタンサンを飲んでたけど、ちょっと浮気して他のを試してみたら戻れなくなった。 それがポッカサッポロのおいしい炭酸…

2年半のリモートワークを振り返ってみる

フルリモートワークな会社に勤めて2年半が経った。簡単に振り返ってみる。 前職と現職 前職はごく普通の勤務体系(10:00 ~ 19:00)で働いていた。 今いる会社は全社員がフルリモートワークで、出社義務も一切なく、勤務時間も各自の裁量で決められる。業務…