2023年

このブログは、high-gのB面的なお気持ちアウトプットとして活用していく。

今年はとにかく毎日インプットとアウトプットをしまくる。

毎日ブログを書く勢いで思考を練る。

 

◯2023年やること

  • 目の前の結果に一喜一憂せずに本質を追い求めることを徹底
    • 本当に大切なCXとは、UXとは、エンジニアリングとは、働き方とは
  • 言うだけではなく行動に起こす
    • 毎日ブログを書くレベルで思考する
  • フロントエンドの技術スタックを一新する
    • Next.js13, Amplify, Vercel Edge Functions, Qwik, Astro, Svelte, WebComponents等
  • チーム開発の知識をつける
  • UXの知識をつける
  • 設計本を読む
  • AtCoderで緑レートになる
    • 毎日少しずつ競プロ

目標を確実に達成していく。

2021年振り返り

年末年始は、完全にだらけきってスプラトゥーンばっかりやってる。先日プレイ時間が1000時間を越えた。2022年はスプラ3が出るので楽しみ。

 

さて、2021年の振り返りをしよう。

1月 SurfaceGO + Electron + NFC で工場見学で利用するアプリを作成、React調査

2月 Nuxt.jsで大規模コーポレートサイト作成、Next.js調査

3月 Nuxt.jsで大規模コーポレートサイト作成、Next.js調査

4月 Next.js + CSS Modules でLP作成

5月 jQueryで作成されたサイトの修正、転職相談

6月 Next.js + styled components + microCMSでSSGを利用したサイト作成

7月 上記案件を引き続き取り組む、Next.js + emotionでLP作成

8月 転職準備期間、上記案件を引き続きメンテナンス。猫が病気になる

9月 広告制作会社から自社サービス開発会社へ転職

10月 結婚式を挙げる。開発はレガシー環境(一部React + TS)に苦しむ日々

11月 仕事にこなれる。前職の案件を業務委託的にこなす。猫の病気が治る

12月 引き続き新機能のメンテナンス。新居への引っ越し準備

こんな感じ。

 

2021年は、転職したり、結婚式を挙げたり、猫が病気になって手術をしたり、新居への引っ越しが決まったりと、自分史上、一番イベントが重なって、一番お金が動いた年だった。

 

働き方に関しては、大きく変わった1年だったと思う。前までは週に1度か2度はオフィスに出社していたが、転職してからフルリモートになり、ずっと家で作業をしている。

仕事内容は、自社サービス開発会社なので、前職の広告制作とは異なり超絶ホワイトだ。破綻したスケジュールと理不尽なクライアント相手、時には社内のPM相手に日々精神をすり減らしながら命を燃やして戦うなんてことは全く無い。その代わりに、劇的な演出実装だったり、新技術を積極的利用して開発環境を刷新するなんてものもほとんど無い。人の稼働的にもサービスの稼働的にも良くも悪くも安定といった感じ。

最近は、今の会社にNext.jsを導入しようと奮闘している。新技術の導入ってこんなにめんどくさかったっけ??という思いを常に抱きながら。今の会社のオファーを受けた時は、まさに理想郷と思っていたけども、入社してみると課題がそれなりにあることが分かった。どんな組織も完全な理想郷で存在している訳がないし、Googleですら社員に訴訟されまくってるからなあ、ということを悟った。まだ、変えていける余地はあるので頑張れると思う。

2021年1月から始めたscrapboxの記事数が125個になった。中途半端で終わっているものもあるけど、自分が興味を持って調査したものが形になって残るのは嬉しいし、案件に活用できているのも良いと思う。

scrapbox.io

あとは、自分が書いたQiitaの記事がちょいバズしたのが嬉しかった。しかし、難易度的には、今まで書いたどの記事よりも低く、まとめただけなのに・・・。理不尽だ。

qiita.com

2021年はReactやNext, TypeScriptに振り切った1年になったので、WebGLだったり、Canvasだったりといった技術には疎くなった。VueもjQueryも案件で利用するだけで、プライベートでは一切書いていない。react-three-fiberとかを見ると、趣味レベルでもいいから、この辺りの技術は継続して押さえたい。

