kulcha_log

雑多で個人的な備忘録
2024年6月21日

読書メモ：『残された時間—脳外科医マーシュ、がんと生きる』

読書

概要

イギリスにおける社会保障制度の一つ、NHS（国民健康サービス）による拠点病院を中心に、脳神経外科医としてさまざまな症例の患者の治療に携わってきた著者。65歳でNHSを引退してからは、ネパール、ウクライナで外科医として現地の医師をアシストする立場として活躍していました。

その中で、新型コロナウイルスの蔓延により国境をまたぐ活動が難しくなります。また、著者は前立腺に違和感を覚えるようになっていましたが、パンデミックに公私ともに翻弄されていました。こうした混乱が一段落した上で前立腺を同僚の医師に見てもらったところ、進行性のがんに冒されていることがわかります。ホルモン治療や放射線治療を続ける中、自らの生と死の間で揺らぐ心情や様々な形で現れる老いへの落胆が日常の描写とともに綴られます。その合間に、人間をはじめとする生命活動や地球との関係性、人間が持つ無意識と有意識の間にある関係性といった自然科学的な現象についての著者自身の考えが、冷静かつ俯瞰的な見地によって展開されます。

所感

一人の人間としての医師が、後戻りのできない病に冒されたときの心情の変化について、少しだけうかがい知ることができた気がします。

医学生から研修医を経て、一人前の医師としてのアイデンティティを確立してゆく中で、「病気にかかるのは患者だけで、自分たちは関係ない」といった、非医療従事者からは理解することが難しい考え方が定着してゆく事例が、著者自らの体験談を交えながら紹介されています。本来は医師も一人の人間ですが、あらゆる症例を学んでゆく中、自身の体に出た症状が軽微なものでも「大病にかかったのでは」という不安を抱く傾向があるようです。こうした不安から逃れるため、「自分たちは病気には関係ない」という心持ちを抱くようになるとのことです。

上記のような一種の「強がり」的な心持ちは、医者に限らずほかの職業にも当てはまりそうに思えました。 そして、この「強がり」は時として自身の足かせになってしまうことを、この本から学び取ることができたように思えます。

著者は、パンデミックが尾を引く中で前々から違和感を覚えていた前立腺の検査を受けます。その結果が明らかになったときの著者自身の反応が記された一節のことでした。血液検査の結果、前立腺がんの指標となるPSA値が、同がん患者の大部分で示される値よりも遙かに高いとわかったときです。

著者は検査の日、自転車を使って病院に行ったことから、「自転車のサドルが尻に圧力をかけてPSA値を上げるおそれがある話を読んだことがあった」ということと結びつけて、PSA値が上がったのは自転車を使ったため「検査は間違いだ」と自分に言い聞かせます。 しかし検査の結果、PSAの異常値はそうした要因ではありませんでした。その上で、進行性の前立腺がんに冒されていることが判明します。広範囲に転移しているかどうかは、さらに結果を待つ必要がありました。 結果が判明するまでの間、医療従事者としての冷静さがあたかもすっぽりと欠けてしまったように、著者自身が動揺する様子が綴られます。

こうした隠しきれぬ動揺を文章からうかがったことが、私にとって大きな驚きでした。 この本の場合、これまで数多くの患者や症例を目にし、さらに治療に携わってきた当事者ががんに冒されると、医師という確固としたアイデンティティが一枚の布のように、軽々と遠くに飛んでしまうように思えました。 そこには「強がり」といった心持ちはなく、一人の人間として病に立ち向かう様子が当事者の自身の手によって綴られています。

がんの判明後、治療の日々においても、生への望みと死への絶望の間で揺れ動く著者自身の心情が細かく描写されます。 著者が日々続けているウォーキングやランニングの途中、これからの人生を考えて落ち込む様子、またはそれとは逆に自身で希望的な観測を見いだしている様子もあります。

著者が日常生活の様子について綴った数々の部分も深く心に残りました。 趣味の木工、孫娘に聞かせるためのオリジナルの童話を考える様子、パンデミックの中、離れたところで暮らすことになった妻の体調を案ずる様子などが話題になります。こうした様子からは、目の前のささやかな日常に対する著者のあたたかいまなざしを感じられます。

この本に限らず、どんな状況で窮地に立たされても「望みを忘れてはならない」とは幾度も耳にした言葉かもしれません。 それはなぜかと思った時、この本の著者が、残された人生の時をかみしめながら「今目の前にある日常」を生きる姿を思い出すことが、心に深くこの言葉を切り刻むための重しとなるだろうと思いました。

書籍情報

