ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。

2021年のふりかえり

去年は結局ふりかえりをしなかったので、今年は面倒になる前に書いていく。総評として、悪くない一年だったと思う。

今年の仕事

  • TypeScript、React、Jestを使ったフロントエンド開発
  • CakePHPのバージョンアップ

CakePHP、TypeScript、React、Jestに明け暮れた1年でした。1月〜4月までは別口でGatsbyに触れる機会もあり、そこでGraphQLのキャッチアップもできた(せざるを得なかったとも言える)。また、空いた時間でGatsbyのバージョンアップにもチャレンジしたのは個人的な加点ポイント。

GW以降は社内で担当するプロジェクトが変わり、フロントエンドの実装を書く機会が急激に増えた。フロントエンドのテストに振れるのは数年ぶりだったので、Jest + testing-libraryの書き味に慣れるのが大変でした。

夏頃は組織で向き合う課題の1つである「CakePHPのバージョンアップ」に取り組み、結果的に2つのアプリケーションをCakePHP4系にアップグレードできました。普段一緒に仕事をしない同僚達とチームを組んで数ヶ月間を過ごし、非常にエキサイティングな時間でした。

仕事以外の活動

仕事以外の活動もそこそこ頑張ってました。

登壇

2020年末の登壇を含めると、定期的な登壇が出来た1年でした。CFPが全く通らない2019年頃と比べると大幅な進歩と言っても過言ではない筈。

2022年はGoをメインに勉強していくので、そちら方面での登壇を個人的な目標にしています。

輪読会

社内で輪読会が盛り上がる機運があったので、秋冬で輪読会を開催しました。読んだ本は以下の2冊です。

2冊目の輪読会は継続中で、来年の2月くらいに終わる想定で進めています。

ちなみに、開催にあたって2つのことを意識しました。

1つめは人数を少なめにして、上限を4〜5人に留めること。これは参加者の発言時間の確保とスケジュールの調整コスト軽減を目的としています。2つめは参加メンバーを同じ職種の人だけにしないこと。これは部署を跨いだコミュニケーションの機会を作りつつ、視点の偏りを防止するためです。

AWS認定

過去のブログでも振り返っていますが、秋にAWS認定を受験しました。Cloud PractitionerとDeveloper Associateの2つを受験し、無事に一発合格できました。

Cloud Practitionerは数日勉強すれば問題なかったんですが、Developer Associateはなかなかハードでした・・。Dynamo DBやKinesisをプロダクトを使う機会はこれまで無かったので、その辺のキャッチアップに手こずった印象です。スコアはギリギリで8割に届いてなかったので、見直しの詰めが甘かったら普通に落ちていたと思います。

試験の振り返りブログは以下。

来年の抱負

来年はGoやGraphQLを本格的に習得するために時間を使います。去年はPHPRDBMSAWS等の習熟に時間を使ったので、2022年は自分が習得していないものを学んでいく必要性を感じています。

あと、英語の勉強の再開ですね。秋にカンファレンス登壇やAWS認定と色々詰め込みすぎてしまい、勉強を2ヶ月以上中断してしまいました。これは自分のキャパシティを把握せずに張り切った結果なので・・キャパシティを俯瞰できる簡易的な仕組みを作って対処するようにしました。勉強自体は12月中旬から再開しているので、途切れないよう地道に積んでいくつもりです。

まとめ

2021年9月くらいまではひたすら引きこもって、たまに登壇。年の後半はAWS認定の勉強に打ちこんで燃え尽きて、英語の勉強を一度投げ出しました。11月、12月は二年近く会ってなかった友人達と食事や飲み会をして、そうしてるうちに年の瀬を迎えております。

反省点はいくつかあるものの、形になったアウトプットをいくつか残せたので及第点ではある筈。100点満点で75点くらいかな?

ということで、2022年は80点を目標に頑張っていきます。

リモートワークでの信頼関係に思いを馳せる

今の会社に入社したのが昨年の8月。物理出社した日は片手で数える程度で、ほぼ100%リモートワークで働いてきました。その過程でリモートワークについて自分なりに考えたものを言語化しておきます。