docs.pmnd.rs

qiita.com

 

趣味でやってるストリートダンスに関しては、月1開催していた練習会を週1に出来たのが良かった。安定してダンスできてる。先日、Dance@liveという10年以上続いている大きめなストリートダンスの大会の大阪予選で1次予選を勝ち上がることが出来た。若い子達が頭角を現してきて、正直、最前線で頑張るのは難しくなってきたけど、ダンス歴が15年を超えて、辞め時を見失っているので、まだまだやれるとこまでやろうと思う。

dah.dancealive.tv

 

2022年の目標は、

・Next.jsを自社サービスに導入する

・自社サービスのCakePHPの理解を深める

・フロントエンドの市場から外れないように常に最新系をキャッチアップする

・フロントエンドで利用できそうなAWSの知識をつける(Lambda, Amplify等)

・システム工学系やサービス開発の知識をつける為に書籍を読む

・react-three-fiber等のWebGL周りをキャッチアップする

・ダンスの大会、コンテストで入賞する

これくらいかな。頑張っていこう。

2021年上半期振り返り

2021年上半期の個人的まとめを書こうと思う。

行った取り組みの中で、大きいものは以下

  • scrapboxの利用
  • React.js/Next.jsの利用
  • 転職

 

scrapboxの利用

1月末くらいから個人の技術スタックや興味のある分野などを見える化する為、また、調査技術・案件の知見収集をまとめる為にscrapboxを利用し始めた。 

scrapbox.io

scrapboxの良いところは、技術をスタックしている感覚を体感出来ることの他に、Qiitaなどに投稿するレベルになっていない知見を記事としてまとめられるところにあると思う。

完璧に個人用まとめとして利用しており、文体を丁寧に書かなくてもいいので、変なストレスがない。

あとは、scrapboxで書いた記事を他人にシェアしやすかったりするのも良い。

普段、簡単なメモなどはEvernoteに取るようにしていて、技術記事もEvernoteにまとめようとしたのだけれども、scrapboxの様な使い勝手の良さはEvernoteには無かった。

scrapboxは、QiitaとEvernoteの中間的存在の様な形で利用できてるのでオススメ。 

 

React.js/Next.jsの利用

同様のタイミングで、React, Nextを触りだした。

2018年末頃から案件利用していたVue, Nuxtの利用が個人的に大分安定してきて、案件も落ち着いたタイミングだったので、前から気になっていたReactに対して、腰を据えて取り組むことを決意。 

1ヶ月ほどNext.jsやReact Hooks周りの技術調査を行った後、ライトな案件での導入を重ね、CSS Modules、styled-components、emotionのそれぞれを利用した場合の知見を積めたり、

Next.js + microCMS + GitHub Actionsを利用したJamstackを導入したりで、

React(Next.js)を利用した開発の基礎はついてきた様に個人的には感じる。

 

Reactを利用した開発のメリットが体感でき、Vueと比較したときのシェア率、周辺技術の整い方、時代の潮流なども考え、Vueから完全脱却を行い、Reactを技術の中心に据えることに決意。

また、同じくらいの時期にNoteや食べログなどの技術ブログで、NuxtからNextにリプレースするという記事が見られたり、

noteのフロントエンドApp分割 - Speaker Deck

Vue3がかなりReactライクな記述になっていることからVueを採用する意味を個人的に感じなくなった。

完全にReactの波が来ている。 

 

転職

転職をした。

 

↓転職前

www.1-10.com

 

↓転職後

www.lancers.co.jp

 

転職のきっかけは、ある日突然オファーがきたこと。

scrapboxに記事をまとめだしたことやReactの知見を積んだことが結果につながったみたい。

 

話を進めていく上で、収入条件が良かったこと、組織体制がよかったこと、今よりもホワイトに働けそうということを色々加味した上で転職を決意。

 

クリエイティブ系の制作は、忙しい時と暇な時の差が激しく、暇な時は、1ヶ月くらい休みを取れたりするのだが、忙しい時は、毎日残業があり、休日出勤や徹夜をすることが当たり前のスケジュールで稼働することが多かった。

