msksgm’s blog

msksgm’s blog

Webエンジニアです。日々の勉強記録、技術書感想、美術観賞感想を投稿します。

「ハッカーと画家 コンピュータ時代の創造者たち」感想

ハッカーと画家 コンピュータ時代の創造者たち」[2005, ポール グレアム (著), Paul Graham (原著), 川合 史朗 (翻訳)]を読みました。

感想

エンジニア系ビジネス書の一つです。
知り合いのエンジニアが推薦したのと、タイトルから気になっていたので読むことにしました。

本書は、16章(0章もあるので合計17章)から構成される筆者のエンジニアリングとビジネスの体験談と時代の潮流をまとめたエッセイです。
冒頭に書かれているように、独立しているので興味あるところだけ読むことができる内容となっています。
文章は、英語を日本語訳されたものです。不自然な日本語はありませんが、言い回しが少し読みづらいかもしれません。

著者の様々な観点から記述されており、章のタイトルが例えば、「どうしてオタクはもてないのか」、「ハッカーと画家」、「百年の言語」などと、同じ本にあるとは思えないぐらい関連がありません。

具体的な内容もあまり関連性がなく、簡単にあげると

みたいな感じです。

なので本当に興味があるところは面白いですし、興味がなければ退屈な内容となっています。
ただし、何かしらのタイミングでエンジニア系ビジネス書を読みたくなったら早めに読むべきだと思います。
なぜなら、自分自身に重なるところが少なからずあるからです。
これは、技術の変化は振り子や螺旋に喩えられるように、どこかしらで通る道を 2005 年時点でまとめられたものになっています。
今までの自分や今後の自分が遭遇するであろうことが書かれていると思いました。
自分も、数年したらもう一回読みたいと思います。

感想まとめ

独立した章から構成されるエンジニア系ビジネス書エッセイ。
独立しすぎてて少し退屈かもしれませんが、興味があるところは参考になるのと、いつかは遭遇するかもしれない事例が記載されています。
急いで読む本ではありませんが、興味があれば是非読んでみてください。

「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」感想・まとめ

「Atomic Design ~堅牢で使いやすい UI を効率良く設計する」[2018, 五藤佑典]を読みました。

感想

フロントエンドのデザインパターンの一つの「Atomic Design」について、React を用いながら実践的なソースコードとともに解説をおこなう本です。
著者の五藤佑典さんが Abema TV で Atomic Design を導入して行った経験を元に、執筆された本です。
この本を読んだ理由は、React を用いた Web アプリの作成時にディレクトリ構成や共通項の抽出などについて悩んだ経験があったからです。

第1章で、UI や JavaScript、SPA などのフロントエンド技術に取り巻く歴史についての解説から本書は始まります。第2章で SPA からコンポーネント・ベースの UI 開発によるメリットや導入方法、要点などについてまとめられます。そして第3章で AtomicDesign の解説、第4章で JavaScript と React を用いた実装方法の解説、第5章でコンポーネントテストの解説、第6章で開発現場における導入ポイントについてまとめています。

ページ数とソースーコードが多いため、途中で読み進めるのが難しい箇所もありますが、React を触ったことがある人なら、読み進めることはできそうです。(まったく触ったことがなければ難しそう)。

良かった点

良かった点は3つあります。

1つ目は具体的な実装方法、メリット、思考方法について記述していることです。
Atomic Design を調べても、Atoms、Molecules などの用語はでてきますが、踏み込んだ内容の記事はないように思われます。この本は具体的な実装方法、改善方法でボトムアップに進めていくので、今後導入していくときに参考になる箇所が多いと思います。

2つ目はコンポーネントテストについての豊富な情報です。
React に限らずのフレームワークの解説書や動画は数多くありますが、テストについて詳細に記述している本は少ないと思います。その中で、この本では UI テストに必要な様々なテストを列挙し、それぞれのテスト方法や利用するライブラリを実際に使っているため、他の書籍と比較して大きな優位点に感じました。

3つ目はデザイナーやチームにおける Atomic Design の導入方法やメリットの紹介です。
Atomic Design は個人開発では、規模感や他人が書いたソースコードがないことから、メリットを感じる場面があまりないような気がします。そこで、本書の6章目で実際の経験を元にした実務における活用方法はとても貴重な内容だと思いました。