感情は信頼を揺さぶる

ここ数ヶ月の自分の思考を整理してみて思ったのは、「よく知らない相手は信頼できない」という結論でした。

リモートワークは必要な時に必要な事のみを話す働き方になりがちです。一緒に働いている同僚の好きな食べ物も知らないし、趣味が何なのかも知らない。そんな状態が続きます。仕事が上手くいっている時は問題ないかもしれませんが、互いの意見がぶつかった時はそうもいかず、僕は相手の意見を自分への攻撃と感じた経験が何度かあります。「よく知っている人なら、あそこまでネガティブな受け取り方はしなかったかも」と今でも思い返す機会があります。

そもそも、人間は感情に左右される社会的な生き物です。「酒や音楽の趣味が合う」「学生の頃に同じスポーツをしていた」程度の情報でも他者に親近感を感じ、興味を持つ人が大多数でしょう。そうした興味が相手に対する理解に繋がり、日常のコミュニケーションにも大きく作用します。

テキストベースに移行したコミュニケーション

リモートワークではチャットやドキュメントを介した文章上のコミュニケーションが主流となりました。IT企業に限らず、日常的なやり取りはチャットで実施されるのも珍しくはなくなりました。

ですが、テキストを表示している画面から感情は読み取れません。同じ空間にいないので、表情や雰囲気といった情報はありません。どう感じるかの判断はメッセージを受けとった人次第であり、ここの判断にも当人の感情が関わってきます。

「あなたの意見は〜の理由でよくないと思いました」というような言い回しも、受け取り方は相手次第です。僕の場合、信頼関係が既にある人からであれば謙虚な気持ちで耳を傾けようと思いますし、よく知らない人からであれば喧嘩を売られた気持ちになる可能性もあります。

自分の意見を論理的に言語化するのはもちろん大事ですが、意見を戦わせる機会がある人と友好的な関係を築くのも等しく大事なことです。

相手を知る努力

僕が普段意識していることが2つあり、1つめは「自分に関する話を積極的に話す」です。

現在所属しているコネヒト株式会社ではチャットツールにSlackを使用しており、分報チャンネルを使っているメンバーも一定数います。僕は自分の分報をTwitter感覚で使用しており、あらゆる内容をカジュアルに発言しています。

  • 12月になったからグラコロを食べたい。
  • 昼にラーメンを食べ過ぎて、今になって眠い。
  • ライブ・コンサートの抽選に当たった(もしくは落選した)。

このように仕事に直接関係の無い日常的な話をすることで、相手から「よく知らない人」と思われないようにしています。(※補足ですが、仕事に関係ある話はチームメンバーが集まっているチャンネルでするように意識しています)

分報のつぶやきをきっかけに他部署の人とコミュニケーションする機会が実際に生まれてもいます。

2つめは「自分がいるチーム以外にアンテナを張る」です。

会社でSlackを使っていると先程説明しましたが、社内には部署・チーム単位で様々なチャンネルが存在します。自分のチームに関係するチャンネルさえ見ておけば仕事に支障はほぼ出ませんが、僕は他チームのチャンネルも(無理のない範囲で)入るようにしています。チームごとの取り組みを知れますし、困り事にあえて首を突っこむことで普段関わる機会が少ない人との関係を作れたりもします。

どの程度の効果があるかは分かりませんが・・「よく知らない人」から「あちこちのチャンネルで見かける人」と周りから思われることで、自分に関わる精神的ハードルを下げられたら良いなと思っています。

まとめ

長々と書きましたが、「仕事以外の会話は無駄じゃない」というのが現時点での結論です。

僕がやっているプロダクト開発のように、変化が目まぐるしく、選択を頻繁に迫られる仕事は多く存在します。そこで戦い続けるためには、互いの意見を忌憚なく言い合えるチームが必要です。そのためには、物理的な出社が当然だった時代とは異なったやり方で人間同士の関係性を築く必要があるのだと考えています。

React Portalでmodalのレンダリング位置を制御する

