Genie

学んだ事

2026/3/3

日記

ちはやふるを見た。

太一という人間をみて、記憶力がとても良い。

自分も記憶力が良かったが、逆にトラウマも忘れられず、苦しむ事もあった。そういうのを取っ払うために記憶力をなくした。

それで踏ん切りつけたら、前に進めたのはあるが、基礎が疎かになっていたり、 付け焼き刃で乗り越えようとすることが多くなった。

そういうのが自分の中に吸収できずにそのまま進んでいる。そうした事をなくすために、もう一度と自分に戻ろうと思った。

2026年1月29日

日記

世の力を感じるか如く自身の方向性へ注がれる内的資源の循環が良くされる。

 

何か物事を見て、出来ると方向性が見えたりすると、それに向かって走るというよりエネルギーが注がれる。自分は何か誰もやらない事というより、誰かがやっていたりするのを見て、できると確信する。夢に憧れるというより道筋が見える。

 

そういうのって、外部に掲げる目標とは違う。

そもそも外部に対しては何かしらの忖度がある。

 

その忖度をしてしまうと少なからず自分ではない方向に行ってしまう。

なのだから、嫌悪ではなく嫌だという感情は、自分を持つ上で大切な事だ。

 

AIについて

メモ

AIについてとだが、

現代において、ワークフローの構築が多く見られる。友人の中には営業資料やプレゼン資料を作らせる事が多いらしい。

私の実務でも検索やコードを書かせたり、

プレゼンテーションは、フロントでアニメーション指示とかして作らせる。

 

一部、業務の観点でいくと自動化はされているという実感があまりないが、各ロジックの層の流れを循環させるという事に関しては素晴らしさを感じる。

いちご狩りに行った際、農場で自動で水が出たり、クマバチが花に蜜をとりに行っているのもみると、このようなシステム化されたものは気持ちいいものだなと思った。

 

そう実際動くものをみて、開発業務でも静的な動作を確認していくよりデータの流れを力動的にさせた方がわかりやすいものではあると思った。

 

そういったワークフローを作るのは楽しい。

2026年1月26日朝

日記

朝、電車の蒼々とした走り行く姿と踏切の音を聞きながら、寒い風があたる道筋を渡ってゆく。

今日は、横浜に出社。

現場には自分一人だけだ。

パソコンの配置を変えるため、いつも違うオフィスに行く訳だが、なんだが少しルーティンから外れるような感じがして、心が微細な新鮮さを示している。

自宅を出る前に相変わらずプログラミングをしていた。していたといっても、Claude Codeにnextjsとgoのアプリを作らせて、どのように連携するのかを見て、それを模写しているようなものだ。

 

フロント側でどのような事をして、バックに渡すにはどうしたらよくて、バック側ではどうすれば良いのかと。

 

型定義を持たせて、それに遵守する形にしたが

バックで行った型定義をフロントにも自動的に遵守させるようにはどうすれば良いかなど辿ってた。

ロジック的には簡単に出来そうだが、実務ではどうだろうか？

 

画面のバックで分離されているのもあって、そういうのはしない方がいいと思うが、そういったやり方も知りたいのはある。

 

ただ気になった事だが、そうやってLLMに書かせていると、これLLMがなかった時自分が書けるのか？といったら怪しい。そうしてreactやgoを0から書いて慣れたいのもある。

 

今の状況は、まるで剣の振り方の鍛錬をしてなくて、実戦でも剣の振り方を人に教えて貰いながら戦闘に加わっているようなもの。

 

一人だと基礎が盤石ではなく、思考が鈍る。

何かしら型という自分に嵌合するような堅いものがなく、筋肉が引き締めあってない。

最近、振り返ったこと

日記

個人的にエンジニアになって1年が過ぎた。 最初はphp goの言語の現場でフロントとバックエンドのDB周りを触っていた。 そこから5ヶ月ノーコードの現場に入り、 その後javaの現場に入った。

javaといっても初めてで触ったこともなかったから結構きつかった。

メールの機能やsessionの実装をやったけど、初めてにしてはきつかった。

そして今はAPIの開発業務をjavaで行っているが、初めてのことばかりで大変な毎日。

あと現場でもAIが使われるから自分のキャリア的にも心配な時期だ。

Next.jsでGoogle FontsをLayoutに組み込んで使う方法

Next.jsでGoogle Fontsを使う方法：DM Sansを例に解説