悪かった点

悪かった点は2つあります。

1つ目は誤字が多いことです。Amazon レビューにもある通り、誤字が多く評価を下げている要因になっています。 出版社の正誤表にも載っていない誤字が多くありました。

2つ目はソースコードが zip 管理であることです。章ごとにブランチを切ったり、テストを実行することで、少なくともソースコード誤字は減らせたのではないでしょうか。

注意点

本書は React で作成されているので、Vue.js で実装したい人は置き換える必要があります。
グローバルな状態管理には Redux を使っていて、普段 useReducer や useContext を使っている人も置き換える必要があります。
また、デザインカンプから Atomic に分割するには、自分で何個か作成したり、参考になるサイトを見つける必要があると感じました。

感想まとめ

数少ない、Atomic Design の実践方法についてまとめられた本です。(他にあるのでしょうか?)。
具体的なソースコードが載っているので、具体的な Atomic Design を実装したい人にはうってつけだと思います。Atomic Design 以外にもテストや導入方法については一読の価値があります。
上記の悪かった点、注意点は改訂版などがでなければ修正が難しいため、合わない人は購入を避けた方がいいかもしれません。

概要

はじめに

  • UI をより効率良く開発したい
  • コンポーネント・ベースで,確実で効率が良い開発を実現する

第1章 UI 設計における現状の問題を振り返る

UI、JavaScriptフレームワークについての解説です。
とても簡潔にまとまっていてわかりやすいと思います。
より React も交えた深堀をしたのであれば、りあクトという書籍がおすすめです。

第2章 コンポーネント・ベースの UI 開発

この章は一言で言えば、「なぜ、コンポーネント・ベースで UI 開発するのか」です。
開発や技術的なメリットについての説明がされています。

第3章 Atomic Design による UI コンポーネント設計

Atomic Design の概要についての解説です。
特徴、メリットの他、関心の分離や階層を分けることによる依存関係の分離なども記述されており、クリーンアーキテチャのような思想を学べます。

第4章 UI コンポーネント設計の実践

Atomic Design の具体的な実装方法です。
デザインカンプを Atomic Design 的にわけるところから始まり、最も小さな Atomic を作り、組み合わせて、Molecules、Organisms を作るようにして、ボトムアップな解説がすすんでいきます。 章のページ数が多いので、一気にやらないと忘れてしまうかもしれません。

第5章 UI コンポーネントのテスト

テストについての解説です。
リグレッションテスト、ロジックテスト、インタラクションテスト、パフォーマンステスト、インクルーシブユーザービリティテスト、などと数多くのテスト手法についてのテスト方法が記載されています。
逐一やるのは大変なので、ある程度読み進めて個人開発の際にもう一度読みな直すなどが良いと思います。

第6章 現場におけるコンポーネント・ベース開発のポイント

デザイナーと働いたり、チームで並行して開発を進めるときのポイントについて書かれています。
個人開発では、Atomic Design はメリットを教授しづらいので、これらを意識した開発を進めたり、実際にデザインカンプを作る経験などをしたりすることで、多くのことを得られそうです。

「STEPS AHEAD: Recent Acquisitions」感想 "13歳からのアート思考"を読んだら是非一度訪れてほしい

STEPS AHEAD: Recent Acquisitionsにいってきました。

STEPS AHEAD: Recent Acquisitions について

STEPS AHEAD: Recent Acquisitions は、アーティゾン美術館で開催されました。
会期は 2021 年 2 月 13 日(土) ~ 9 月 5 日(日)となっています。
Instagram鮎川龍二くんが紹介していたことから、いくことにしました。
5月時期の緊急事態宣言により一時期休館していましたが、なんとかいくことができてよかったです。

作品 概要

14 のセクションにわけて石橋財団が収集した作品を展示するコレクション展です。

14 のセクションはそれぞれ

  1. 藤島武二の<<東洋振り>>の日本、西洋の近代絵画
  2. キュビスム
  3. カンディスキーとグレー
  4. 倉俣史郎と田中信太郎
  5. 抽象表現主義の女性画家たちを中心に
  6. 瀧口修造実験工房
  7. デュシャンとニューヨーク
  8. 第二次世界大戦後のフランスの抽象美術
  9. 具体の絵画
  10. オーストラリアの美術~アボリジナル・アート
  11. 日本の抽象画
  12. 石橋財団コレクションの超高精細スキャニングプロジェクト
  13. アンリ・マディスの素描
  14. 芸術家の肖像写真コレクション