Reactでmodalを実装する際に便利なものがあったのでブログに纏めてみます。ちなみに、React 16時代から利用できる機能なので目新しい話題ではないことを冒頭で断っておきます。

参考 : React v16の機能紹介

React Portalについて

React Portal は簡単に言うと「子コンポーネントレンダリングするDOMノードを指定する」仕組みです。Reactでは大元となるDOMに対してコンポーネントの親子関係を構築していくのが基本ですが、DOMの階層に外にいるDOMノードにコンポーネントレンダリングしたいケースも起こりえます。その際に利用するのがReact Portalです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex">
  </head>
  <body>
    <!-- 大元となるDOM -->
    <div id="react-root"></div>
    <!-- React Portalを使用したレンダリング先となるDOM -->
    <div id="portal-root"></div>
  </body>
</html>

言葉では伝わりづらいので、実際のHTMLも載せてみます。主要なコンポーネントレンダリングされるのはid「react-root」のdivですが、特定のコンポーネントをid「portal-root」のdivに対してのレンダリングが可能になるのです。

modal実装時の悩みどころ

要素に「重なり順」という関係性が生まれ、子要素が親要素の下に表示されるのはHTMLの基本です。ですが、modalは親を飛び越えていく必要があります。

modalの表示に支障が出ているHTMLのサンプルを実際に作ってみました。

https://codepen.io/rukiadia/pen/gOxBvNz

modalがサイドメニューの下に潜り込んでしまう様子
modalがサイドメニューの下に潜り込んでしまう様子

私が作成したサンプルでは、modalが画面左のサイドメニューの下に潜り込んでいます。modal要素は画面全体に広がる挙動を想定されるので、この見た目は違和感を感じざるをえません。要素の重なり順をz-indexで複雑に制御しているアプリケーションでは、このような状況が容易に起こりえます。

【余談】 z-indexについて理解を深めたい方は「z-index」「スタッキングコンテキスト」をキーワードに参考記事を探してみるのがオススメです。

React Portalを使ってみる

import React from 'react'
import { createPortal } from 'react-dom'

const modalRoot = document.createElement('div')
modalRoot.setAttribute('id', 'portal-root')
document.body.appendChild(modalRoot)