独身時代は、この働き方でも良かったし、試したい技術を個人の裁量で導入できたのもよかったのだが、昨年、籍を入れ、働き方に関して色々と考えることが多くなり、

この働き方をずっとは出来ないな…ということを感じていた。

 

また、エンジニアとしてのキャリアパスは、システム開発寄りな現場の方が描き易く、市場価値が高いのも表現系を実装するエンジニアよりもシステム開発寄りなエンジニアの様に個人的には感じていたのもある。

転職前の会社では、ARやVR、AI、3Dといった大きなくくりの技術に興味はあれど、フロントエンドの細部の技術に興味がある訳ではなく、制作にReactやVueを使おうが、jestを使ったテストを行おうが、あまり評価されにくい社風だったので、

フロントエンド領域をもっと伸ばしたいという思いもあり、

クリエイティブ系制作からは足を洗おうという考えに至った。

 

他にも辞めるに至った理由は色々あって、

コロナ禍になり、リモートワークが当たり前の世の中になり、普段の会議だけでなく、クライアントとの打ち合わせや面接もすべて画面上でやり取りされ、

便利になった反面、

オフィスに行くことが激減し、会社の人と雑談などで触れ合うことも、

おしゃれなBGMが流れているオフィスで仕事することも、

休み時間に会社周辺でランチを食べることが無くなったこと...etc。

 

他にも案件を進める上で、チャットでのやり取りが増え、その人がどういった心境で文字を書いているかをうかがったり、文面を考えたり、文字を読んだりすることに対してのストレスを感じることが増えたり、

PMやディレクターと技術の会話をする時に、伝わってないなあ…みたいなシーンが多々あったりし、組織的な問題を感じることも増えた。

 

コロナ禍で働き方、組織のあり方を考え、改善に取り組んでいる会社は増えていて、メルカリやLineなんかは、チームビルディングについてのリモート勉強会や共有会を開くようになり、そこに参加してみると、やはり、リモートワークが中心となった世界では、これまでと異なった価値観で働き方やチームビルディングを行わないといけないということに気付かされた。

そして、チームビルディングが整った組織で働くことが自分の幸せにもなるのではないか?と考えるようになった。

転職前の会社では、そういった取り組みが、自分の見える範囲ではあまり無く、もともと個人プレイで成り立っていた組織が、コロナ禍でより個人プレイが際立つ様になり、人と連携して気持ちよく働きたい身としては、辛いものがあった。

 

転職後の会社では、そういったチームビルディング、働き方に関する取り組みを行っているように感じていて、自分の望むキャリアパスにも合致していたので頑張れそう。

 

2021年の残りも頑張ります。

2020年振り返り

年が明けて2021年になり、もう少しで一ヶ月が経とうとしている。

案件は、ゆったりとこなせている。

毎年1、2月辺りはゆったりしている。

スキルアップのことを考えたり、ダンスのことを考えたりが十分に出来る期間だ。

 

2020年の振り返りをしよう。

 

仕事では、Electronでの開発に時間を割くことが多く、隙間でティザーサイト制作をしたり、他案件のヘルプをしたり、演出の学習としてProcessingを触ったりしていた。

年末はNuxt, TypeScript, WebRTCを使ったオンラインライブ案件で締めくくった。

在宅勤務メインの生活になり、家での仕事に慣れず、案件を掛け持つこともよくあり、徹夜の頻度が多かった…。

今年はそんなことが無いようにタスク管理には気をつけよう。

年末案件は、複数会社、複数人のエンジニアとスピードと品質を意識して開発を進める案件で、開発スピードが格段に上がったし、自分に足りてないものがまだまだある様に感じたので非常に良い経験をした。

 

ダンスは、とにかくイベントが少なかった。

バトルもクラブイベントも2, 3回しか行ってないんじゃないかな。

練習するにしても外に出るのが億劫だったり、

いざ外に出ても謎の罪悪感が常にあったり。

家の中で踊ることが多かった気がする。

ただ、在宅勤務のおかげで仕事の合間、休憩中は常に踊っていた気がするから、踊る時間はそんなに減っていないのかも。

 