となっています。

主に 19 世紀から 20 世紀のアートの変遷を収集しているので、キャビスムやコンポジションポロックなどの絵画作品が収集されているほか、ヂュシャンの近代アートも展示されている内容となっています。
他にも、日本人画家たちの作品が多く取り揃えられていたり、オーストラリアの美術が展示されていたり、彫刻が展示されていたり、こだわりをもって集められた内容となっています。

感想

個人的によかった3点ついて列挙していきます

書籍「13歳からのアート思考」で紹介された画家の作品が多数出品されている

STEPS AHEAD: Recent Acquisitions では

などといった、「13歳からのアート思考」で紹介されていた、アートの固定概念を壊したアーティストたちの作品が多数展示されています。

具体的には、一つの絵画に複数視点を持たせたキュビスムの作品や、具象物を描かないカンディスキーの「コンポジション」、新たなアートの定義に対して物議を醸し出すことに成功したマルセル・ヂュシャンの作品たち、絵画はなにかを書くものから、絵具そのものを対象としたポロックの「ナンバー」、写実的以外に絵の価値を考えたマティスの作品などです。

自分は、「13歳のアート思考」読了後に来館したため、教科書にでてきた作品が目の前にあるような楽しみ方をすることができました。

msksgm.hatenablog.com

西洋美術に影響を受けた日本人画家たちの作品

黒田清輝藤島武二などといった、西洋美術を取り入れて日本美術を盛り上げようとした人たちの作品も多く展示されています。

構図や描き方などは、西洋のそれを真似ているのですが、やはり明確な違いがあり、遠目で観ても日本人が描いたものであるとわかります。
浮世絵などの影響で光ではなく線で描いていた日本人たちが、今までの描き方を試行錯誤させながら取り入れていったことがわかります。

西洋の良さを取り入れながら自分なりの答えを出そうとしていた日本人画家の作品を楽しむことができました。

時代の変遷に従いながらも作られて行った作品たち、など

上記で紹介した作品たち以外にも、「抽象表現主義の女性画家たちを中心に」、「第二次世界大戦後のフランスの抽象美術」、「オーストラリアの美術~アボリジナル・アート」、「日本の抽象画」などといったセクションでそれぞれの特徴を掴むことができるのでおすすめです。

特に、アボリジナル・アートは他の作品にない文化を感じとることができる作品となっていました。

まとめ

STEPS AHEAD: Recent Acquisitions では、全体的に「13歳のアート思考」で紹介されていたアーティストの作品が展示されており、「読んだけどどこの美術館にいけばいいかわからない」といった人に是非進めたい内容となっています。
まだ読んでいない人も読んでからいくとより楽しめるとおもいますし、本展示会を楽しんだ人なら、この書籍も楽しむことができると思いました。

また、展示会も全体を通して様々な時代の作品を集めているため、始めた美術館にいく人にもわかりやすく親やすい内容となっていると思いました。
ぜひ、一度行ってみてください。

「Team Geek Google のギークたちはいかにしてチームを作るのか」 感想・まとめ

「Team Geek Googleギークたちはいかにしてチームを作るのか」[2013, BrianW.Fitzpatrick/BenCollins‐Sussman]を読みました.

感想

有名なエンジニア系ビジネス書の一つです.

Goole のエンジニアが書いた書籍でエンジニアがどのようにして,チームで円滑に仕事ができるのかについて書かれています.
以前読んだエンジニアリング組織論への招待と比較すると,組織論というよりはメンタル(HRT)のことに焦点をあてています.
しかし,仕事のメンタルについて,エンジニアのみに焦点を当てた本は少ないと思うので,貴重な内容となっています.

本書の大きなテーマは HRT(Humility:謙虚,Respect:尊敬,Trust:信頼) です.
それらを6つの状況を6つの章ごとに,どう適応していくかを書いています.

HRT は,駆け出しエンジニアのときだけでなく,マネージャーやテックリードになったときにも必要な要素になっています.また,エンジニア間の関係だけでなくビジネスや友人関係でも同じように持つべき要素だと思いました.