『残された時間—脳外科医マーシュ、がんと生きる』
ヘンリー・マーシュ 著、小田嶋由美子 訳、仲野徹 監修、みすず書房、2024年発行

2024年6月3日

11tyによる当サイトの制作記録（その2・開発環境構築〜テンプレートファイルの作成）

はじめに

その1で記したとおり、当Webサイトは静的サイトジェネレーター「11ty」を使用して制作しました。生成したHTMLファイルをWebサーバーにアップロードして公開しています。公開までの大まかな過程は、下記5ステップに分けられます。

  1. ローカルで11tyでの開発環境の構築
  2. テンプレートファイルの作成
  3. コンテンツファイルの作成
  4. CSS、JavaScriptなど、サイトの装飾用ソースコードを作成
  5. ブラウザでのプレビューと装飾用ソースコードの修正

ここでは、これらのステップのうち、1と2について紹介します。

11tyの使用にあたっては、株式会社豆蔵のデベロッパーサイトや、ZennでKey5nさんが執筆されている「静的サイトジェネレータ 11ty を使いながら説明してみる」を参考にさせていただきました。

1. ローカルで11tyでの開発環境の構築

  • 開発用のディレクトリをローカルに作成し、そのディレクトリ上でターミナルからnpm init -yを実行します

  • 続いてnpm install --save-dev @11ty/eleventyとして、11tyをインストールします

    画像はインストールが済んだ直後の開発用ディレクトリ（例：eleventy_test）配下のファイル構成です。node_modulesディレクトリ配下に@11tyがあります。
    11tyインストール直後の開発用ディレクトリのファイル構成

  • ここで、トップページindex.htmlに適用するコンテンツファイルindex.mdを開発用ディレクトリ直下に作成します

    ここではファイルの1行目にHello world!と書きました。
    index.mdに「Hello world!」と書き込む

  • この状態でターミナルからnpx @11ty/eleventy --serveと実行すると、サイトのデータが生成されます

    開発用ディレクトリ配下に_sitesディレクトリが作成され、その配下にトップページindex.htmlが生成されます。ターミナルには[11ty] Server at http://localhost:8080/などと表示されます。サイトのデータの生成とともに、localhostが立てられます。ウェブブラウザでhttp://localhost:8080にアクセスすると、index.mdに書き込んだHello world!が表示されます。
    トップページ「index.html」の生成状態

2. テンプレートファイルの作成

テンプレート、コンテンツ両ファイル間の紐付け

テンプレートファイルを作ってコンテンツファイルと紐付けると、11tyが後者の内容を前者に代入してHTMLを生成します。

紐付けには、まずコンテンツファイル冒頭で、---で挟んだYAML記述部分（front-matter）を設けます。その中にlayout: sampleと記述しておき、キーlayoutの値sampleを名前に持つテンプレートファイルsample.liquidを用意します。こうして紐付けが可能になります。

コンテンツファイル冒頭のYAML部分では、キー名がテンプレートファイル内での変数名、値が同じく変数の値となります。上記のlayoutキーは11tyで独自定義されているため特殊な扱いとなりますが、下図の通りYAML部分にtitle: テスト投稿とし、テンプレートファイルで<h1>{{ title }}</h1>とすると、HTML生成時にテスト投稿が{{ title }}に代入され、<h1>テスト投稿</h1>と出力されます。

また下図の通り、コンテンツファイルでのfront-matter以後の内容は、自動的にcontentキーの値として扱われます。テンプレートファイルで変数{{ content }}と記述すると、HTML生成時にfront-matter以後の内容が変数に代入されて出力されます。

上記のしくみを利用して、サイトに必要なテンプレートファイルとコンテンツファイルを作成してゆきました。

Liquid形式でのテンプレートファイルの作成

当サイトにはHTMLに記述方法が近いLiquid形式での作成が容易と判断しました。

11tyのデフォルトの設定では、開発用のディレクトリ直下に_includesというディレクトリを作ると、この配下のファイルはテンプレートファイルとして認識されます。

サイトの作成にあたって、大まかに「トップページ用」「各記事のページ用」「同一タグ記事一覧ページ用」の3種類のLiquidファイルを_includesディレクトリ配下に設けました。

開発用ディレクトリ/
    ├─ _includes/               // テンプレートファイル格納ディレクトリ
    │   ├─ index.liquid         // トップページ用
    │   ├─ article.liquid       // 各記事のページ用
    │   └─ tag_dummy.liquid     // 同一タグ「dummy」記事一覧ページ用
    ├─ node_modules/
    ├─ package-lock.json
    ├─ package.json
    ├─ _site/                   // 生成ファイル格納ディレクトリ
    └─ index.md                 // コンテンツファイルの1つ（当頁1.で作成）

