じまろぐ

めめ

入門者じゃない人にこそ読んで欲しい「Vue.js入門」

Vue.js入門を@kazu_ponさんより頂きました。ありがとうございます。 遅くなりましたが、読んだ感想を残しておきたいと思います。 Vue.js入門 基礎から実践アプリケーション開発まで作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也出版社/メーカー: 技術…

技術書典5でVue.js本を出してみた振り返りとか

はじめてのサークル参加 技術書典4で一般参加して「なんか出す側のほうが楽しそうだなぁ」と思ってサークル参加してみた。 大変なこともあったけど、結果的にめちゃくちゃ楽しめた。 頒布したもの Vueのコンポーネント設計の本。テストのしやすさという観点…

ねこちゃんと泊まれる旅館で癒やしと学びを得てきた

湯河原にあるまいきゃっとという旅館でねこちゃんと一晩を過ごしてきた www.mycat-yugawara.com この旅館では併設されている猫カフェのねこちゃんを部屋に招いて一緒に泊まれる。控えめにいっても最高の体験&経験だった ねこちゃんのトライアル ねこちゃんと…

Nuxtが監視していないファイルの更新をトリガーに再レンダリングしたい

Nuxtでプレゼンツールが作れないもんかと試してみたときにたどり着いた副産物。 作ったのはこれ。(数ヶ月前に作ってもう飽きてる github.com スクショ TL;DR Nuxtをexpressのmiddlewareで動かす コンテンツの取得はexpressでAPI ファイルの監視はchokidar …

超お高級耳栓 BOSE SLEEPBUDSでストレスが減った

BOSEから発売された眠るためのイヤホン、BOSE SLEEPBUDSを購入してから3週間ほど経ちました。このエントリは自分にはそこそこ効果があったよというレビューです。 BOSE NOISE-MASKING SLEEPBUDS ノイズマスキングイヤープラグ出版社/メーカー: BOSE発売日: 2…

Dockerでホストしてるwebページを同一ネットワークにいる端末から開きたい

Dockerでホストしてるページ、pcで localhost とかでアクセスできるやつにiOS端末実機から開こうとしたらできなかった(同一ネットワークでpcのローカルipをURLに入れて) 。 webpackとかのローカルサーバだと同一ネットワーク内ならip入れればアクセスでき…

Firebase SDKのimportでwarningが出るときは

import firebase from "firebase" すると It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use. とw…

13インチ MBPに合わせてポータブルなモニタを買った

MBPを15インチから13インチに変えた影響で作業領域が若干せまくなりました。出先でやる気を出したいときに作業領域を広げたいので小さめなモニタを探しました。 いろいろ見た結果、購入したのはこれ。 cocopar モバイルモニタ 2018最新13.3インチフルHDI…

vuex-connectでnamespacedなmoduleを使いやすくするヘルパーを作った

vuex-connectはVuexでReduxのconnectのようにstoreとコンポーネントを繋ぐやつ。 www.npmjs.com コンポーネントとstoreを繋ぐ部分を切り離せて宣言的に書けて気に入ってる。mapStateとかVuexが用意してるやつ使わなくてもstoreの値を取り出せて注入できる。 …

デスク付きエアロバイクがいい感じ

デスク付きのエアロバイク FlexiSpot V9 を購入した。 FlexiSpot V9 (2018 CES Innovation Awards 受賞) フィットネスバイク エアロバイク スタンディングデスク 組み立て不要 無段階調整 移動と収納簡単 (ホワイト)出版社/メーカー: Loctek Visual Technolo…

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なんかヨサソウだしちょっと使ってみようかな〜」と…

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

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

最近お気に入りの炭酸水

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