例えば,人の意見に対して間違いを指摘するときに,正論であっても言い方を間違えれば,その人の人格を否定する(Respect を持っていない)ことになってしまいます.そのような状況になったときには,相手は二度と聞き入れてくれないでしょう. 逆に言えば,人格を否定しなければ,相手に嫌われることを怖がって間違いを指摘しない(Humility は意見を言わないのと違い,相手の意見を素直に受け入れたりすること)のは間違いだということも言えます.また,間違いを指摘された方も人格を否定されたのでなければ Humility を持って意見を聞くべきです.

他には,マネージャーも人間だから間違えたり知らないことがある(むしろ知らないことが増えていく)のにそれを部下に隠そうとすることです.これは部下に対して Trust を持っていないことに他なりません.

これは言葉にするのは簡単ですが,実践するのは難しいことだと思いました.

あと個人的は,正しいことをして解雇を待つという,正しいことをして解雇されたなら,組織とあっていないという考え方も好きでした.

このように,HRT を持たなければ,知らず知らずのうちに悪い方向へ向かってしまう状況がわかりやすく記載された本です.
普段の仕事で HRT を少しでも意識することで他人との関係性が円滑にすすみそうですし,今後のキャリアにおけるアンチパターンについて学ぶことができた本でした.
また,ページ数も少なく簡単に読めるのでおすすめです.

概要

はじめに

"エンジニアリング簡単だ.人間は難しい".(Bill Coughran)

1章 天才プログラマの神話

一人で広く使われるプロダクトを作成した人はいない.
なのに,リーナス・トーパルズ,リチャート・ストールマンビル・ゲイツに憧れる.
確かに天才だけど,それだけでは不十分.

天才の神話は不安の裏返し.
ソースコードを隠したがるのは,天才じゃないなと思われたくないから.

いつも一人でやっていると,失敗のリスクが高くなる.
早い段階から,成果を共有することで,プロジェクトのバス係数を高めることができる.
ソースコードを完成させてからコンパイルを始めないように,間違いをその都度デバッグする必要があるのは,チームでも同じ.

ソフトウェア開発はチームスポーツである.
隠れ家に一人でいたら,才能が開花することもないし,世界を変えることもできない.
誰かと一緒に仕事をしなければならない.

三本柱

「HRT」の原則を守こと.
あらゆる人間関係の衝突は,謙虚・尊敬・信頼の欠如によるもの

謙虚(Humility)
世界の中心は自分ではない,常に改善を続けていく

尊敬(Respect)
一緒に働く人のことを心から思いやる.相手を一人の人間として扱い,その能力や功績を高く評価する

信頼(Trust)
自分以外の人は有能であり,正しいことをすると信じる.そうすることで仕事を任せることができる

実践 HRT

エゴをなくす.どこもかしくも自分の意見を言わないようにする.
「謙虚」は自分の意見を言わずに黙れということではない.
エゴは様々な形であらわれ,生産性を疎外し,速度を落とす.

批判の配分と対応を学ばなければならない.
批判するときは,建設的な批判のみにする.性格を否定するようなことをいってはならない.
そこに尊敬が含まれる.自分のスキルに謙虚になり,相手のことを信頼する.
君は君の書いたコードではない.

早い段階で失敗・学習・反復する
ミスによって損害がうまれても,そこで解雇するのは,同じミスをおかさない人物を解雇するのと同じ
不完全なソフトウェアをみせても良いという謙虚と,改善できるという信頼.
失敗を文書化(ポストモーテム)する.
ポストモーテムによって,何を学んだかと何を変更するかを記述する.

学習のための時間を残す.
最も知識のある人になるのは楽しいが,局所最適化する.
謙虚になって誰かに教えるのと同じぐらい自分でも学ぶようにする

忍耐を学ぶ
HRT によってプロジェクトと友情を助けることができる

影響を受けやすくする
影響を受けやすくなれば,影響を与えやすくなれる.
間違いや能力不足を認めることは,長期的に立場を向上させる.
HRT では,謙虚をみせ,説明と責任をはたし,他人の意見を信頼する.そして,その正直さと強さによって,みんなが尊敬してくれる.

重要な変化は君から始まる.

2章 素晴らしいチーム文化を作る

文化とはなにか