ソースコードの一例

トップページ用のテンプレートファイルindex.liquidは下記のようなソースコードです。 {% include ... %}は、他のテンプレートファイルをインポートする記述です。 コードブロックやページの部分ごとに子要素となるテンプレートファイルを設けることで、極力保守性を確保しました。 各子要素のテンプレートファイルの紹介は割愛しますが、例えば3行目の{% include "head/_for_index.liquid" %}には、HTMLの<head>タグの範囲内の内容を記しています。

<main>タグ範囲内の中盤は、過去10記事を見出しにして載せられるようにしています。

9行目、{% for item in collections.topItems %}のcollectionsは、コンテンツファイルのfront-matterで設けた特定のタグなどをキーに集めた配列様のオブジェクトです。これに対し{% for %}と{% if %}を組み合わせれば、オブジェクトに格納されている要素と、Liquidファイルに記したHTMLタグとの組み合わせで、条件に合った内容の一覧を作成することもできます。

index.liquid
<!DOCTYPE html>
<html lang="ja">
    {% include "head/_for_index.liquid" %}
<body>
    <main>
        {% include "body/header.liquid" %}
        {% assign itemCount = 0 %}
        {% assign limit = 10 %}
        {% for item in collections.topItems %}
            {% assign segArr = item.page.url | split: "/" %}
            {% for elem in segArr %}
                {% if elem == "articles" %}
                    {% if itemCount <= limit %}
                        {% if itemCount < 1 %}
                            {% include "body/article_area.liquid" %}
                            {% assign itemCount = itemCount | plus: 1 %}
                        {% elsif itemCount < 5 %}
                            {% include "body/section_area.liquid" %}
                            {% assign itemCount = itemCount | plus: 1 %}
                        {% elsif itemCount < 10 %}
                            {% include "body/topic_area.liquid" %}
                            {% assign itemCount = itemCount | plus: 1 %}
                        {% endif %}
                    {% endif %}
                {% endif %}
            {% endfor %}
        {% endfor %}
        {% include "body/footer.liquid" %}
    </main>
    {% include "body/realtype_script.liquid" %}
</body>
</html>

この後は、コンテンツファイルの作成、CSSやJavaScriptといったサイト装飾用ソースコードの作成、ブラウザでのプレビューと装飾用ソースコードの修正です。これらの内容は、引き続き「その3」として後日アップしたいと思います。

2024年5月26日

読書メモ：『頭のいい人が話す前に考えていること』

概要

マーケティング会社の経営者、コンサルタントとして企業の課題解決に取り組んでいる著者による本です。
著者が新卒で入社したコンサルティング会社での多くの経験談を交え、相手が求めていることに応える話し方について、非常に細かく説明されています。

2部構成で、前半の第1部は、著書名にもあるとおり、相手に向かって「話す」以前の「考え方の基本」を取り上げます。
後半の第2部は、第1部の「考え方の基本」をさらに深く掘り下げます。
話の組み立て方や話者への質問の方法といった行動レベルに至るまで、多くのスキルが記されています。
第2部の最後は「話す」にとどまらず、読書ノートやノウハウメモといった他のアウトプット方法にも言及されています。

この本を手に取ったきっかけ

他人に物事を過不足なく伝えるスキルを身につけたいと思ったことが発端でした。
雑談は時に対象外となりますが、日頃から公私問わず自分の話す内容に無駄があると感じていました。 そのため、自分の話から「贅肉を取って骨格を正す処置ができる」方法となる本を探していました。
電子書籍のストアで話し方に関する書籍を探していた時、この本に目にとまりました。
「立ち読み」機能を試したら非常に読みやすい文体だったため、そのまま購入に至りました。

所感

特に第2部ですが、各項で実際のビジネスシーンでつまずきそうな状況への対処法が示されていると思います。
話す前に「事実と意見を分ける」ことや、「相手の困っていることに対して、内容を整理しながら相手の言いたいことは何なのかを考えながら聞く」ことなどが一例にあります。
自身にとって、冷静なときは自覚できていても、会話が盛り上がるとおろそかになってしまうポイントが非常に多い内容だったと思います。
言い換えれば、ほぼ全ての項目を頭にたたき込みたくなるほど、この本に意思疎通の肝要が詰まっていると感じました。

