読んだ本の備忘録④「フロントエンドの知識地図」

フロントエンドを勉強しようと思って「フロントエンドの知識地図」を読んだ。

www.amazon.co.jp

自分はずっとAI開発がメインだったのでweb開発をほとんどやったことがなく(せいぜいflask+nginxでデモを公開するぐらい)、いわゆるソフトウェアエンジニアリングというものに漠然と憧れを持っていた。

なのでweb開発できたらかっこいいなあとは思っていたものの、なかなか必要に迫られることもないので放置してきていた。

しかし最近はAIの発達によってコードを書くハードルが下がってきたというのと、生成AIを活用したアプリを作ってみようと思ったため一念発起して(?)フロントエンドを勉強しようと思い立った。

(AIによるプログラミング補助はGitHub copilotやcursorなどが有名だが、それに加えて作りたいイメージから直接コードを生成してくれる物もあったりする)

zenn.dev

思い立ったのはいいものの、どこから始めて良いのか分からない、というかそもそも技術スタックとして何があって何ができるようになったら良いのか分からないので全体感を把握する必要があると考え、Xで評判が高かった本書を手に取った。

フロントエンドに対する知識はこのレベル。

目標としては以下を理解することと位置付けた。

• Node.jsやreact、TypeScriptなど「聞いたことあるワードたち」がどういった位置づけ・レイヤー(言語なのかフレームワークなのが技術的手法なのか)にあるのかを理解したい
• webアプリを開発する際に必要となる工程の全体感を把握する

読んだ結果、まさに自分のような人のためにある本と感じた。

具体的には、以下のようなことが分かった。

• Node.jsとNext.jsは全く別のレイヤーにある概念。Node.jsは実行環境で、 Next.jsはReactフレームワーク(ReactはJavaScriptのフレームワークなので、Next.jsはフレームワークのフレームワークということになる。DeepLearningで例えるとtensorflowがReact, kerasがNext.jsに対応するみたいな感じか)
• TypeScriptはプログラミング言語なのでJavaScriptと同じレイヤーのイメージ
• CSRとSSRはそれぞれクライアントサイドレンダリングとサーバーサイドレンダリングの意味で、レンダリング(HTMLファイルの生成)をブラウザ側で実施するかサーバー側で実施するかの違いがある。
• E2Eテストを自動化するツールがあり、例えばPlaywrightを使うと複数のブラウザ(Chrome, Safariなど)、複数の画面幅(デスクトップ幅、モバイル幅)で動作するか・正常に表示されるかを自動でテストできる。また各ブラウザ、画面幅で表示させて結果のスクリーンショットを自動で記録できる。
• 脆弱性をつく攻撃手段として、XSSやSQLインジェクション、CSRFなどがある。コードの不備によってリスクは大きくなる。
• GitHub上でキーボードで「.」を押すとエディタモードに切り替わり、VSCodeと同じ見た目のエディタをブラウザから起動できる。

またハンズオンで開発環境構築、コードの修正・整形、テスト、GitHub Actionsを用いたwebページ公開を体験することができた。

この本を読んだことで今まで「得体の知れないもの」だったフロントエンド開発が「頑張ればできそうなもの」になったのでとても有り難かった。次はReactチュートリアルなど、具体的な技術の学習に進みたい。

読んだ本の備忘録③「考える技術・書く技術」

3冊目はバーバラ・ミントの「考える技術・書く技術」

www.amazon.co.jp

内容まとめ

• 何らかのメッセージを含む文書の構造は常にピラミッドストラクチャーに従うべきだという考え方の解説書。ピラミッドストラクチャーの鉄則として以下の3つが存在。
  • どのレベルであれ、あるメッセージはその下位グループ群のメッセージを要約したものではなればならない
  • 各グループ内のメッセージは同じ種類のものでなければならない
  • 各グループ内のメッセージは論理的な順序で配置されなければならない