文化(culture)は酵母のように,スターターによっておいしいチーム(パン)が出来上がる.
スターターが弱ければ,新米ものが持ち込む未知の菌(文化)に耐えられない.

文化に合致しない人を採用すると,合致しない人をチームから追い出したり,合意する人を新たに探したりする手間がかかる.

優秀なエンジニアは他の優秀なエンジニアと働きたい.
プロダクトの意思決定プロセスにも参加したいと考えている.
「合意ベースのチーム」よってチーム全体が意思決定プロセスに参加できる.

成功するコミュニケーションパターン

コミュニケーションの原則は,同期コミュニケーションの人数を減らし,非同期コミュニケーションの人数を増やすこと

ハイレベルの同期

ミッションステートメントを書くことで,認識の違いを明らかにし,プロダクトの方向性に合意する

3章 船にはキャプテンが必要

「リーダー」になろうと思っていないのに,なぜかリーダーになってしまう.
こうした苦悩を「マネージャー炎症(manageritis)」と呼ぶ人もいる.

エンジニアは数ヶ月間かけて新しいチームに追いつく(数日間の件数ではだめ),エンジニアには考えたり創造したりするための育成・時間・空間が必要

マネージャーになりたがらないのは,指標があいまい(なにもしていないという評価になったりする)だったり,過去に無能なマネージャーしかしらなかったりするから.

マネージャーになるべき大きな理由の一つめは,自分自身をスケールできるから.一人で書けないコードを,優秀なエンジニアが集まってかくことができる.
二つ目は,マネージャーに向いているかも知れないから.

サーバントマネージャー

自分がマネージャーにうけたひどい仕打ちをやってしまうことがある.

それに対する対処方法は,「サーバントリーダーシップ」を持って,執事や召使のように,チームに奉仕すること.
サーバントリーダーとして,謙虚・尊敬・信頼の雰囲気を作り出す.

アンチパターン

  1. 自分の言いなりになる人を採用する
    • 自分の評価を恐るから.
  2. パフォーマンスの低い人を無視する
    • なにも解決しない.
  3. 人間の問題を無視する
    • 技術面だけを大切にしてはいけない
  4. みんなの友達になる
    • 友人関係とチームをリードすることを混合してはいけない
  5. 採用を妥協する
    • 間違った人材を採用することは,その後のコストが何倍にも嵩む
  6. チームを子どもとして扱う
    • 信頼していない証だ.HRT をもつこと

リーダーシップパターン

  1. エゴをなくす
    • 謙虚は自信がないこととは違う.チーム全体のエゴやアイデンティティをもつ.リーダーも人間なので間違えることを理解する.HRT をもつ
  2. 禅マスターになる
    • 自分の考えを平成に保つ.問題を持ちかけられても,問題解決するのではなく,問題解決できるように支援する
  3. 触媒になる
    • 多くの場合,適切な答えを知るよりも,適切な人を知る方が価値がある
  4. 先生やメンターになる
    • チームのプロセスとシステムの経験,誰かに教える能力,相手がどれだけ支援を必要としているか把握する能力をもつことがメンターの条件.必要十分な情報を与えることが期待される
  5. 目標を明確にする
    • ミッションステートメントを持つことでチームの方向性を明確にし,リーダーは空いた時間で他のタスクを処理できる.チームの効率が劇的に向上する
  6. 正直になる
    • 「褒め言葉のサンドイッチ」を避ける.必要以上に傷つけることを避けて,本質的なことが伝わらいことがあってはならない.
  7. 幸せを追い求める
    • チームの幸せを計画する.1on1 のあとに「何か必要なものはある?」と質問する.チームメンバーが生産的で幸せになるために必要なものを簡単に把握できる
  8. その他のヒントやトリック
    • 委譲せよ.ただし手は汚せ.
    • 自分自身を置き換えようとする.
    • ことを荒立てるときを知る
    • カオスからチームを守
    • チームを空中援護する
    • チームのいいところをフィードバックする

人は植物

同じ親の子供達の育て方が全く違うように,エンジニアの成長に必要なものはまったく違う.
チームメンバー全員を「スイートスポット」に入れるには,「マンネリ」にいるエンジニアのモチベーションを高める必要がある.
「モチベーション」と「方向」を与える必要がある.
何がすべきかを理解して,構造化のスキルを身に付けて,管理可能なタスクに分離する.