今まで公私問わず多くの方々と接してきた中で、時に失礼な見方になってしまいますが「この方と話すとなぜか疲れないよな…」とか「この方は物事の内容をより深く捉えられておっしゃっているな」という印象を抱いたことが幾度かあります。
そうした方々が自分に向かって話をされるとき、考えていることは分かりませんが、体の外に現れる特徴がことごとくこの本に載っていると思いました。
そして、外に現れる特徴の基礎は、まさにこの本のタイトルにもある「話す前に考えていること」なのかと気づかせてくれるような内容でした。

こうした「話す前に考えていること」を実践する上で、「素直であること」、「知っていることと知らないことの区別が付き、その区別を内外ともに保てること（＝無知の知に気づけること、知ったかぶりしないこと）」、「他人の気持ちに対して謙虚さを忘れないこと」といった基本的な心の持ち方が強い基礎となると感じました。

本全体を通して、話し方と考え方について網羅されていると感じるほど、公私問わず人と話す上で必要な基本が詰まっていると思います。
そして、易しく読みやすい文体で書かれていると思います。そのため、一気に読むことができました。
実際に自分が話す場合になったら、もちろん本に書かれていない事例にたくさん遭遇すると思います。
ただし、この本に書かれたことはほぼ全て応用が利きやすいと思いました。
日常のコミュニケーションの中で、どう話そうか少し迷うことがある場合に、適度なボリュームと整った骨格を示してくれる道しるべになると感じました。

心に残ったポイント3つ

  • 知識は披露するのではなく、だれかのために使ってはじめて知性となる
  • 「相手が何を求めているのか？」を常に想像しながら生活する
  • 「わかった気になったときが一番危ない」

書籍情報

『頭のいい人が話す前に考えていること』（電子版）
安達裕哉 著、ダイヤモンド社、2023年発行

2024年5月19日

11tyによる当サイトの制作記録（その1・当サイトの制作に11tyを使うと決めるまで）

サイトの目的

当Webサイトは、サイト名の下にあるとおり「雑多で個人的な備忘録」、つまりブログのようなものです。
「のようなもの」としたのは、現状ブログと言える機能がなく、こちらからの一方通行の発信となっているためです。
このサイトの目的も「雑多で個人的な備忘録」そのものです。
ペンと紙を使うような気軽さで、日々の思いや考えを書き残したい考えが強いです。

サイトの技術的な形態

レンタルサーバーにHTMLとCSSとJavaScriptをアップロードして公開しています。
「11ty」を使い、PCのローカル上でHTMLを生成しています。
こうした形態とした理由について、以下に記しました。

過去にWebデザインの実務にごく部分的に携わって

私は過去に、グラフィックデザイナーとして勤務する中、Web制作の実務に数ヶ月ほど携わったことがありました。
といっても、Photoshopでのレイアウトデザインがメインでした。
フロントエンドのコーディングになると、HTMLとCSSの作成を少しお手伝いする程度のものでした。
ですが、当時アナログ作業とAdobeアプリのGUIによる操作でデザインを構築することしか行ったことのない身にとって、テキストエディターでイチからコードを書いてデザインを構築することは、毎日が驚きと発見の連続だった期間でした。
数ヶ月ほどの業務だったため記憶が曖昧ですが、当時は「jQueryやレスポンシブデザインの興隆期」のような状態だったと記憶しています。

フロントエンド関連技術の独学を通じて

一方コーディング、特にJavaScriptについては、実務でほんの少しお手伝いはしたものの、書いたコードが思うように反映されず苦心の連続でした。
その状態でWeb制作業務から離れたため、消化不良の感覚が強く残りました。

こうした感覚を少しでも解消したいと思い、その後もJavaScriptを独学していました。
独学中に、TypeScriptやReactが台頭し、次第にそれらの知識も習得したいと思うようになりました。
ですが、その流れになかなか追いつけていないのが自らの現状です。

ただ、実務に携わった以上、デザインはイチから作りたいという強い希望がありました。
ブログ的なサイトである以上、ブラウザで表示された時に最優先することは「文章が読みやすいデザイン」だと考えています。
特に、記事の途中で関連性の低い広告が表示されることは避けたいと思いました。
ここで、さまざまな企業によるブログサービスを使用するのは選択肢として難しくなります。
加えて、PHPの知識がないため、WordPressでの運用も考えづらい状況です。

11tyを使った決め手

これまで記した状況や条件を踏まえてこの備忘録をカタチにするには、最終出力はブログのようなものですが、ブログという様式に厳密にこだわらなくてもよいと考えました。
「一方通行の発信」という現状を踏まえ、最終的にHTMLとCSSとJavaScriptをWebサーバーにアップできれば、必要最低限の仕様を満たせると判断しました。
サーバーをレンタルするコストはかかりますが、最優先すべき「文章が読みやすいデザイン」を実現するために至った結論でした。

