じまろぐ

めめ

2020年振り返り

今年はいろいろ大変な年でしたが、自分にとっては変化の多い1年でした。簡単に振り返ってみます。 かわいいピピ サイボウズに転職した 1月からサイボウズでフロントエンドエキスパートとして働き始めました。 転職についての詳細はこっちで。 nakajmg.hatena…

Install vue-devtools for Vue3 on electron

written on Fri Oct 09 2020 16:30:39 GMT+0900 (日本標準時) vue-devtools for vue3 is still beta so you need to install beta version. install vue-devtools beta version via Chrome Web Store chrome.google.com install extension on main import { …

LINE Messaging API webhookの署名検証 on Lambda

const crypto = require('crypto'); const channelSecret = 'xxxxxxx' // envとかから取る exports.handler = async(event) => { const body = Buffer.from(event.body, 'base64').toString() const signature = crypto.createHmac('SHA256', channelSecret)…

React + Typescriptプロジェクトでplugin-styled-componentsを使うときの設定

styled-components使ってる env !== "production" のときにクラス名にファイル名が入るようにしたい デバッグのため babel-plugin-styled-componentsがある TypeScriptだとこのプラグインは効かない ts-loaderでトランスパイルしてるから storybookでも使い…

サイボウズに転職して1ヶ月たちました

TL;DR ピクセルグリッドからサイボウズに転職しました 社会性を取り戻すための戦いです いい感じにやってます 辞 2019年10月末にピクセルグリッド社を退職しました。 最終出社をしました— じまぐ (@nakajmg) October 25, 2019 辞めたときは特に次が決まって…

2019年 買ってよかった家電・家具

今年は7月に引っ越しをした。 そのタイミングでこれまでツギハギしてきた家具たちを全部捨てて心機一転、統一感のある部屋を作ろうと決意。 家具家電での出費はなかなかのものだったけど、「良いものを長く使っていきましょう」という合意が夫婦間で取れたの…

Vueでsvgファイルをいい感じに扱う

svgをtemplateにコピペする暗黒時代の終わりを告げる 🔍 vue svg 体験 一番いいやつ— ねこじまぐ (@nakajmg) August 29, 2019 vue-svg-loader を使う github.com vue-svg-loaderを使うとsvgファイルをvueコンポーネントとして扱えるようになる <template> <a href="https://github.com/vuejs/vue"> <VueLogo /> Vue </a> </template> <script> impor…

GridsomeでGraphCMSのデータを使う

gridsome.server.js で const axios = require('axios') module.exports = function (api) { api.loadSource(async ({ addContentType }) => { const res = await axios.get(process.env.GRIDSOME_GRAPHCMS_ENDPOINT, { params: { query: `query { posts { i…

axiosでGraphCMSのデータ取得

API Explorerでこんなクエリで取得するやつ { posts { title } } jsから const endPoint = "https://api-apeast.graphcms.com/v1/xxxxxxxxxxxxxx/master" const authToken = "xxxxxxxxxxxx" const res = await axios.get(endPoint, { params: { query: `quer…

Nuxtプロジェクト内で使われてないコンポーネントを探す

プロジェクトが進むと役目を終えた使わないコンポーネントが出てくる 放置していくとどれが使っててどれが使ってないかわからなくなってくる 使わなくなったコンポーネントの代わりに作られたコンポーネントの名前が似てると最悪みがある 「このコンポーネン…

開業届を出しました

開業しました— じまぐ (@nakajmg) 2019年3月12日 会社はやめてません。 副業はじめてました 半年前くらいから継続してやってく副業をやりはじめて、本業と並行して続けていけそうだったので開業届を出しました。 屋号は技術書典のときに使ったサークル名から…

Vue.jsのrender関数(JSX)に思いを馳せた結果

この記事はVue.js #2 Advent Calendar 2018の18日目の記事です。 Vue.jsを使った開発では、特別な理由がない限り.vueファイルで記述するのが主流かと思います。.vueの場合、テンプレートの定義は<template>で行うことになるでしょう。 自分も何の疑問が湧くことなく<template>を</template></template>…

Nuxt.jsが気になるならNuxt.jsビギナーズガイドを読めばいいと思う

Nuxt.jsビギナーズガイドを著者の@potato4dさんよりいただきましたので、読んでみての客観的な感想を記しておきたいと思います。 Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発作者: 花谷拓磨出版社/メー…

入門者じゃない人にこそ読んで欲しい「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から取り除く

追記(2019/02/12) vue-cli v3向けにはプラグインがある github.com テスト用にdata-test属性を使ってる VueコンポーネントのテストをJest + vue-test-utilsで書いてる。 dataとかpropsの値によって状態が変化する要素のテストをするとき、要素の特定のために…

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