内発的動機と外発的動機

「モチベーション」外発的ではなく,内発的でないといけない.
自律性をもってマイクロマネジメントではなく,自分で考えて行動できるようにならなければいけない
熟達はエンジニアが新しいスキルを学び,既存のスキルを向上させるための機会を作ることである.
自律性と熟達は,理由もなく仕事をしている人のモチベーションにはつながらない.仕事の目的を与えなければならない.

4章 有害な人に対処する

「有害」の定義

チームの文化に含めないことについても議論すべき.
効率的に動きの速いチームを目指しているのならば,やりたくないことも明確にしておいたほうがいい

「有害な人」という言葉は乱暴だし,善人と悪人で簡単に区別すべきではない
排除するべきなのは振る舞い
「有害な人」は説明用で,日常生活でつかってわいけない

チームを強化する

自己選択的な文化に,素晴らしい人は引き疲れる

攻撃的なチームも成し遂げられることはあるが,効率性はあやしい

脅威を特定する

チームの注意と集中に気を付ける

脅威のパターン

  1. 他人の時間を村長しない
  2. エゴ
  3. 権利を与えすぎる
  4. 未熟なコミュニケーションと複雑なコミュニケーション
  5. パラノイア
  6. 完璧主義

有害な人を追い出す

振る舞いを追い出すように対処する

  1. 完璧主義者には別の方向性を示す
  2. 生命体にエサを与えない
  3. 感情的にならない
  4. 不機嫌の真実を探せ
  5. 優しく追い出す
  6. 諦めるときを知る
  7. 長期的に考える
    • 長期的にはプロジェクトにメリットがあるか?
    • その衝突は有益な方法で解決できるか?

無能で十分説明されることに悪意を見出すな(ロバート・J・ハンロン)

5章 組織的操作の技法

理想:チームがうまく機能している会社

  • 理想的なマネージャー
    • 自分の責任範囲を広げる
    • リスクをとる

現実:環境が成功の邪魔になっているとき

  1. 悪いマネージャー
    • 失敗に対する不安
  2. オフィスの政治家
    • 影響力のある人になろうとしているのではなく,影響力のある人を探そうとしている
  3. 悪い組織

5.4 組織を操作する

会社にもルールがある.曲げてもいいものもあれば,ぶち壊していいものもある.
組織のなかで振舞うべきことばかりに集中していると,不満や失望を感じるだけ

  1. 許可を求めるより寛容を求めるほうが簡単
    • 許可はダメといわれることがある.
    • 「寛容を求める」道を選ぶ
  2. 道がないなら道を作る
    • 誰かを説得するときには,あらかじめ賛同してくれる人を探しておいて,対象となる相手との会話のなかでアイデアについて触れてもらう
    • 悪い習慣をなくすのは難しい,悪い習慣を他の習慣でおきかえるしかない
  3. 上司の管理方法を学ぶ
    • マネージャーであってもそうでなくても,上司を管理する時間を作る必要がある.
    • 小さな約束で,大きな成果を届ける
    • エンジニアは,プロダクトのローンチにエネルギーを注ぐべき
  4. 運と親切の経済
    • 運は鍛えることができる(「運のいい人の法則」)リチャード・ワイズマン)
    • 運のいい人は「チャンスに気が付く」
  5. 安全なポジションまで昇進する
  6. 強力な友達を探す
    • コネクタは,会社のことをよく知っている人
    • 引退選手は,組織に関する知識を豊富に持ている
    • 管理スタッフは,組織に協力な権力と影響力を持ている
  7. 忙しい経営者に(メールで)でお願いする方法
    • 3行で問題について説明する
    • 1行で要望を書く

プラン B:逃げる

  • 正しいことをして,解雇されるのを待つ

希望は残されている

仕事を達成するするために何かを変える.
組織を動かすための方法を理解する努力を怠れば,自分の大部分を運に任せることになる

6章 ユーザーも人間

一般認識を管理する

マーケティングという言葉に,あまりいい印象を持たないエンジニアが多い(文化が違うので)

悪いニュースは,マーケティングは無視できない.
いいニュースは,マーケティングとうまくやる方法がある