その上で、HTMLへのハードコーディングは避けたいと思っていました。
こうした希望を満たす技術がないか調べたところ、「静的サイトジェネレーター」という技術がある、そしてその中にMarkdownからHTMLの生成が可能な「11ty」というものがある、ということを知りました。
Markdownが使えると記事の作成も気軽にできると考え、最終的に11tyを使おうと決めました。
11tyの公式サイトや、11tyを紹介なさっているさまざまな企業や個人の方々のサイト（例：株式会社豆蔵のデベロッパーサイト）を拝読し、Markdownに限らず、JavaScript（.11ty.js形式）、Liquid、Hamlといった多様な形式からHTMLが生成できることを知りました。
さまざまな入力形式を受け付け、出力はHTMLに収斂する形態であることが大きな決め手となりました。

以上のような経緯で、11tyを使った当サイトの作成に至ります。

この続きは「その2」として後日アップしたいと思います。

2024年5月12日

読書メモ：『「技術書」の読書術—達人が教える選び方・読み方・情報発信＆共有のコツとテクニック』

概要

特にIT関連分野で、技術書との付き合い方を事細かに知ることができる本です。
加えてタイトルの内容に関わらず、技術の習得方法全般について幅広く、深く知ることができる本だと思いました。

「選び方」、「読み方」、「情報発信と共有」の3部につき、2人の著者がそれぞれのノウハウを紹介しています。
2人のノウハウに少し差があることで、より多角的な視点での付き合い方を身につけられると思いました。

この本を手に取ったきっかけ

プログラミングを独学している身として、さまざまな書籍から効率的に知識を得る方法を探していました。
特定の技術や言語についてのタイトルは、業界のシェアが多いものについてほど多くなると思います。
その中から自分に合った本の見つけ方や、実際に手にした本を読んでゆく際、難しくて手が止まりそうな時の対処法を強固にできればと思ったのが動機でした。

所感

多くのノウハウのうち、できそうなことから実践してゆくだけも効果が現れそうに思えて、自身にとっては密度の濃い内容でした。
特に、第2部の「読み方」の内容が響きました。
ここには、言語や技術を学ぶ目的と手段を履き違えないための知恵が詰まっていると思います。

一例として、「入門書は3冊読むことで各本の量や質のギャップを補え、より知識が深まる」といった内容がありました。

私はこれまで入門書について、「これなら自分に合いそうだ」という一冊を決めて買っていました。
それをバイブルのように読み込みながら、内容を覚えようとしていました。
しかし、途中で理解につまずいてしまうことがありました。
その際、Webを利用して多くの記事や記述から理解を深めていました。
その後、不明な部分の知識を強固にしたいと思って再び書店やAmazonを訪れ、さらにサポートとなりうる書籍を買い足していました。

『「技術書」の読書術』でこの内容に接した時、今まで心の中に抱えていたモヤが晴れたように思いました。
「3」という数が、多からず少なからずジャストな分量だと思いました。

また、「『自分が作りたいもの』を意識して読むこと」や「まずは汚くても「動くコード」を書くことを心がける」といった内容もあり、「学び方」にとらわれすぎないことにも技術を会得するコツがあることを掴んだ気がします。

第3部の「情報発信と共有」でも「3」がキーナンバーとして登場しています。
情報発信を上達させるコツとして、中国の歴史学者・欧陽脩が提唱した「三多」という条件が紹介されています。
また、アイデアが出やすい場所としても、同氏が提唱した「三上」という条件を紹介しています。
これらの概念もシンプルな内容のため、すぐに実践できそうに感じました。

このほかにも、自身が技術書を読む上で取り入れたいスキルが満載でした。
最後に、上記の他に特に重要と感じた点を3つ紹介します。

心に残ったポイント3つ

  • 知識や技術を得る目的と難易度に応じて本を選ぶ
  • プログラミング書では、自分が作りたいものを意識し、本の内容展開に忠実に沿って読むことにこだわらない
  • 技術書だけでなくジャンルを問わず本を読むことで、多角的な見方ができ、新たなアイデアの発想にもつながる

書籍情報

『「技術書」の読書術—達人が教える選び方・読み方・情報発信＆共有のコツとテクニック』
IPUSIRON、増井敏克 著、翔泳社、2022年発行

2024年5月7日

読書メモ：『アルフレッド・アドラー　人生に革命が起きる100の言葉』