世間的に、コロナの影響を受けて生活が激変した1年だった。

 

そして、個人的には、籍を入れ、30代に突入したこともあり、身の振り方を考えることが多くなった。

 

今までは、周りが向いている方向に自分を合わせていたことが多かった気がする。

仕事であれば、会社が目指す方向に合わせるだけだったり、他エンジニアの意見を参考にしすぎたりといった感じで、

ダンスであれば、バトルで勝ってる人のスタイルやショーで優勝したスタイル等を鵜呑みにするだけといった感じ。

 

それだと、自分がこう有りたいという理想像にいつまで経っても近づかないし、気持ちが幸せにならないままだ。

 

まだまだ、自分に足りていないことが多く、子供ができて、家を買って、etcとか今後のことを考えると、

無駄なことをやっている時間は余計に無く、必要だと思えることを走りながら取り込んでいくようにしないといけなくなってきている。

 

今年は、思考の言語化をできる限り行い、必要なインプットとアウトプットのサイクルの量を増やしていこうと思う。

 

最後に、鬼滅の刃の猗窩座が言う「強くなる為に鬼になろう」という手段を選ばない暴論は嫌いじゃない。

 

気を抜くともう1年経ってる・・・。

光陰矢の如し。

 

前の記事を更新してから次の更新は1年後だったり、なんて思っていたけど、それが現実に。。

 

少し案件が落ち着いた為、この1年何をしていたか振り返ってみようと思う。

 

2019/3

案件で利用する汎用的なVueコンポーネントを作成していた。

やばい案件が来ると言われていたが、その案件がなくなり、悠々自適な技術学習ライフを送っていた。

GLSLもこの頃は毎日写経していた。

 

2019/4

この頃からティザーサイトやキャンペーンサイト制作案件がぽつぽつ舞い込む。

フロントエンドエンジニアなのにも関わらず、サイト制作のマークアップのいろはが分からず、困惑する。

特にレスポンシブ対応に苦戦。

 

2019/5-6

GWを終えた辺りで、ひとつめのキャンペーンサイト制作案件が完了し、

次にthree.jsとvue.jsを連動させたキャンペーンサイト案件に取り組む。

3Dモデルを動かせるぜ!ひゃっほー!とか思いながら、モック制作に取り組み、3Dモデルをブラウザの画面に表示するまでには至ったものの3Dの知識がなさすぎて、

結局、案件での担当は、vue.jsを利用したロジックの構築やコンポーネントの作成をする役割となる。

やっぱり、マークアップよりもロジックを組むほうが好きだなーということと3Dの勉強せんとなーと改めて思う。

 

2019/7

案件に余裕ができ、汎用的に利用可能なVueコンポーネントの作成と技術調査を行う。

またまた悠々自適ライフ到来。

 

2019/8-9

キャンペーン案件にアサインされる。

今までは、既に作成されているサイトの微調整だったり、裏側ロジック部分を実装する担当になることばかりだったが、初めてサイト全体のベース部分マークアップや細かな演出やレスポンシブなどの制作する担当になる。

SNSシェア系の対応などなど、サイト制作の当たり前の様な体系的な知識を得る。

lottieを初めて利用。

 

2019/10

運用系の記事更新を行いつつ、別のサイト制作案件にアサインされる。

この辺りから年明けて今に至るまで、あまり暇がなく稼働がうまる。

この頃は、更新しやすいようなマークアップのルール化だったり、jsonをいじるだけで更新できるような作りの実装に取り組んでいた。

 

2019/11

また別件にアサインされ、今度は実装側のリーダー的ポジション担当になる。

静的なマークアップは卒なくこなせる様になっている。

アサインされる案件のレベルが、その時の自分のレベルより少し上のものというものが多く、偶然なのかわからないけど、会社に育てられている様な気がする。ありがたい。

 

2019/12-2020/2

次は設営系の案件で、管理画面で登録したものをセンサーやmidiコンを利用し、投影するというもので、アサインされた当初、担当範囲はフロントエンドだけと聞いていたのだが、蓋を開けてみれば、管理画面のバックエンド側の担当とUnity側と連携する為のAPI作成を1人で行うというものだった。