マーケティングの人間は感情操作に精通している.ユーザーを集めたいのであれば,ソフトウェアに対する感情的な配慮しなければならない.

  1. 第一印象に注目する
    • 第一印象がよくなければ,それ以上はつかわれない
  2. 小さく約束して,大きく届ける
    • 予告しないことで楽しみが生まれる
  3. 業界のアナリストと付き合う
    • 業界のアナリストに対して,優遇するわけでも,服従するわけでもなく付き合わなければならない

ソフトウェアはどれだけ使いやすいだろうか

ユーザーに集中すれば,他のことはすべてついてくる
Google は広告よりも,ユーザーを優先したから成功した

  1. 顧客を選ぶ
    • 最も大事なこと:ユーザーの技術能力を考え,なるべく多くの人が使えることを想定する
  2. ハードルを下げる
    • vim の第一印象が悪いように,プロダクトは最初の体験が重要
  3. ユーザーではなく利用を計測する
    • ユーザー登録数ではなく,利用を考える
  4. 速度重要
    • レイテンシを改善しなければ,ストレスとなりユーザーは離れていく
  5. いろいろ手を出さない
    • いろいろ手を出して,使いづらないものになってはいけない
  6. 怠けない
    • 例えば,全ての機能を表示すれば確かに楽だが,ユーザーにとって使いづらいものになる
  7. 複雑さを隠す
    • 複雑なものを隠して簡単なように見せる

ユーザーとの関係を管理する

ユーザーは自分の意見を聞いて欲しいだけだ.不満を言ってきても認知することに意味がある.

また,ユーザーが増えると技術力の平均がさがり,失望するユーザーが増えることを理解しなければならない

  1. 見下さない
    • IT リテラシーが低いことは知能が低いわけではないことを理解する
  2. 我慢する
  3. 信頼と喜びを作る
    • 信頼は貯金だが,なくなるときはいっきになくなる.大切にしようとしていることを伝える

ユーザーのことを忘れない

  • マーケティング
    • ソフトウェアがどのように見えるのか気を配る.ソフトウェアを使ってもらえるかどうかが決まる
  • ユーザビリティ
    • 使いにくかったらユーザーは去ってしまう
  • 顧客サービス
    • ユーザーとの長期的な関係構築が,ソフトウェアの進化やユーザーの定着に影響を与える

ソフトウェアは自分のためでもチームのためでも会社のためでもない.
ユーザーがプロダクトについて何を考えているか,何を言っているか,何を体験しているかに注目することが,長期的に重要なことになる
ユーザーはソフトウェアに欠かせない血液だ.自分でやったことは,すべて自分に返ってくる

6月の振り返り

6月の振り返り 今月から週一で技術記事を作成します.

生活習慣

プログラミング関連

個人開発

1 週目

TypeScript を使ったバックエンドを学習.
3 層アーキテクチャを構想,TypeScript で DI を使うツールは,typeDI,TSyring,inversifyjs の 3 つがります.
現在コンパイルが通りません.

2 週目

TypeScript,express,typeORM,typedi を使ったバックエンドを作成しました.
これからこれを主に使おうと思います.

React で CRUD 処理をするフロントも作成しました.
axios とか form を完全に忘れていましたが,なんとかなりました.

3 週目からは認証認可をやりたいとおもいます.

3 週目

引き続き,言語が TypeScript,フロントエンドに React,バックエンドに express, typeORM,を使ったアプリ作成を練習中です.
docker compose を用いてフロントエンド,バックエンド,DB を docker network にひとまとめにすると,cors を解決できない問題に悩まされています.
firebase を用いた認証ができるようになりました.来週からは認証に取り組みたいと思います.

4 週目

Firbase Authentication の認証処理と jwt の導入に頭を悩ませています.
Firebase に認証をおこなったあとに,user 情報を DB からどのように取得するかを考えています.
また,脆弱性について学んでいるのですが,React で対策できているか不安です.

フロントエンド

1 週目

特になし

2 週目

figma についてゼロイチラボさんの動画で学びました
とてもわかりやすく,最初の一歩に最適でした.

React で API から CRUD を行うアプリの作成にも取り組んでいました.
API 通信には axios をつかい,form の処理には react-hook-form を用いました.
UI Component には semantic UI を使用したのですが,react-hook-form との折り合いが悪く,Controller を使えば解決できるらしいのですが,素の input を使うことで解決しました.
React のアプリは環境変数プレフィックスに REACTAPP をつけないと動かないのが驚きでした.

