『ITエンジニアのゼロから始める英語勉強法』を読んだ
雑感
- Microsoft牛尾さんの本。昨今話題の『世界一流エンジニアの思考法』の中で紹介されていて読んでみた。
- 実際に米国で活躍されている方の経験をもとにしているため、説得力があって良い。また、再現性がありそうに思えた。
- 「ITエンジニア」とタイトルに入っているが、そこまで対象読者が絞られるようなものではないと思う。ただ、引き合いに出される例や経験などがエンジニアだと具体的にわかるため、その点は共感しながら読むことができた。
- 学習プロセスと段階別に「どの本を」「どのように使って」勉強すればよいかまで書かれているので、取っ掛かりやすい＝自分もやってみようかな？とモチベーションが上がる。
- 少々古い本（2013年発売）のため、紹介されている書籍は古いものが多い。古すぎて手に入らない等であれば別問題だが、英語の学習メソッドは10年そこらで大きく変わるものでもないと思うので、そこまで気にしすぎなくてもいいと思う。（昨今のAI英会話を除いて・・・）
- 早速インスパイアされて、以下2冊をAmazonでポチってみた。本書で紹介されている書籍ではなかったが、後述のサウンドファーストの原則にしたがってまずは英語耳をつくるところからやってみようかな。
メモ
いろいろ紹介されているが、筆者の主張は以下の原則にまとまっていると思うので書いておく。
- 優れた英語勉強法に共通する5つの原則
- サウンドファースト
- 英語の音を理解しないと、リスニングもリーディングも理解が遅くなる
- 最初から意味が理解できないのは当たり前なので、音を先に鍛える
- 英語らしい発音／イントネーション練習を最初にやる
- ダイレクト理解
- 英語を日本語に翻訳して考えず、英語は英語のまま理解する
- 英語は、日本語に1:1で翻訳できない
- スピーキング中心
- ネイティブの発音、イントネーションを真似て音読することがペラペラへの道
- 日本語発音でやっても意味ないので注意
- コンテキスト理解
- 特定のコンテキストで何回も同じ表現に出会うことで、その意味が分かってくる
- 単語や文法を学ぶのではなく、生きた英語を大量にインプットすること
- 選択と集中
- アメリカ英語かイギリス英語かを選択する
- ターゲットの分野（例えばITと日常会話など）を決めて語彙強化を強化する
- サウンドファースト
『このまま今の会社にいていいのか?と一度でも思ったら読む 転職の思考法』を読んだ
雑感
- 2020年に一度読んだが、読後感がよかったのを覚えており再読。
- 物語形式で話が進んでいくため、主人公（転職を希望している30歳男性）に感情移入しながら、より自分ごととして読める。特に主人公のメンターとなる黒岩のセリフがぐっとくる。自分に問いかけられているようで、どきっとしたり、考えさせられたりする。
- 転職がテーマではあるが、マーケットバリューの考え方など新卒の新入社員でも参考になる内容が多い。 また、定期的にキャリアのあり方について考え直すために、何度も読み直したい良本。
メモ
基本的に引用は主人公のメンターである黒岩のセリフ。
プロローグ
- はじめての転職が多くの人にとって、怖い理由は「初めての意思決定」だから
- 多くの人は、普段、実は何も意思決定しないで生きている
多くの人は普段、実は何もしないで 意思決定しないで生きている。君は自分で大学を選び、就職先も自分で選んできたと思っているかもしれない。しかし、それは、ただに、これまでレールの上を歩いてきただけで、自分で何も決めていない。電車に乗り、目的地に進んでいく大学であれば、世の中から良いと言われる大学を目指し、就職先も、世間的に良い会社を選んできただけ。だから、意味のある意思決定と言うのは必ず、何かを捨てることを伴う。これまでの人生で、そんな決断をしたことがあるか？
こういう問いかけがこの本の醍醐味。心にぐさっと突き刺さるフレーズが多い。たしかに人間、何かを捨てる決断は怖いし、なるべく避けたいと思うよなぁ。
第1章 仕事の「寿命」が切れる前に、伸びる市場に身を晒せ
- 上司を見て働くか、マーケットを見て働くか
- 給料は、君が「自分」と言う商品を会社に売り、会社がそれを買うから発生している。
- 君はたまたま今の会社を選んだだけで、会社は君をたまたま買っている。つまり、雇用とは1つの「取引」
- マーケットバリューを理解するには、まず自分を商品として考えること。
- 転職を考える際に、まずやるべきは、自分の仕事の棚卸しをすること。そのために自分の過去のレジュメを書くこと。
- もし他の会社では展開できないなら、それは技術資産ではない。
- 20代は専門性、30代以降は経験を取れ。
つまり、専門性のある人間にこそ、「貴重な経験」が回ってくる、こういう構造なんだ。そもそも、「貴重な経験」は簡単に得られるわけではない。会社の重要なプロジェクトはいつも専門性の高いエース社員が任されるだろう？当たり前だ。言い換えれば、専門性のない奴に打席は回ってこない。だから、20代は専門性を身に付けて、それを生かして30代は経験を取りに行くのがベストだ。
「専門性のない奴に打席は回ってこない」は経験上正しい。一方で、つい「歳を重ねるにつれて専門性を身に付けていく」というようなイメージ をしてしまうため、肝に銘じたい。
マーケットバリューはあくまで相対的に決まる。高い技術を持っていても、周りが同じスキルを持っていたら価値は出ない。逆に君だけが持っているスキルは一気に価値が出る。だからこそ、「レア度」にこだわれ。そして「専門性」は、誰でも学べば獲得可能であり、歳をとるほど、差別化しづらくなる。一方で、「経験」は汎用化されにくい。だから、20代は専門性で、30代以降は経験で勝負すべきなんだ。わかるか？
- 自分が持っている、レアな専門性とはなんだろうか？
人的資産は、正直、20代は大した価値にならない。だが、歳をとり、40代以降になると、極めて重要になる。というのも、ビジネスの世界を見ると、優秀な人ほど意外と、あの人が言うからやろうとか、あの人のためなら一肌脱いでもいいとか、「貸し借り」で動いているからだ。もちろん、それは自分にマーケットバリューがあることが前提だがな。つまり、キャリアとは20代は専門性、30代は経験、40代は人脈が重要なんだ。
- マーケットバリューを決める最大の要素は業界の生産性。つまり、その境界にいる人間が平均一人当たりどれほどの価値を生み出しているか。
- 一人当たりの粗利
- 産業別の 一人当たりのGDP
- 自分の業界の一人当たりの粗利はいくら？
- 絶対にだめな選択肢は、生産性が低くて、かつ、成長が見込めない産業で働くこと。
いいか。組織にいると、給与は当たり前のようにもらえるものと勘違いする。そして、大きな会社にいる人間ほど、実力以上の給与をもらっていることが多い。その中の多くの人間は、会社が潰れそうになったり、不満があると、すぐに社長や上の人間のせいにする。だが、勘違いするんじゃない。君が乗っている船は、そもそも社長や先代がゼロから作った船なんだ。他の誰かが作った船に後から乗り込んでおきながら、文句を言うのは筋違いなんだよ。
金を稼ぐ力を身に付ける。それしかないに決まっているだろう。一生下僕として生きていくのか。上司から言われたことにイエスだけ言い続けて、いつか、しがらみから解放される日を待つのか？だが、そんな日は来ないぞ。どれだけ出資しても上には上がいる。君が課長になっても部長がいる。部長になっても本部長がいる。本部長になっても役員がいる。仮に君が社長になっても、もっと偉い人がいる。銀行と株主、そしてクライアントだ。君が、「自分の人生を選ぶ力」を得るまでは、永久に自由になどなれない。
マーケットバリューを高めなければ生き残れないことをひしひしと感じさせるセリフ。
- 伸びるマーケットには、いずれ大企業の競合となるような 急成長中のベンチャーが複数いる
- 今伸びているマーケットってどこなんだ？
あぁ、考えてみろ。転職しようと思えば、できる人がたくさんいる組織と、転職したくてもできない人間、それどころか、今の会社にしがみついて、足を引っ張るような人間だらけの会社。どちらの会社が強いと思う？
これには豊田社長の年初スピーチを思い出した。
皆さんは、自分のために、自分を磨き続けてください。トヨタの看板がなくても、外で勝負できるプロを目指してください。私たちマネージメントは、プロになり、どこでも戦える実力を付けた皆さんが、それでもトヨタで働きたいと、心から思ってもらえる環境を作り上げていくために、努力してまいります。 https://youtu.be/vJ8DsIiSb-U?si=u7iazoSwfJ-cb8sq&t=1171（19:31〜）
- 会社を選ぶ際に重要なのは、以下の3つ。
- マーケットバリュー
- 働きやすさ
- 活躍の可能性
- 活躍の可能性を確かめる3つの質問
- 「どんな人物を求めていて、どんな活躍を期待しているのか？」
- 「今1番社内で活躍し、評価されている人とはどんな人物か？なぜ活躍しているのか？」
- 「自分と同じように中途で入った人物で、今活躍している人は、どんな社内パスを経て、どんな業務を担当しているのか？」
- この3つを聞いた上で、自分が社内で活躍できるイメージを持てたらオーケー
- 良いベンチャーを見極める。3つのポイント。
- 競合はどこか？そして、競合「も」伸びているか？
- 現場のメンバーは優秀か？ベンチャーの経営陣は優秀であるのは当たり前だが、他も優秀か？
- 同業他社からの評判は悪くないか？
- 良いエージェントの5箇条
- どこが良かったか、入社する上での懸念点はどこかをフィードバックしてくれる(だからこそ、こちらから必ず「懸念点はどこですか？」と聞いてみること。)
- 案件ベースでの「良い、悪い」ではなく、自分のキャリアにとってどういう価値があるかと言う視点でアドバイスをくれる
- 企業に、回答期限の延長や年収の交渉をしてくれる
- 「他に良い求人案件は、ないですか？」と言う質問に粘り強く付き合ってくれる
- 社長や役員、人事責任者等との強いパイプがあり、彼らとの面接を自由にセットできる
- 転職エージェントがやたらと頻繁に使われるケースは、社員の紹介によるリファラル採用や、直接応募で人が取れていない時。本当に優れた会社には勝手に人が集まってくる。
転職してもし出世したければ、中途が活躍できるチャンスがあるかどうか？は見定めたほうが良い。創業間もない会社は例外だが、創業10年から15年以上であれば、中途上がりの役員の割合を確かめる。それがそのまま、君の「出世のしやすさ」だからな。
- 転職先を探すいくつかの方法
- これらは上から順番に金がかかる。採用担当はこれらのチャネルを使い分けている。特殊な職種や重要なポジションはヘッドハンティングや転職エージェントを使う。なぜならそういう人物は今いる会社でも充分活躍しているから、そもそも転職市場に出てこない。 だから、 会社は狙って取りに行く必要がある。
- もしも、自分が働きたい会社が明確であれば、様々な手段で仕事を探すこと。SNSのサービスや、直接応募、自分で求人を検索すると言う行為を絶対に忘れてはいけない。
第2章 「転職は悪」は、努力を放棄した者の言い訳にすぎない
- ほぼ物語の内容なので割愛。
第3章 あなたがいなくなっても、確実に会社は回る
- マーケットバリューと給料と言うのは、時間差で一致する。
- マーケットバリューよりも給料をもらいすぎていると問題が発生する。
- 自分がもらっている給料と自分のマーケットバリューを見つめ直してみる。
転職の際に1番気になるのは、やはり給料だろう。だがいいか。迷ったら、未来のマーケットバリューを取れ。転職を考えるとき、既に給料が高い成熟産業と、今の給料は低いけど、今後の自分のマーケットバリューが高まる会社とで悩むことがあるだろう。 だが、現在の給料に惹かれて成熟企業に入っても、マーケットバリューを高められなかった人間は、本間部長のように、どこかで肩叩き、あるいは言及に合わざるを得ない。覚えておけ。この国の悪いところは、その事実を40代後半まで本人に隠しておくことなんだよ。
- パートナーが転職に反対を示したときに必要なのは、以下の3つ
- ロジック
- 共感
- 信頼
第4章 仕事はいつから「楽しくないもの」になったのだろうか？
やりがいを無視して楽しくない仕事をする、実はこれほど簡単な事はないんだよ。だからこそ、人はその道を選ぶ。想像してみろ。例えば君が、道行く人100人に話を聞いてみたとする。あなたはなぜ働いているのですか、と。 多くの人がいろんな理由を語るだろう。家族のためだとか、仕事に愛着があるだとかな。もう一つ、聞いてみたら良い。もし給料が半分になっても今の仕事を続けますか？と。大半の人は、脳と答え、転職すると答える。ということはどういうことか。ほとんどの人間は結局、単に金に買われている。そうだろう？
普通のサラリーマンにとって、お金を稼ぐと言うのは、お金に買われるということだ。君の時間を差し出し、それを投資家や経営者に買ってもらっている。最も簡単な選択肢だ。だが、これからの時代は完全に逆転する可能性がある。
いいか。なぜ給料が低くても、ウェディング業界や美容師、テレビの制作会社などに希望者が絶えないと思う？仕事にクリエイティブな要素があり、やりがいを感じやすいからだよ。逆に、定型的な事務仕事は一般的に人気がない。そして彼らの給料は、正社員の場合、ウェディング業界などより高いことが多い。高給じゃないと誰もやらないからな。「仕事が定型的」で「コストが高い」。つまり投資家や経営者から見れば テクノロジーで代替しやすく、かつ代替したときにより費用削減のインパクトが大きい仕事なんだよ。
やりがいの乏しい提携業務はテクノロジーで代替され、生活コストは下がっていく。すると、今後、この仕事は大別すると3つに分類されていく。
- 今後の仕事を3つに大別すると・・・
- 仕事として好きなことを続ける
- 仕事は最小限にして、趣味に打ち込む
- 嫌々ながら今の仕事を続ける
- 「好きなこと」ってなんだろう？
- ほとんどの人に、「やりたいこと」なんて必要ない
君は馬鹿だな。どうしてもやりたいことがあるなら、そもそも、今、こんなところにいないだろう。重要なのは、どうしても譲れない位「好きなこと」など、ほとんどの人間にはない、ということに気づくことなんだよ。いいか？そもそも、君に心から楽しめることなんて必要ないんだ。
人間には2パターンいる。そして、君のような人間には、心から楽しめることなんて必要ないと言っているんだ。むしろ必要なのは、心から楽しめる「状態」なんだ。
- 仕事を楽しむ人間が使う言葉は2種類に分けられる
- To Do (こと)に重きを置く人間
- 何をするのか、で物事を考える。明確な夢や目標を持っている。
- Being(状態)に重きを置く人間
- どんな人でありたいか、どんな状態でありたいかを重視する
- To Do (こと)に重きを置く人間
「……僕は、To Doを明確に持っている人には憧れます。でも、自分は後者だと思います」 「そうだろう。実際のところ、99%の人間が君と同じ、being型なんだ。そして、99%の人間は「心からやりたいこと」と言う幻想を探し求めて、さまようことが多い。なぜなら、世の中に溢れている成功哲学は、たった1%しかない。To Do型の人間が書いたものだからな。 彼らは言う。心からやりたいことを持てと。だが、両者は成功するための方法論が違う。だから、参考にしても、さまようだけだ」 「そもそも、多くの人にとって、心からやりたいことなど必要ない……」 「そうだ。好きなことがあると言う事は素晴らしいことだ。だが、ないからといって悲観的する必要は全くない。なぜなら、「ある程度やりたいこと」は必ず見つかるからだ。そして、ほとんどの人が該当するbeing型の人間は、それでいいんだ」
being型の人間は、ある程度の年齢になった時点から、どこまでいっても「心から楽しめること」は見つからない。だが、それで全く問題ない。それは、何を重視するかと言う価値観の違いであって、妥協ではないからだ。being型の人間にとって、最終的に重要なのは「やりたいこと」より「状態」だからな。
- being型の人間にとって重要な状態
- 自分の状態： 主人公は適切な強さか。主人公は信頼できるか。
- これはつまりマーケットバリューを意味する。
- 仕事を楽しむためには「マーケットバリューがある程度あること」も「求められるパフォーマンスとマーケットバリューがある程度釣り合っていること」は必要条件
- その上で、仕事でつく小さな嘘を最小化すること。自分を好きになれなければ、いくらマーケットバリューが高まり、自分が強くなっても、その「ゲーム」を楽しむことはできない。
- 環境の状態： 緊張と緩和のバランスは心地良い状態か。
- この半年の間に、強い緊張を感じた場面を書き出してみる
- 悪い緊張が10以上ある。→職場を変えた方が良い。
- 良い緊張が3つ未満→より難しい業務ややったことのないことに挑戦する。
- 社内からもたらされた緊張は悪い緊張であることが多く、 社外からもたらされた緊張は良い緊張であることが多い
- この半年の間に、強い緊張を感じた場面を書き出してみる
- 自分の状態： 主人公は適切な強さか。主人公は信頼できるか。
- being 型の人間が、好きなことを見つける方法
- 他の人から上手だと言われるが「自分ではぴんとこないもの」から探す方法
- 普段の仕事の中で「全くストレスを感じないこと」から探す方法
- 好きなことがわかったら、それを自分の「ラベル」にする
- まず、自分自身の「キャッチコピー」を考える。人に見せないので、ダサくてもいいし、質にもこだわらなくていい。何枚つけても構わない。
- 最初は嘘八百で良い。理想や憧れも大歓迎。大事なのは仮でもいいから、そのラベルを自分でつけること、そうすればやるべきこと、仕事を選ぶ基準が見えてくる。
いいか、青野。社会からの目など、死ぬ間際になると、本当にどうでもいいことだ。どこの学校出た、どこの会社に勤めた、そんなものは死を間近にすると全く無意味だ。君がまだそのことを考える段階にいないなら、変わる必要は無い。だが、もしも、やりたいことの種を見つけ始めたのだとしたら、決してその小さな種を殺してはいけない。そのやりたいことを大きくしていく。プロセスを大事にしろ。
世の中で最も恐ろしい言葉の1つは、失敗という言葉だ。これほど定義が難しく、残酷な言葉は無い。多くの成功者が言うように、 最後さえ成功すれば、その途中の失敗も、すべては「必要だった」と言える。要は考え方次第なんだ。だが、その中でも「100%失敗を招く、唯一の条件」というものがある。それは腹を括るべきタイミングで、覚悟を決めきれなかった時だ。 ・・・ 誰にも人生に数度、腹をくくるべきタイミングが存在する。私にとっては最初の転職がそうだった。その時に覚悟を決め切れない。これが100%後悔するための唯一の条件だ。反対に腹をくくり決断した人間には、長い目で見ると失敗などない。誰に笑われても馬鹿にされても、何度でも立ち上がり未来を見たらな。これがこの世の意思決定にまつわる最大の真理なんだよ。
第4章で「転職」から一歩踏み込んだキャリア観について。誰しもキャリアを考えた際に、「好きなことを仕事にできたら幸せだろうな」「でも自分は何が好きなことなのだろう？」という思考に至ると思うが、まさにその話。
まず、「自分の好きなこと」について、todo型／being型という区分けで紹介しているのはうまいなと思った。また、「ほとんどの人間がbeing型であるにもかかわらず、todo型で物事を考えてしまうからうまくいかない」というのも個人的には非常に腹落ちした。
もれなく自分もbeing型だ。どんな状態が自分にとって良い状態なのかを考えるきっかけになったし、実際にキャリアを俯瞰してみようと思った。
この本は1年に1回くらい読み返してもいいかもしれない。
第5章 双方向データバインディング『Vue3 フロントエンド開発の教科書』を読む（5/n）
前回の続き。
- 双方向データバインディングとは？*1
今、暇な時間でiOSアプリ開発の勉強をしているのだが、swiftUIの@Stateや@Bindingでも双方向データバインディングがサポートされていることに気がついた。
v-bind：テンプレート変数の値を、テンプレート内（例：テキストボックスのプレースホルダ）に利用するようなケースで用いるv-on:input：テンプレート内（例：テキストボックス）からテンプレート変数を変更するようなケースで用いる
上記を組み合わせたのが v-model ということになる。
<script setup lang="ts"> import {ref} from "vue"; const inputNameModel = ref("双方向"); </script> <template> <section> <input type="text" v-model="inputNameModel"> <p>{{inputNameModel}}</p> </section> </template>
- テキストボックス内のテキストは inputNameModelというテンプレート変数にバインドされている（v-bind）かつ、テキストボックス内のテキストを変更すると（v-on:input）、inputNameModelというテンプレート変数が更新される。
やっと v-model について頭の中が整理された気がする。単方向データバインディングとは何か、が正しく認識できていなかったから、双方向もよくわからなかったみたいだ（当たり前）。
- v-html
- HTMLをそのまま表示する。XSSに注意。
- v-once
- 一度だけデータバインドを行う。
- v-cloak
- レンダリングの途中でマスタッシュ構文が一時的に表示されてしまうのを防ぐことが可能。
*1: React と Vue から単方向・双方向データバインディングの違いを知る(https://qiita.com/tamago3keran/items/590d99288dcccf388798)
*2: MVVMとは(https://docs-f.mix-soft.com/article/mvvmtoha)
『Deep Skill ディープ・スキル 人と組織を巧みに動かす 深くてさりげない「21の技術」』を読んだ
雑感
- 一言でまとめると、「誠実でありながらも、戦略的に・したたかに、人と組織を動かすべし」という社会人サバイバルマニュアル。
- 引き合いに出されるシチュエーションが絶妙で、どれも「あるある」と頷いてしまうものばかりだったため、紹介されている内容に納得感がある。
- ある程度大きな組織の中で生きていく会社員、とくに管理職は読むべき。というか全員読んで欲しい。
メモ
感銘を受けた部分は多々ある（手元の読書メモに残してある）のだが、特に響いた箇所をまとめる。
はじめに
- 仕事とは、「誰かの”不”を解消し、喜んでもらって、その対価をいただく」こと。
- 会社員の強みは、会社が有するリソース（ヒト、モノ、カネ）を活用して、世の中の「不」を解消できるということ。
- 会社のリソースを使えるからこそ、ひとりではとてもできない「大きな仕事」ができる。
仕事の定義は、筆者が非常に重要視しているようで、本書の中で何でも出てくる。汎用的で分かりやすい表現なので気に入った。
Deep Skillとは？
- 「知識」や「ノウハウ」は仕事するうえでの必要条件ではあっても、十分条件ではない。重要なのは「実行力」。
- しかし、人や組織は、理屈だけでは割り切れない複雑な存在。
- 人と組織を巧みに動かす「実行力」を身につけるために必要なのが、「人間心理」と「組織力学」に対する深い洞察力。
- 「深い洞察」に基づいた「ヒューマンスキル」を「Deep Skill」と名付けている。
第1章 「したたか」に働く
- 「ずるさ」ではなく「したたかさ」を磨く
- 「何をどのように伝えるかが大事」と言われることがあるが、実際のところは、相手は常に「誰が言うか」で判断する。
- 相手に「信頼できない人間」と思われている限り、どんなに正しいことを言っても受け入れてはもらえない。
- 人や組織を動かすとは、「この人に任せてみたい」「この人に力を貸したい」「この人の言うことなら信頼できる」などと、周囲の人たちに自発的に思ってもらうことに他ならない。
- 信頼を勝ち取るためには、誠実でいること。
- 一方で、単なる「いい人」になってはいけない。信頼にディープスキルを組み合わせる。
- プロジェクトを成功させるためにどうすべきか、という「目的合理性」に徹して物事を考え、行動することが大事。
1章の章テーマとなっているとおり、本書を通して重要なマインドセット。この意識が根底にあってこそ、他で紹介されているメソッドが活きてくると思う。
- 優柔不断な上司に「決断」を迫る
- 正論は自分を律するために用いるべきものであって、これを他者に押し付けようとしても反発されるだけ。
- 正論は、「自分は正しい」と思うからこそ、一方的に相手を責めるスタンスに立ちやすい。それゆえに相手の反発を招いてしまう。
- 正論は脇に置いて、現実を見つめる
- 例：上司が決断してくれない
- 正論：意思決定するのが上司の仕事だろう！
- 現実：そもそも上司は意思決定したくない存在である
- 意思決定したくないのはなぜか？を掘り下げる。安心材料が足りないなら、集めるなど。
これには目から鱗だった。言われればたしかにその通りなのだが、なかなか実践できている人はいないように思う。自分が上司であっても部下であっても、組織の中で働く以上必要になってくるスキルだと感じた。
- 会社で「深刻」になるほどのことはない
- 精神状態が歪んでいると、思考も歪んでしまう。
- 企業人として、きちんと組織的な承認を得ながら仕事を進めている限り、たとえ担当事業に失敗したとしても、その全責任を負う立場にはない。
- 「RPG」を攻略するかのように余裕をもって事態に対処する。
- 「会社のことで深刻にならない」という「達観」を養い、どうしても納得できなければ「退職」というカードを切ればいいだけ。
「会社のことで深刻にならない」というマインドは、精神衛生上非常に重要だと思う。これまで深刻に捉え過ぎて身体を壊してしまう人を何人も見かけてきた。会社のせいで自分が潰れたら、自分も、会社も得することがないはず。この気概を持って生きたい。
第2章 「人間関係」を武器とする
- 弱者でも「抜擢」される戦略思考
- 「実績」こそが発言力の源。
- 「実績」を打ち立てることによって、自分の存在を認めてもらうほかに活路を拓く方法はない。
- 圧倒的な「量」をこなすことで、自然と「仕事の質」は高まっていく。そして、「仕事の質」が高まれば、「結果」は必ずついてくる。
- 「形式知」は勉強すれば誰でも手に入るが、「経験知」は自身の経験からしか得られない「唯一無二」のもの。「経験知」を蓄積すること。
- そのうえで「ほかの人と同じことをしない」。
- 組織の中で希少価値のあるスキルを「武器」にすることができれば、「自分の価値」を劇的に高めることができる。
- 「ポジショニング」するうえで大切なのは、「組織にとって重要であるにもかかわらず、まだ誰もいない領域」を見定めて、そこにいち早く飛び込んでトップランナーになること。
「ポジショニング」の話は自分の経験とも重なる部分があり、頷きながら読んだ。
- 「専門性の罠」に陥ってはならない
- 「専門性」を高めれば高めるほど、ビジネスの「本質」から遠ざかるリスクも高まってしまう。
- 製品やサービスを提供することを通して、「不」とつく言葉を解消することこそがビジネスの本質。
- 「どんな人が」「どんな場面で」「どんな”不”を感じているか」に思いを馳せ、「どうすれば、その”不”を解消できるか」を考え抜く。
- お客様と直接触れ合う機会をできるだけ多く作ることが重要。
- 「普通の人」の「普通の生活」のなかで、自分の中に生起する「感情」をちゃんと味わう。
- 「お客様＝普通の人々」の気持ちや感情に共感するためには、まず、自分の「感情」がイキイキとしていなければならない。
- 一方の手に「専門性」を、もう一方の手には「感情」を。
面白いジレンマだと思う。最後の一文は座右の銘のひとつにしたい。
- まず、自分の「機嫌」をマネジメントする
- 自然と「人が寄ってくる」ということは、その人物に「求心力」があることを示す1つの証拠。
- マネージャーとして「求心力」を発揮するためには、何をさておき「機嫌よく」いること。
- どうすれば機嫌よくいられるのか
- 第一に「自分を知る」。常に自分の機嫌が良いかどうかをモニタリングすること。
- 第二に「できるだけ仕事を手放す」。人間は誰しも大量の仕事を抱え込んで時間に追われると、どうしても不機嫌になってしまう。
- 第三に「仕事をすれば、トラブルは必然的に起きる」と腹をくくる。そうすれば、平常心で事態を受け止めることができる。
- 重要なのは、トラブルの目が小さいうちに組織的な対応をとること。
- マネージャーは部下からのトラブル報告を、むしろ歓迎する。
- むしろ、「トラブルが起きたということは、部下が仕事を頑張っている証拠だ」と思うことすらできる。そして、「不機嫌」になることなく、「平常心」でトラブル解決に向けて動き出すことができるわけです。
- 部下のトラブルは、マネージャーにとって腕の見せ所。「よし、自分の出番だ」くらいに考えるべき。
- みんなが「機嫌よく」仕事ができる環境を生み出す。
・・・大事なのは、「マネージャーとメンバーの役割を明確化する」ことです。「現場の仕事」を担うのはメンバーの役割ですから、マネージャーは極力それに手を出さないほうが良い。マネージャーは、メンバーをサポートすることによって、チーム全体のパフォーマンスを最大化すると言う役割に徹するべきなのです。・・・
・・・ 「業務時間中は全て部下のための時間である」と腹を決めておけば、部下に声をかけられて「自分の仕事」を中断されても、「機嫌よく」対応することができます。その結果、部下も安心して、私に「報連相」をしてくれるようになり、コミュニケーションの量が増えるとともに、その「質」も高まっていきました。 しかも、メンバーの多くは、「重要な仕事を任せられた」ことに意気を感じ、それまで以上に熱意を持って仕事に取り組んでくれるようになります。・・・
個人的に本書で一番心に刺さったのはこの話。心理的安全性の高い組織を作る上では必須のスキルだと思う。実践したい。
第3章 「権力」と「組織」を動かす
- 「調整」とは、妥協点を探すことではない
- 組織と言うものは、「武将館対立」が起きる構造になっている。
- 「調整」と言うものは誤解されている。 お互いに「情報」することって、「妥協点」を見つけようとすることが多いため。
- 「交渉学」の真髄は「立場から利害へ」ということにある。
- 対立関係にある両者が、お互いに「情報」することで交渉がまとまるケースはほとんどなく、相手の利益・関心を引き出して、「共通の利害」を探り当てることこそ交渉、成功させる秘訣。
- 本来あるべき「調整」とは
- 向かい合って「争う」「情報」「妥協」はNG。
- 「共通の依頼」を考えて、同じ方向向いて取り組むのが良い。
「調整」の話は、理想論になりがちだが筆者の体験が具体的に書かれていて参考になった。ただ、本書にあるような緻密な調整を行うには、かなりの「調整スキル」が求められるのではなかろうか・・・。また、この思考法を持っている人が複数人いないとなかなかうまくいかないのでは、とも思う。
第4章 「人間力」を磨く
- 人間の「哀しさ」を理解する
- 「好き嫌い」の感情を上手にコントロールする
私は、ある種のクールさが必要だと思っています。そもそも、会社は「仕事」をする場所です。社員は「仲良くなる」ために集められたのではなく、「事業」を推進するために集められたのです。そのような場所で、「好き嫌い」を持ち出すことがそもそもおかしい。「相性」がよかろうが悪かろうが、「好き」だろうが「嫌い」だろうが、誰とでも力を合わせて「結果」を出すのが仕事。自分の「感情」は横において、あくまでも「目的合理性」に徹するべきなのです。ここで言う「目的合理性」とは、、自分が成すべき「業務目的」を達成するうえで、「合理性」のある言動に徹するという意味です。
「目的合理性に徹する」という姿勢はストイックで気に入った。
第4章 データとイベントのディレクティブ『Vue3 フロントエンド開発の教科書』を読む（4/n）
前回の続き。
データバインディングのディレクティブ
- テンプレートブロックで記述する
v-で始まる属性のこと
v-bind
- タグの属性部分に対してテンプレート変数を利用するためのもの。
- 以下のように利用する。
<script setup lang="ts"> import { ref } from 'vue' const url = ref('https://vuejs.org/') </script> <template> <p><a v-bind:href="url" target="_blank">Vue.jsのサイト</a></p> <p><a :href="url" target="_blank">Vue.jsのサイト（省略形）</a></p> <p><a v-bind:href="url + 'guide/introduction.html'" target="_blank">Vue.jsのガイドページ（変数文字列結合）</a></p> </template> <style scoped></style>
v-bind:xx=”yy”- 要素のxx属性の値として、テンプレート変数yyの値を設定する
v-bindを省略して:以降のみとする記法もあるが、ソースコードの可読性の観点からおすすめされないらしい。yyの値の部分に式（例：文字列結合）を含めることもできる
- Boolean指定も可能
<script setup lang="ts"> import { ref } from 'vue' const isSendButtonDisabled = ref(true) </script> <template> <p><button type="button" v-bind:disabled="isSendButtonDisabled">送信</button></p> </template> <style scoped></style>
- v-bindの引数として指定する属性名をテンプレート変数とする場合は、属性の部分をブラケットで囲む
<script setup lang="ts"> import { ref } from 'vue' const widthOrHeight = ref('height') const widthOrHeightValue = ref(100) </script> <template> <p><img src="./assets/logo.svg" alt="VueLogo" v-bind:[widthOrHeight]="widthOrHeightValue" /></p> </template> <style scoped></style>
- 複数の属性にまとめてバインドする
- v-bindの引数として指定する属性名を指定せず、複数プロパティを指定することができる
<script setup lang="ts"> import { ref } from 'vue' const imgAttributes = ref({ src: '/images/logo.svg', alt: 'Vueのロゴ', width: 75, height: 75 }) </script> <template> <p><img v-bind="imgAttributes" /></p> <p><img v-bind="imgAttributes" title="ロゴです！" /></p> <p><img v-bind="imgAttributes" alt="ロゴです！" /></p> </template> <style scoped></style>
- style属性へのバインディング
v-bind:style="{スタイルプロパティ: 値, …}"
- class属性へのバインディング
v-bind:class="{スタイルクラス名: true/false, …}"
データバインディングまとめ
- v-bindはタグの属性に対してテンプレート変数を利用するためのもの。
- v-bindの省略形について、可読性の観点から本書ではおすすめしていない。
- 通常のタグ属性との共存、複数の属性のバインド等が可能。
全体的にスムーズに理解できた。v-bindの指定の方法によって細かな挙動が変わってくるが、このあたりは特に覚える必要もない。都度調べればよい。
イベントのディレクティブ
v-on
v-on:イベント名="イベント発生時に実行するメソッド名"- ボタンクリックイベントの処理＝イベントハンドラメソッドに引数を渡すことができる
<script setup lang="ts"> import {ref} from "vue"; const pMsg = ref("イベント前(ここをクリック!)"); const pBgColorEvent = ref("white"); const onPClickWithEvent = (bgColor: string, event: MouseEvent): void => { pBgColorEvent.value = bgColor; pMsg.value = event.timeStamp.toString(); }; </script> <template> <p v-on:click="onPClickWithEvent('green', $event)" v-bind:style="{backgroundColor: pBgColorEvent}"> {{pMsg}} </p> </template>
- v-onの修飾子
- stop, capture, self…
- クリックイベントとキーイベントの修飾子
- enter, tab, delete…
イベントディレクティブのまとめ
イベントディレクティブについては概ね理解できたが、v-onの修飾子に関していまいちピンとこなかった。利用する場面がきたら思い出せるようにしておきたい。
第3章 Vueプログラミングの基本『Vue3 フロントエンド開発の教科書』を読む（3/n）
前回の続き。この章は予想以上に理解に時間がかかってしまった。
コンポーネントとは
- Webページの構成パーツのこと。主に以下からできている。
- HTMLタグ
- CSSスタイルシート
- JavaScriptコード
- Vue.jsでは上記3つの要素が1つのコンポーネント（ファイル）にまとめられており、これを単一コンポーネントファイル*1という。
基本構文
- マスタッシュ構文
{{変数名}}で表現する。- スクリプトブロック（）で用意した変数を表示するための構文。
テンプレートブロック（〜）で利用する変数（テンプレート変数）の定義には、ref関数を利用する
const name = ref("田中太郎");- ref() 関数は、事前に Vue.js 本体からインポートしておく必要がある。
これで、スクリプトブロックで用意した変数をテンプレートブロックで利用することができた。
<script setup lang="ts"> import {ref} from "vue"; const name = ref("田中太郎"); </script> <template> <h1>こんにちは！{{ name }}さん！</h1> </template>
以前Vue2をほんの少々かじっていたので、Vue3でのOptions APIからComposition APIの書き方の変わりっぷりに戸惑う。変わりすぎではないか・・・？
リアクティブシステム
- リアクティブとは、変数の値に連動して表示内容が自動で変化すること
- リアクティブ変数の用意と値の書き換えは以下のように行う。
const 変数名 = ref(値);
変数名.value = 新しい値;
本章内に「ref()を使用して宣言するとリアクティブになり、ref()を使用しないとリアクティブにならない」という記述があったが、Vue3.2.45のバージョンで変更があったらしく、いずれもリアクティブな変数として動作していた。こちらのサイトが参考になった。
- Vueのスタイルガイド。適宜参照する。
computed()
半径を乱数で取得し1秒後ごとに円の面積を求めるプログラムを、何も考えずに書くと以下のようになる。
computed()使用前
<script setup lang="ts"> import { ref, computed } from 'vue' // 半径の初期値を乱数で取得 const radius = ref(Math.round(Math.random() * 10)) // 円周率のテンプレート変数を用意 const PI = ref(3.14) // 半径のテンプレート変数に新しい乱数を1秒ごとに格納 setInterval((): void => { radius.value = Math.round(Math.random() * 10) }, 1000) </script> <template> <p>半径{{ radius }}の円の面積を円周率{{ PI }}で計算すると、{{ PI * radius * radius }}</p> </template>
Vueのスタイルガイドいわく、Mustache構文内で計算を行うことは避けるべきとされている。Mustache構文内で計算しないバージョンに書き換える必要がある。
以下のように computed()で書き換えることで、areaに依存している（計算式を構成する）変数の更新がトラックされるようになり、結果 area の値も1秒ごとに更新される。
computed()使用後
<script setup lang="ts"> import { ref, computed } from 'vue' // 半径の初期値を乱数で取得。 const radiusInit = Math.round(Math.random() * 10) // 円周率のテンプレート変数を用意。 const PI = ref(3.14) // 半径のテンプレート変数を用意。 const radius = ref(radiusInit) // 円の面積の算出プロパティを用意。 const area = computed((): number => { return radius.value * radius.value * PI.value }) // 半径のテンプレート変数に新しい乱数を1秒ごとに格納。 setInterval((): void => { radius.value = Math.round(Math.random() * 10) }, 1000) // area.value = 300; </script> <template> <p>半径{{ radius }}の円の面積を円周率{{ PI }}で計算すると、{{ area }}</p> </template>
reactive()
- 複数データをオブジェクトとして扱い、まとめてリアクティブにする関数のこと。いまのところ使い道はよくわかってない。
<script setup lang="ts"> import {reactive, computed} from "vue"; // リアクティブなテンプレート変数をまとめて用意。 const data = reactive({ PI: 3.14, radius: Math.round(Math.random() * 10) }); // 円の面積の算出プロパティを用意。 const area = computed( (): number => { return data.radius * data.radius * data.PI; } ); // 半径のテンプレート変数に新しい乱数を1秒ごとに格納。 setInterval( ():void => { data.radius = Math.round(Math.random() * 10); }, 1000 ); </script> <template> <p>半径{{data.radius}}の円の面積を円周率{{data.PI}}で計算すると、{{area}}</p> </template>
Vueプロジェクトの構成と動作原理
dist
- デプロイ用ファイルセット
npm run build実行後に一通り生成される。- このフォルダ一式をWebサーバにデプロイし、index.htmlをブラウザに読みこませることでVueアプリケーションが動作する。
- ただし、開発段階で上記手順をいちいち踏むのは面倒なので、Vueプロジェクトフォルダのまま起動できる機能をViteが提供してくれている。
動作原理としては以下。
- index.htmlからmain.tsが実行される
- main.ts内でApp.vueを読み込む
- App.vueから各コンポーネントを呼び出す
プロジェクト構成と動作原理について、これまで曖昧な理解だったが本章を読んでだいぶ頭の中が整理された。本書はVueの根本的な仕組みと、「なぜそうなるのか」という部分にまで踏み込んで丁寧に解説をしてくれているのでありがたい。
*1: 細かいが、一般的には単一ファイルコンポーネント（SFC）という名称が定着していると思われる。例：Vue.js公式ドキュメント
第2章 ViteとVueプロジェクト『Vue3 フロントエンド開発の教科書』を読む（2/n）
前回の続き。
環境構築
以下をインストールする。
- Visual Studio Code
- Volar：Vue 独特の記法に合わせて、Visual Studio Codeでのコーディング途中でエラー表示などを行ってくれる拡張機能
- TypeScript Vue Plugin：Vueプログラミ ングにおけるTypeScript構文のチェックを行ってくれる拡張機能
- Node.js
- nvm(Node Version Manager)：複数のNode.jsバージョンを管理できる
余談だが、ハンズオン実施時点のNode.js 最新版LTSはv21.1.0だった。本書籍に記載のバージョンはv16.14.0で、発行時（2022/09）から1年しか経過していないのに、バージョンの上がり方が半端ない。こういうところにフロントエンド技術書の限界を感じてしまう。
Vueプロジェクトの作成
npm init vue@latestでプロジェクト作成
tomoyaki@mbatomoya projects % npm init vue@latest Vue.js - The Progressive JavaScript Framework ✔ Project name: … hello-vue ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit Testing? … No / Yes ✔ Add an End-to-End Testing Solution? › No ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes Scaffolding project in /Users/tomoyaki/dev/vue3/projects/hello-vue... Done. Now run: cd hello-vue npm install npm run format npm run dev
無事、最初のプロジェクト作成が完了した
Vueをとりまく公式ツール類
| ツール | Vue2 | Vue3 |
|---|---|---|
| プロジェクト作成ツール | Vue CLI | create-vue |
| ビルドツール | Vue CLI(webpack) | Vite(esbuild) |
| 開発用サーバ | Vue CLI(webpack-dev-server) | Vite |
- Vue CLI：主にVue2まで利用されていた、プロジェクト作成ツール*1。2023/10現在はメンテナンスモード。
- webpack：Vue CLIでビルドした際には、内部でこのwebpackがモジュールのバンドル・ビルドを行う*2。
- webpack-dev-server：Vue CLIで作成したVueプロジェクトを実行（
npm run dev）すると、内部でこの開発用サーバが起動する*2。 - create-vue：Vue3の公式プロジェクト作成ツール。
npm init vue@latestを実行したときにプロジェクトを立ち上げてくれるやつ。 - Vite：Vue3ビルドツールであり開発用サーバ。create-vueで作成したVueプロジェクトを実行（
npm run dev）すると、このViteでビルドされ、開発用サーバが起動する。従来のツールと比較して必要最低限のバンドルを行うため、ビルドが高速。
このあたりのツール類の理解が曖昧だったので、自分の中で整理できてよかった。
*1: 公式ドキュメントに沿うと、「プロジェクトスキャフォールディングツール」というらしい。scaffoldingとは「足場」を意味し、プロジェクトの足場、すなわち雛形のようなものを自動生成してくれるツールのような意味合いとのこと。
*2: Vue2のビルドツール、開発用サーバはwebpackが抽象化されている。