なんだよそれええええ!と思いつつもいざ取り組みだすと、マークアップ案件よりも全然面白く、自分はこっちの方があっているなと思いながら仕事をする。

Nuxt.js+Node.js+Express.jsの構成で、ExpressでのAPI作成、ファイル書き込み、画像変換処理、動画エンコード処理など、案件利用が慣れないものや初のものばかりだったり、別件との兼ね合いでハードスケジュールだったり、徹夜でプログラミングすることもあったりしたが、それに対する完成物の満足度だったり、案件メンバーとの連携にワクワクしたり、身になるものが多い案件だった。出張が楽しかった。

 

2020/2-3

設営系案件が終わってすぐに次の案件にアサインされる。なんというかメンタルが鍛えられる。またもや偶然か、実装したいなーと思っていた画面遷移をシームレスに行う案件が連続で続く。

先輩エンジニアのロジック実装、演出、アイデアはかなり勉強になる。

 

そして今に至る。

まだまだ勉強したりないことだらけだけど、今の会社にジョインしてから2年間くらい大型システムの開発・運用に耐えてからの、この1年がフロントエンドエンジニアとしての成長に大いにつながるものだったと思う。

 

2020年は30代スタートの年。

この1年はさらに自分の成長につながるように精進しよう。

趣味のダンスもなんとなく続けよう。

 

さて、次の更新はいつになるのやら〜。

 

気を抜くともう1ヶ月経ってる・・・。

はい、ブログを10日毎くらいの頻度で更新しようと思っていたのに、気を抜くとこれですよ・・・。

 

1ヶ月の間で色々実験したものの、ログとして残さないと何をしていたか忘れちゃいますね。

 

最近は毎日30分〜2時間くらいでGLSLの勉強をしています。

 

https://thebookofshaders.com/?lan=jp

ここに書かれていることを写経してみたり、練習問題を解いてみたり、オリジナルを作ってみたりといった感じです。

 

 

f:id:highgrenade:20190327134856g:plain

f:id:highgrenade:20190327134915g:plain

f:id:highgrenade:20190327134954g:plain

f:id:highgrenade:20190327135014p:plain

f:id:highgrenade:20190327135024p:plain

 

知識が増えていくと、その量がある閾値を超えた瞬間、組み合わせのパターンが爆発して、あれもできる、これもできると、能動的にアイデアを出せるようになるみたいなツイートを見て、まだ自分は閾値を超えて無いなと感じました。

イデアを自分発信で出せるように、また、自由自在にGLSLを書けるように粘り強く勉強していこう。

 

GLSLを書き始めた。

最近、GLSLを改めて書き始めた。

 

f:id:highgrenade:20190219130009g:plain

 

1年半ほど前にwgld.orgを順番に写経していたのだが、

いまいちGLSLというものに対して身が入らず、途中で挫折。。

 

それからは、その周辺の事情について軽くしか追っていなかったのだけれど、

最近になって学習モチベーションが回復した為、GLSLを再度学習し始めた。

 

↓GLSLに対しての火が再度ともったのは、amagiさんのこの記事。

blog.gmork.in

 

かっこよすぎる!!!

自分もこんな感じでシェーダーが書けるようになりたい!!!

 

入門系の記事を色々探した結果、

↓doxasさんのこのシリーズが一番入りやすかったので、やってみた。

[連載]やってみれば超簡単! WebGL と GLSL で始める、はじめてのシェーダコーディング(1) - Qiita

 

とりあえずは、以下のレベルのフラグメントシェーダを

意味を押さえながら空で書けるようにはなってきた。

 

precision mediump float;
uniform float t;
uniform vec2 r;

void main() {
  vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
  float s = sin(t * p.y);
  float c = cos(t * p.x);
  gl_FragColor = vec4(c, s, -s, 1.0);
}

 

ただ、三角関数やベクトル、行列などについて高校レベルの知識しか持っていない為、ソースが複雑になるとどの様に描画されるかは全くイメージできない。

雰囲気でシェーダが書けるレベル。

頂点シェーダに関しては全くまだ理解できていない。

 

もっと掘り下げていこうと思う。