• ピラミッドストラクチャーの手前に導入部を配置する。導入部は
  • Situation: 状況 
  • Complication: 複雑化
  • Question: 疑問 

の順に展開され、その疑問に答える形でピラミッドの上位メッセージが対応するようにする。例えば、 

• • 状況=我々には問題がある
  • 複雑化=解決策がある。それには〇〇ドルの支出を要する
  • 疑問=私は承認すべきか？ 

ときてからその疑問に答える形で 

• • ピラミッドの上位メッセージ: この支出を承認せよ

• • ピラミッドの下位メッセージ(上位メッセージの根拠を提示):
    • 今、解決せねばならない
    • この行動により問題は解決する
    • 財務的に見ても支出は合理的である
    • この行動により、さらに他の副次的効果が得られる

のような構造を作っていく。

• メッセージ間の関係性としては演繹法と帰納法がある。演繹法の方が明快ではあるが、まどろこしいので帰納法が好まれる。ただし帰納法では下位メッセージのグループ化が自明でなくなるため、適切なグループ化ができているかを見極める技術が必要になる。
• 上位メッセージは白紙の主張は避けるべき。例えば「会社には組織に関する2つの問題がある」はNGで、「あなたが現在直面している組織上の主問題は、権限委譲が上手くできていないことである」のように具体的なメッセージを込める

感想

「ピラミッドストラクチャーだけ理解すればこんな分厚い本はいらないんじゃないか」と思っていたが、ピラミッドストラクチャーの前の導入部の作り方やピラミッドストラクチャーを支える論理構造の部分(演繹法・帰納法)はなかなか複雑で結構学ぶべきことがあった。ただしところどころ分かりにくい実例があったとは思う。世間で「読みにくい本」と言われているのも頷けた。

読んだ本の備忘録②「WORK SHIFT 孤独と貧困から自由になる働き方の未来図〈2025〉」

今年から読んだ本については、備忘録として感想などをまとめようと思う。2冊目は「WORK SHIFT 孤独と貧困から自由になる働き方の未来図〈2025〉」。

本の内容

グローバル化や技術発展、環境問題の悪化などによって働き方がどのように変わるかを2012年に考察して書かれた一冊。ここで働き方を変える要因とされているのは以下の5つの事項。

• 要因1: テクノロジーの進化
• 要因2: グローバル化の進展
• 要因3: 人口構成の変化と長寿化
• 要因4: 社会の変化
• 要因5: エネルギー・環境問題の深刻化

著者は、未来には大きく分けて2つのシナリオがあると提案する。一つは「漫然と迎える未来」であり、ここでは人々がタスクに追われたり、リモートワークが普及しすぎて人との実際の接触が失われたり、あるいは貧困から抜け出せない日々が描かれている。もう一つは「主体的に築く未来」で、ここでは世界中の人々と協力したり、ミニ起業家として活動したり、また多様なキャリアを経験することが可能になるという。

「主体的に築く未来」を実現するためには、働き方における3つのシフトが必要だと著者は説く。

• 第一のシフトはゼネラリストから「連続スペシャリスト」への変化
• 第二のシフトは孤独な競争から「協力して起こすイノベーション」への移行
• 第三のシフトは大量消費から「情熱を傾けられる経験」への転換

感想

個人的には、キャリアが一つの山ではなく、連なる山脈のようになるというビジョンが特に魅力的に感じた。数年間の仕事の後にサバティカルを取り、新たな仕事に挑戦するというライフスタイルは、現在も徐々に現実のものとなりつつある。

しかし、この本が提案する「主体的に築く未来」は、結局のところ個人の選択に委ねられており、貧困問題の解決策は提供されていない。また、リモートワークが孤独をもたらすとする「漫然と迎える未来」と、協働の未来を描く「主体的に築く未来」の対比は、結局捉え方の問題ではないかとも感じた。

しかし全体的には納得感があったし「2024年現在起こりつつある変化」が2012年の時点で解像度高く描かれているのはさすがと感じた。