Next.jsでは、Google Fontsのフォントを簡単に読み込むことができます。今回は、その中でも「DM Sans」フォントを使って、どのようにHTML全体に適用するかを紹介します。

✅ next/font/google を使ったフォントの読み込み

Next.jsには、Google Fontsとの連携機能が最初から組み込まれていて、next/font/google を使うことで、フォントを効率的に読み込めます。

import { DM_Sans } from "next/font/google";

const dmSans = DM_Sans({
  subsets: ["latin"],
});

このように記述すると、DM Sansフォントが読み込まれ、dmSans というオブジェクトに情報が格納されます。

✅ dmSans.className の役割

このオブジェクトには、自動生成されたクラス名が含まれていて、次のように使います。

<body className={`${dmSans.className} antialiased`}>

ここでのポイントは：

  • dmSans.className: フォントを適用するためのクラス名
  • antialiased: Tailwind CSSのクラスで、文字を滑らかに表示するための設定

✅ 全体に適用するには RootLayout に記述

Next.js の app/ ディレクトリ構成では、app/layout.tsx や app/layout.jsx が全体のレイアウトを担います。そこに以下のように記述すれば、サイト全体でフォントが反映されます。

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${dmSans.className} antialiased`}>
        {children}
      </body>
    </html>
  );
}

📝 まとめ

項目 内容
DM_Sans Google Fontsの「DM Sans」をNext.jsで使うための関数
subsets 使用する文字セット（例：latin, japaneseなど）
dmSans.className 自動生成されたクラス名でフォントを適用するためのもの
body に適用 サイト全体にフォントを適用するため

アロー関数

javascript

アロー関数

1. 通常の関数定義

function fn(number) {
  return number * 2;
}
  • 説明: fnという通常の関数を定義しています。この関数は、引数numberを受け取り、その値を2倍にして返します。
  • 挙動: 例えば、fn(2)を実行すると、2が引数として渡され、2 * 2 = 4が返されます。
console.log(fn(2)); // 4

2. アロー関数 (fnArrow)

const fnArrow = number => {
  console.log(number);
  return number * 2;
};
  • 説明: この関数は、numberという1つの引数を取り、その引数をコンソールに出力し、次に2倍の結果を返すアロー関数です。
    • アロー関数は、従来のfunctionキーワードを使わずに関数を定義できる短縮記法です。関数式（関数を変数に代入する形式）に使われます。
  • 挙動:
    1. fnArrow(3)のように関数を実行すると、まずconsole.log(number)によって引数がコンソールに出力されます。
    2. その後、number * 2が評価されて、その結果が返されます。
fnArrow(3); // コンソールに "3" が表示され、6が返される
  • 短縮されたポイント:
    • 引数が1つだけの場合、()を省略できます。
    • 関数の本体が1行であれば、returnを省略することもできます（次で解説）。

3. オブジェクトを返すアロー関数 (fnArrowObj)

const fnArrowObj = number => ({ result: number * 2 });
  • 説明: このアロー関数は、numberという引数を取り、その2倍をresultというキーで持つオブジェクトを返します。
    • アロー関数の短縮記法では、1行で返す値がある場合に、returnを省略できます。ただし、オブジェクトを返すときは、{}が関数のブロックとして解釈されてしまうため、オブジェクトを返すためには()で囲む必要があります。
  • 挙動:
    • fnArrowObj(2)のように関数を実行すると、{ result: 4 }というオブジェクトが返されます。
console.log(fnArrowObj(2)); // { result: 4 }
  • ポイント:
    • ({ result: number * 2 })という括弧は、「オブジェクトリテラルを返す」という意図を示すために使用されます。括弧がないと、アロー関数の中括弧と解釈され、エラーが発生します。

比較

  • 通常の関数はより冗長ですが、functionキーワードを使うことでより明確に定義されます。
  • アロー関数は、短く書けるため、簡潔な記述が可能です。また、thisの挙動が異なりますが、このコードではその違いは影響しません。
  • オブジェクトを返すアロー関数は、()を使うことでオブジェクトリテラルを返せるという特殊なケースを利用しています。

まとめ

  1. 通常の関数: functionを使って定義し、引数を受け取って処理を行い、値を返します。
  2. アロー関数: 短縮記法で、シンプルな関数を簡潔に書けます。
  3. オブジェクトを返すアロー関数: 括弧を使うことでオブジェクトリテラルを返せるようにします。