2020年振り返り
今年はいろいろ大変な年でしたが、自分にとっては変化の多い1年でした。簡単に振り返ってみます。
サイボウズに転職した
1月からサイボウズでフロントエンドエキスパートとして働き始めました。
転職についての詳細はこっちで。
業務としては脱レガシー活動がおもなもので、それ以外にも各部署やチームへのフロントエンドの支援業務、社内向けのアプリ開発などをやっていました。
ほかにはフロントエンドエキスパートチームの活動紹介として社のエンジニアブログに記事を2つ投稿しました。
この記事の投稿がきっかけでWEB+DB PRESSにフロントエンドの脱レガシー特集をチームで書くことになりました。
来年は脱レガシー以外に社内OSS系にも関わっていく所存です。
めっちゃ自粛した
自分も妻もフルリモートで家にいるのに加えて、外出を極力控えて食料の買い出しくらいしか出かけない生活を半年くらい続けました。2LDKだったので寝室をつぶしてお互いの仕事部屋を確保して、リビングで寝るようにしていました。
そんな生活を続けている中ふと「幸せとか豊かさって何なんだろう?」みたいなピュアピュアな感情が芽生えてしまい、人多いし家狭いし高いしなんで都内に住み続けているのか意味がわからなくなり、引っ越し意欲が高まりました。都内で高い家賃出して狭い家に住んでいる意味が自分たちには全くないねと妻と話し合いを重ねました。
つくば市に引っ越した
11月に茨城県のつくば市に引っ越しました。秋葉原の2LDKマンションから戸建て4LDK庭&駐車場付きへ。
引越し先は東京以外のすべてから候補をフィルタリングしていき、いろいろな条件を加味して茨城にしました。検討初期の段階では福岡が最有力でしたが、自分たちが本当にしたい暮らし方、コロナの現状、猫の移動方法など考えに考えて今じゃないなとなりました。一生に一度は住んでみたい場所なので、いつの日か越す日が来るかもと思っています。
つくばは東京と比べてとにかくいろいろゆとりがあるなという感じで、伸び伸びと楽しく暮らせています。
詳しくは別エントリーで書きたいと思います。家のインテリアとかもいろいろこだわるようになったのでそのへんも合わせて。
車を買った
引っ越しに合わせてお車を買いました。徒歩圏内にスーパーやらドラッグストアはありますが、車があるとないで選択肢が段違いな感じです。
お納車しました🥰 pic.twitter.com/XEkpCthYua
— じまぐ (@nakajmg) December 5, 2020
茨城県、キャンプ場がとにかく多い(全国1位とかなんとか)のでキャンプやっていこうぜとなりSUVにしました。がっしりした作りで乗ってて安心感がすごいですね。
まだ助手席にしか乗れないので、2021年内に免許を取ろうと思います。
来年に向けて
越してからというもの生活リズムが激変して22時くらいには寝て6時前に起きるみたいな生活をしています。こっちは夜が早い?ような感じがして早く寝ようという気になります。周りが真っ暗なせいかもですが。
朝型にシフトしたのもあって業後に副業を頑張ったりする気力と時間がないので、生活に合わせて色々と変化していきたいと思います。家賃の固定費が12万くらい減ってそこまで頑張る必要がなくなったので、ちゃんと生活する1年にしてもいいかもなぁとか思ったり思わなかったり。
それでは良いお年を!
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
install extension
on main
import { session } from "electron"; import path from 'path' import os from 'os' app.on("ready", async () => { try { await session.defaultSession.loadExtension( //The extension version depends on the version you installed path.join(os.homedir(), '/Library/Application Support/Google/Chrome/Default/Extensions/ljjemllljcmogpfapbkkighbhhppjdbg/6.0.0.2_0') ) } catch (e) { console.error("Vue Devtools failed to install:", e.toString()); } })
The version depends on the version you installed
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).update(body).digest('base64'); const isSignatureMatched = signature === event.headers['X-Line-Signature']; console.log('signature matched:', isSignatureMatched); // LINEからのリクエストならtrueになる }
React + Typescriptプロジェクトでplugin-styled-componentsを使うときの設定
- styled-components使ってる
- env !== "production" のときにクラス名にファイル名が入るようにしたい
- デバッグのため
- babel-plugin-styled-componentsがある
- TypeScriptだとこのプラグインは効かない
- ts-loaderでトランスパイルしてるから
- storybookでも使いたい
という感じで、ts-loaderを使ってるのでTypeScriptプロジェクトの場合は typescript-plugin-styled-components
を使う必要がある。babelでやってる場合は babel-plugin-styled-components
で大丈夫なはず。
設定
webpack.config.js
で ts-loaderのoptionを設定する。
const path = require("path"); const createStyledComponentsTransformer = require("typescript-plugin-styled-components") .default; const styledComponentsTransformer = createStyledComponentsTransformer({ displayName: process.env.NODE_ENV !== "production", getDisplayName(filename, bindingName) { // コンポーネントのパスがクラス名に入るように return path.relative(__dirname, filename); } }); module.exports = { // 省略 module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader", options: { onlyCompileBundledFiles: true, getCustomTransformers: () => ({ before: [styledComponentsTransformer] }) } } ] }, // 省略 };
storybookで使う
"@storybook/preset-typescript"
を使ってる前提
.storybook/main.js
を
const path = require('path'); const createStyledComponentsTransformer = require("typescript-plugin-styled-components") .default; const styledComponentsTransformer = createStyledComponentsTransformer({ getDisplayName(filename, bindingName) { // コンポーネントのパスがクラス名に入るように return path.relative(path.resolve(__dirname, "../") ,filename) } }); module.exports = { stories: [ '../src/**/*.stories.tsx' ], addons: ['@storybook/addon-actions/register','@storybook/addon-actions', { name: "@storybook/preset-typescript", options: { tsLoaderOptions: { transpileOnly: true, getCustomTransformers: () => ({ before: [styledComponentsTransformer] }) }, include: /\.tsx?$/ } }] };
でクラス名にファイルのパスが入るようになった。
サイボウズに転職して1ヶ月たちました
TL;DR
辞
2019年10月末にピクセルグリッド社を退職しました。
最終出社をしました
— じまぐ (@nakajmg) October 25, 2019
辞めたときは特に次が決まってたわけではないですが、のんびりしながら次を探しました。
転
そして2020年1月からサイボウズ株式会社で働き始めました。
ジョインしました✌️✌️ pic.twitter.com/XUmMHx9Cvv
— じまぐ (@nakajmg) January 6, 2020
サイボウズについては後ろの方で。
ピクセルグリッドでやってたこと
在籍期間は約6年で、自分のキャリアの中では最長です。最短はDMMの7ヶ月。
ピクセルグリッドはフロントエンドに特化している会社で、主な業務はクライアントワークです。 自分は入社当時から退職するまで、ひたすらJavaScriptでSPAを作っていました。入社当時はBackbone.jsがメインだった記憶。
Vueが出てからはVueを採用することが多かったです。Vue関連のことをいろいろと発信していましたが、Vueにこだわっているわけではないので、Reactも使っていましたし、最後の仕事はGatsby.jsでWebサイトの作り直しとか、いろいろやっていました。
ピクセルグリッドの環境
各メンバーがそれぞれ何かに強い人ばかりだったので、勉強になることが多かったです。 自社の技術系メディアCodeGridを運営していて、ここでいろいろな技術についての文章を書いていました。
6年で100本の記事。
この経験のおかげで技術文書を書くスキルがつけられたと思います。
すこし前ですが技術書典にも参加して、Vueの本を書きました。
#技術書典 にだしたVueコンポーネントの本、Boothで販売開始しました📚https://t.co/YUErV3b8DJ
— じまぐ (@nakajmg) October 9, 2018
この本は商業版も出してもらえて、自費出版分と合わせて合計1000部ほど売れました。購入してくれた方、ありがとうございます 。
フルリモート
ピクセルグリッドの基本的な働き方はリモートワークです。オフィスはありますが、週に1回行くか行かないかくらいでした。
この記事を書いたのは3年前くらいなので、リモートワークについての考えは今はだいぶ変わっています。
出社とリモートとどっちがいいとかじゃなく、いろいろな要因に合わせて自由に選択できたらいいよね、という感じです。
転職した理由
個人的な要因がほとんどです。
クライアントワークに少しだけ飽きていたという面は少なからずありますが、慣れが進みすぎて、可処分時間を増やすためにサクッといい感じに作りきる、みたいな働き方になっている節がありました。 ほそぼそと個人プロジェクトこそやっていたものの、技術的な意欲は年々減少していっていたように思います。
退職の半年前くらいからこれじゃいかんな〜と思いはじめて、環境を変えるか〜となりました。
社会性の喪失
元々が出不精なので、リモートと合わせてどんどん外に出なくなっていっていたのも理由の一つです。 一度も家を出ない週もざらにあり、人との話し方も忘れかけてました。
週に1回以上は勉強会に出ていましたがほぼ行かなくなり、妻以外の人間との接触機会がほとんどなかったです。
このままだとこの先どこかで働き続けるの無理になりそう、と思うようになりました。
副業を始めた
ちょうど1年前くらいから副業をはじめました。
転職してコミットできる量は減りましたが、ROXXさんには今でも継続してお手伝いさせてもらっています。
副業始めたてのころは副業先のオフィスに出向いて作業したりと、リハビリみたいなことをしてました。 また自社サービスを運用・改善していくという体験ができたので、クライアントワーク以外のイメージもだいぶつかめました。 そしてこの時期から「出社イケるんじゃね?」と思うようになっていきました。
サイボウズへ
フロントエンドエキスパートチームの存在を認知したことが、サイボウズに興味を持ったきっかけだったと思います。
自分のやりたいこと&キャリア的にフロントエンドを続けていきたいと思っていたので、フロントエンド専門でやるようなチームがあるということにワクワクしたのを覚えています。
サイボウズのエンジニアとはつながりを持っていなかったので、サイボウズに勤めている元同僚の奥さんにコンタクトを取ってチームにつないでもらいました。
面接とか
カジュアル面談をしてもらったあとにフォームから応募して、面接3回を経て内定を頂きました。
面接ではいろんな人とお話しました。多拠点の人とzoomでつないで面接したのが印象的でした。 3回目ではエラい人が出てきたりもしました。
サイボウズの環境
働き方という面でとにかく進んでるな、というのが第一印象。 フルリモートからオフィスに出社するスタイルに変わることへの不安がそれなりにあったんですが、初週には払拭されてました。 自分で自分の働き方を宣言する、そしてそれが滅多なことがない限り受け入れられる。
会社の規模のわりにめちゃくちゃ自由で働きやすく、この風土を作るのにいろいろあったんだろうなぁと先人に感謝する日々です。
サイボウズでの仕事
フロントエンドエキスパートチームという、特定のプロダクトに所属しない形でフロントエンド領域の支援をするチームにいます。
プロダクトにそこそこの歴史があるので、アーキテクチャを刷新する基盤作りなどの支援をやっています。
サイボウズではなにごともモブですすめるのが主流で、とにかく寄ってたかって課題を倒していく感じです。助かる。
今はClosureをReact + TypeScriptで置き換えるやつをやっています。
社会性と社交性
サイボウズの人たちは、大体の人が落ち着いていて余裕がある感じです。 巻き込み力が高い人が多く、チーム以外の人たちとも自然に交流の機会ができてます。感謝。 部活動もあり、自分は運動系の部活動に参加したりしてます。フットサル初めてやった。
入社1ヶ月にして社会性も社交性もかなり取り戻した感覚があります。自分でもびっくりするくらい人と交流しています。
1月はほぼフルでオフィスに出社しました。リモートワークも可能ですが、最初の方はできるだけ物理出社に寄せないと思ってやりました。 オフィスが自宅から近いのもありますが、オフィス内の環境が良く、ストレスなく働けているので、リモートに寄せなくてもやっていけそうだなという手応えがあります。
いい感じに続けられそうです。
おわりに
前職がめちゃくちゃ自由だったのでどうなるかな〜と思ってましたが、同じくらい自由に楽しく働けてます。
誰にでもオススメってわけではないですが、ライフステージの変化とかで思うことがあったり、今の働き方に疑問を持ってるような人にはいいのかもな〜と思います。 気が向いたら応募してみてください(自分に人事権はない)。
2019年 買ってよかった家電・家具
今年は7月に引っ越しをした。
そのタイミングでこれまでツギハギしてきた家具たちを全部捨てて心機一転、統一感のある部屋を作ろうと決意。
家具家電での出費はなかなかのものだったけど、「良いものを長く使っていきましょう」という合意が夫婦間で取れたので、結果的にすごく満足度も高く、妻も自分も今の家が大好きという状態になれた。
全部乗せるとすごい数なので、生活してる上で「買ってよかったな〜」とちょくちょく思うやつをピックアップして紹介。
プロジェクタ
LG HF85LS 超短焦点 レーザー光源プロジェクター (フルHD/1500lm/Bluetooth対応/3kg/寿命約20,000時間)
- 発売日: 2019/06/26
- メディア: Personal Computers
部屋の壁が広くなったのでプロジェクタのスクリーンにできそうだなと思い購入。ダイニングテーブルの横に置いて動画ながしたりしてる。
- 超短焦点なので壁際に置けて邪魔にならない
- 移動も楽で使い勝手がよい
- 明るさは微妙
- 昼間はカーテンを閉めないとよく見えない
- 部屋の照明が白系だと夜でも使いづらそう
家にお客さんが来たときにBGMとしてYouTubeとかで自動再生しておくと「あ、懐かしい〜」みたいな会話も生まれてよいですね。
テレビ
LG 65V型 4Kチューナー内蔵液晶テレビ Alexa搭載/ドルビーアトモス対応 2019年モデル 65UM7500PJA
- 発売日: 2019/04/25
- メディア: エレクトロニクス
4Kモニタでもよかったんだけど、大きさを求めるとコスパよくない感じなのでテレビにした。
LGのテレビ用OSが乗っていて、YouTubeとかNetflixとかアプリが入れられてリモコンで一発起動できるのが使いやすい。
以前はテレビにPCをつないで視聴していたので体験が良くなった。
あとOSにアプデが入ってAirPlayに対応したので、macから画面を飛ばせるようになって大変便利。画質も十分。
(自分が購入した時より5万くらい値が下がってるので買い時かも)
スピーカー
BOSE SOUNDBAR 700 ワイヤレスサウンドバー Amazon Alexa搭載 ボーズブラック
- 出版社/メーカー: BOSE(ボーズ)
- 発売日: 2018/10/11
- メディア: エレクトロニクス
テレビにつないでる。
AirPlayにも対応してるので、リビングで音楽聴きたいときにも使える。
リアスピーカーとウーハーもつけたけど、ご近所迷惑になりそうだったのでウーハーは外した(悲しい)。
音はめっちゃいい。
BOSE HOME SPEAKER 300 スマートスピーカー Amazon Alexa搭載 ラックスシルバー
- 出版社/メーカー: BOSE(ボーズ)
- 発売日: 2019/08/22
- メディア: エレクトロニクス
仕事部屋用に。
これもAirPlayに対応してるので便利。
低音な結構効いててこの大きさのわりにパワフルな感じ。
ヘルシオ
シャープ スチームオーブン ヘルシオ(HEALSIO) 18L 1段調理 レッド AX-CA400-R
- 発売日: 2017/08/31
- メディア: ホーム&キッチン
うちは料理をほとんどしないので冷食とか惣菜とかお弁当を温める用。
蒸気で温めるやつは時間かかるけど美味しく温められてよい感じ。
ダイニングテーブル
はじめてのダイニングテーブル。
仕事机以外に椅子に座りながらPC開ける場所が欲しかったので。ベンチが物理的にも心理的にも座りやすい。
横に並んでご飯が食べられるのもよい感じ。
棚
仕事部屋(兼ゲーム部屋)の飾り棚として。
立体物のグッズをディスプレイするのにとてもよい。
そのた
滑らないハンガー。Tシャツがよれないし、コートとかも滑らないので大変使いやすい。
脚立
椅子とかに乗るの危ないので。
見た目がいいのでリビングにインテリアとして置いてる。
箱
アイリスオーヤマ ボックス 高い所 幅32×奥行41×高さ24cm クリア TB-43
- メディア: ホーム&キッチン
収納用。
経験上、中身が見えない収納はそのまま使われず存在がないものになるので透明なやつに。
ちょうどいいサイズかつ重ねられるので使いやすい。
おわりに
家具家電はだいたい揃ったので、来年はインテリアとかディスプレイとか力を入れたい。
Vueでsvgファイルをいい感じに扱う
svgをtemplate
にコピペする暗黒時代の終わりを告げる
🔍 vue svg 体験 一番いいやつ
— ねこじまぐ (@nakajmg) August 29, 2019
vue-svg-loader を使う
vue-svg-loaderを使うとsvgファイルをvueコンポーネントとして扱えるようになる
<template> <a href="https://github.com/vuejs/vue"> <VueLogo /> Vue </a> </template> <script> import VueLogo from './public/vue.svg'; export default { name: 'Example', components: { VueLogo, }, }; </script>
Nuxtで使うときは nuxt.config.js
の build.extend
でloaderを設定
ドキュメント: https://github.com/visualfanatic/vue-svg-loader/#basic-configuration
export default { build: { extend(config) { const svgRule = config.module.rules.find(rule => rule.test.test('.svg')); svgRule.test = /\.(png|jpe?g|gif|webp)$/i config.module.rules.push({ test: /\.svg$/, loader: 'vue-svg-loader', }) }, }, }
動的なパス指定でsvgを読み込むコンポーネントを作る
svgの数だけ import
して components
に登録するのもめんどうなのでsvg読み込むvueコンポーネントを作る
<template> <component :is="svg"/> </template> <script> export default { name: "SVGElement", props: { name: { type: String, }, }, computed: { svg() { return () => import(`~/assets/img/${this.name}.svg`) } } } </script>
この例だと src/assets/img/
の中から name
で指定したファイル名のsvgを読み込める。 ~/assets/img/${this.name}.svg
の部分は自分の環境と使い方に合わせてお好きなように
使う側はこんな感じ
<template> <div> <SVGElement name="bars"/> </div> <template> <script> import SVGElement from "~/elements/SVGElement" export default { name: "ProjectsPage", components: { SVGElement }, } </script>
これがVueでsvgを扱う体験の一番いいやつ、と思う