export const Modal: React.FC<Props> = ({ children, closeModal, isOpen }) => {
  return createPortal(
    isOpen ? (
      <Overlay onClick={closeModal}>
        <Container onClick={(event) => event.stopPropagation()}>
          {children}
        </Container>
      </Overlay>
    ) : null,
    modalRoot
  )
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex">
  </head>
  <body>
    <!-- 大元となるDOM -->
    <div id="react-root"></div>
    <!-- レンダリング先のDOMをModalコンポーネントが動的に生成 -->
    <!-- <div id="portal-root"></div> -->
  </body>
</html>

「親コンポーネントから渡されるchildrenをmodal内に表示」「modalのレンダリング先となるDOMを生成」の2つの役割を持つコンポーネントのコード例です。(必要最低限のコードにするため、CSSの記述などは意図的に省いてます)

レンダリング先のDOMをあらかじめ用意することも可能ですが、modalに関する事情をコンポーネント内に纏めたかったのでこうしています。また、テストコードが書きやすくなる利点もあるので、動的に生成する手法がオススメです。

参考 : Testing LibraryのModalテストコード例

まとめ

以上がReact Portalの仕様例の説明になります。

react-modal のようなライブラリを使用すれば必要のない苦労にはなりますが、自作したいケースもあるかもしれません。その場合はReact Portalを使用することで「画面の表示」と「コンポーネント構造」を切り離して実装を進めていくと、開発が楽になる筈です。

9月の振り返り

9月が終わってから十日経っているので今更感がありますが、後でふり返れるようにブログを書いておきます。

9月にやったこと

9月の前半はAWS認定の試験準備、9月の後半はPHP Conferenceの準備に追われてる状態でした。

AWS認定の勉強

7月に合格したCloud Practitionerと違い、AWS公式のトレーニングの中にいい感じのものがなく、最終的にUdemyの講座に落ち着きました。英語音声・英語字幕でしたが、講師の方が話す英語に癖が少なく、聞き取りはそこまで難しくありません。

https://www.udemy.com/course/aws-certified-developer-associate-dva-c01/ www.udemy.com

出題範囲となるサービスの中で理解が浅いものを順次動かし、手になじませる練習をひたすらやっていました。試験ガイドが公開されているので、自信がない箇所を初めに洗い出しておくと勉強の効率がいいと思います。

PHP Conferenceへの参加

今回のPHP Conferenceも非常に楽しかったです。discordも昨年よりも盛り上がっていて、オフラインと同等とはいかないまでもカンファレンスらしい熱気を感じられるイベントだったと思います。

個人的にささったトークテーマは『PHPで学ぶオブジェクト指向プログラミング入門』、『SPAセキュリティ入門』の2つでした。懇親会で参加者の人ともっと話をしてみたかったんですが、登壇が終わって緊張の糸が切れたせいか、当日は早寝をしてしまったのが心残りでしたね。

登壇の話

今回のトークテーマはこちらでした。

fortee.jp

speakerdeck.com

最初はDockerイメージの軽量化に話題を寄せるつもりでしたが、最終的にPHPのオフィシャルイメージを読み解く内容に変更しました。PHPカンファレンスらしい話をしたかったというのが主な理由です。

実際にどうするかは分かりませんが、イメージ軽量化の話は来年のPHPerKaigiでCFP出してみてもいいかもしれないですね。

まとめ

登壇をぼちぼち継続できてますし、AWSへの苦手意識もかなり薄れました。2021年の夏はそこそこの成果を出せたんじゃないかと思います。

秋冬は英語の勉強をちゃんとやって、来年の春はコンピュータサイエンスの学士を取得する道を歩めるように頑張っていきます。

AWS Certified Cloud Practitionerに合格した

「一番簡単なAWS試験に受かったくらいでブログを書くの?」と言われるかもしれないですが、インフラに対して人一倍苦手意識を持ってる僕にとっては大きなステップなので、周りを気にせずにブログを書きます。

なんでAWS資格を取ることにしたのか?

AWSを雰囲気で使ってる」状態を脱して、インフラに対する抵抗感・恐怖感をなくしたかったからです。資格が全てとは思っていませんが、他者に対する知識の証明にもなりますし、自分への肯定感に繋がります。それに何より、資格を持っていて損をすることはない筈だと考えました。

試験準備に何をしたのか

  • AWS公式が提供しているトレーニング動画を見る。
  • AWSではじめるインフラ構築入門」を読んで、実際にインフラを構築する。

以上の2点です。体系的な知識を学んだ後、実際に手を動かして知識を実践する流れを取りました。

AWS公式のトレーニン

AWS 認定試験に備える

受験を考えるまでは知らなかったんですが、AWSは公式のトレーニング教材を数多く提供してくれています。「AWS Certified Cloud Practitioner」も例外ではなく、教材となる動画があります。音声は英語ですが、日本語字幕があるので英語に抵抗がある人でも問題なく見れると思います。

AWSではじめるインフラ構築入門」でインフラ構築

www.shoeisha.co.jp

アプリケーションエンジニアである以上、知識として知っているだけでは十分ではありませんし、実際に手を動かす方がが知識の定着を見込めます。元々は資格勉強のために買ったわけではありませんでしたが・・結果的に非常に役立ちました。

本の内容はTwitterライクなSNSアプリケーションをEC2インスタンスにデプロイして動かすというものです。

このような流れでリアルなアプリケーション構築をなぞることができます。普段の仕事でVPCの構築をおこなったことがなかったので、実際にやってみるのは非常に楽しい経験でした。試験の範囲に含まれていない部分もありますが、手を動かすことが知識の定着の大きな助けになりました。

今後どうするか

基礎は基礎で手応えがある内容でしたが、アプリケーション開発の知識はもう少し欲しいところです。プロフェッショナルまで取ることは現時点では考えていませんが、8月〜9月に認定アソシエイトの試験は受けてみようと考えています。

『オブジェクト指向UIデザイン』を読んだ感想

はじめに

www.amazon.co.jp

UIデザインを学ぶ必要性を感じたので、積ん読にしていた本を読んでみました。この本を読む前は『はじめてのUIデザイン』を読んでいて、次は実際に手を動かすステップがある本を求めていたら、『オブジェクト指向UIデザイン』にたどり着きました。

オブジェクト指向UI」とはどんなものだった?

この本では、エンジニアとしては馴染みのある概念である「オブジェクト」をデザインを考えるために使用しており、「オブジェクト = ユーザーの目当て」と表現しています。この場合の「目当て」とは、AmazonのようなECサイトであれば「商品」となり、はてなブログやnoteのようなコンテンツを扱うサービスであれば「コンテンツ」となります。目当てとなるオブジェクトを中心にユーザーが行う行動を設計していく手法がこの本では語られています。

  • ECサイトの「商品」に対する行動
    • 詳細を見る
    • 検索する
    • 「欲しい物リスト」や「気になるリスト」に入れる
    • バスケットに入れる

このように「オブジェクト = ユーザーの目当て」を中心に行動を考えていきます。つまり、UIデザインを実際に始める前に、アプリケーションのメインが何になるのかを先に考えていきます。

オブジェクト指向UI」とは逆の「タスク指向UI」

オブジェクトではなく、タスクを中心に考える手法です。ECサイトを例に言語化するとm「〜を買う」の動詞に対して、名詞である「商品」を引数として渡すイメージです。

この本では銀行のATMを例に挙げていました。最初の画面で利用者に行動(引き出し、振り込み等)を選択させるUIとなりますが、ATMの場合は「タスク指向UI」が機能する例として扱われています。何故なら、ATMで扱うオブジェクトは「口座」のみだからです。

現実でありがちな「タスク指向UI」

現実世界のやり取りをそのままUIに落とし込むと「タスク指向UI」になりやすいと個人的には考えています。ここで、ハンバーガーショップハンバーガーを買うシーンを想像してみてください。

  • お客さん「注文いいですか?」
  • 店員さん「店内でお召し上がりでしょうか?」
  • お客さん「持ち帰りで」
  • 店員さん「ご注文をお伺いします」
  • お客さん「チーズバーガーのセットで。飲み物はコーラでお願いします」
  • 店員さん「お支払い方法はどうされますか?」
  • お客さん「Suicaで」

実際の店舗で行われるやり取りの基本です。このやり取りをそのまま画面に置き換えると、最初の画面は「店内or持ち帰りを選択する画面」になるはずです。この本を読んだ後、飲食店の券売機やオンライン注文を実際に利用してみました。

牛丼チェーンはテイクアウト不可の商品もあるので、最初に「店内で食べるか」を選択させたいのは理解できます。決済する段階まで進んだ後に「この商品はテイクアウト不可」ですと言われたらムッと来ますからね・・。

ですが、ピザを注文する時に「配達」か「持ち帰り予約」を最初に選択させられるのは納得いきませんでした。メニューを見たかったのですが、配達先の住所を入れ終わらないとメニューが表示されなかったのです。「配達」と「持ち帰り予約」の違いは割引があるかどうかだけなので、「まずはメニューを見せてくれ!」という気持ちでいっぱいでした。

読んでみた感想

自分のような「デザインを少しでも理解したい非デザイナー」には得るものが多い書籍でした。普段使っているアプリケーションの画面を見ている時も「このアプリの主要人物は誰だろう?」と考えるようになったので、自分の中での思考の変化を感じています。書籍の1/3は読者が画面を実際に作るパートになっており、この構成も理解を深める助けになっています。

一方で少しひっかかる箇所もありました。プログラミングやデータベース設計を比較例として挙げている頁があるのですが、非エンジニアの人には逆に伝わりにくくなっている印象です。エンジニア側の自分にはスッと入ってくる話でしたが、賛否が分かれるところだと思います。