3 週目

React でアプリのフロントエンドを作成しています.
firebase authentication を用いた認可処理について取り組んでいました.
ひとまず導入できるようになったので安心です.
4 週目からは,認可についてとりくんでいきます.

4 週目

React Router のprops.history.pushでページ遷移を行っていました.
レイアウトコンポーネントとどう組み合わせるか難しいです.
また非同期処理についてよくわかっていないので,CRUDAPI を叩いたときに,CREATE したあとに,READ がちゃんとできていないと思ったら,CREATE->READ の実行順序が担保されていませんでした.
async await文で順序を指定できることがわかりました. 認可について作成しています.
Firebase Authentication を使っていますが,どのように jwt と組み込ませるのかで詰まってしまいました.
そろそろ,テストについても取り組みたいのでピンチです.

バックエンド

1 週目

TypeScript で Web API サーバーを作成
TypeORM 学んだ.
inversify で DI を導入したいが上手くいかないと思ったら,公式でもできないような記述があったので断念.
nestjs を使えばできるみたいなので,2 週目から nesjs で取り組むことにした.

2 週目

一度 nestjs で WebAPI サーバーを作成しましたが,オブジェクト単位で controller,service,repository を自動生成するのが,個人的に合わなくてやめました.
なので,typescript,express,typeorm,typedi で API サーバーを作成しました.
DI はちゃんとできているか不安だったので,StackOverflow で質問をしましたが,返答が来ていません....

RDS,EC2 へのデプロイをおこない,DB 接続ができているかを確認しました.
無事に動作することを確認できてよかったです.

ついでに Docker 化もできました.

3 週目

docker compose を用いて,バックエンド,DB ワンコマンドで作成できるアプリを作成しました.
DB 環境を気にしなくてよくなったので,これからも活用していきます.

4 週目

認証処理のための API 設計をしていました.
どのようにして,Firebase で自動生成される uid から userid を取得しようか考えています.

インフラ

1 週目

特になし

2 週目

node.js のバックエンドを Docker 化

3 週目

Docker 化したアプリを docker compose で連携
フロントエンド,バックエンド,DB をまとめると CORS が発生して困っています.

4 週目

docker volume を圧迫しているときに,以下のコマンドで開放することができます.

docker volume rm $(docker volume ls -qf dangling=true)

データベース

1 週目

ORM(TypeORM) についてなんとなくわかった.

2 週目

特になし.3 週目にはローカルに Docker で DB サーバーを作ってみようと思います.

3 週目

Docker で DB サーバーを作成.
docker compose でバックエンドとの連携が可能になった.

4 週目

typeorm でユニーク制約やデフォルト値の付け方がわかりました.

ネットワーク

1 週目

特になし

2 週目

RDS,EC2 に API サーバーをデプロイ

3 週目

docker compose で docker 間通信を実現

4 週目

特になし

英語

技術記事

1 記事目 「 簡単に typescript + express + mysql で簡易 webAPI サーバー作成」

6/4(金)に作成

msksgm.hatenablog.com

2 記事目 「コピペで anyenv,nodenv から React(TypeScript)環境構築」

6/11(金)に作成

msksgm.hatenablog.com

3 記事目 「typeorm の設定を typeormconfig.ts から読み込む」

6/18(金)に作成

msksgm.hatenablog.com

4 記事目「Firebase エクスポートされたメンバー 'User' がありません。as no exported member 'User'.」

6/25(金)に作成

msksgm.hatenablog.com

知識の Buffer

  • winston
  • mailggun
  • agenda
  • async await
  • helth エンドポイントパタ=ン
  • nestjs
  • node.js から DB サーバーにヘルスチェックをおこなう
  • jwt

趣味

読書

1冊目「現場で役立つシステム設計の原則」

msksgm.hatenablog.com

2冊目「エンジニアリング組織論への招待」

msksgm.hatenablog.com

3冊目「ノンデザイナーズ・デザインブック」

msksgm.hatenablog.com

映画観賞「シン・エヴァンゲリオン劇場版:||」

msksgm.hatenablog.com

美術観賞「特別展 国宝 鳥獣戯画のすべて」

msksgm.hatenablog.com

絵を書く

最後に