エンジニア見習いの雑記帳

エンジニア見習いの雑記帳

TailwindCSSで、改行コード"\n"をきちんと認識させる

初期状態では"\n"が空白文字として認識されるので、以下のクラスを指定するときちんと改行コードとして認識される。 他にも、文章の折り返しの有無や空白をどのように扱うか、色々設定出来るので公式ドキュメントはしっかり読む癖をつけていきたいものである。

エンジニア見習いの雑記帳

    • VSCode上で、関数等の色表示が白かった時は配色テーマを変更しよう

      しょうもない事だけど、エディタ右下にある設定ボタンから配色テーマを"ダークモダン"、"モダン＋"等に変更すると、関数等の文字列が着色される。 お好みに応じて色々変更出来るのだろうけど、用意されている配色テーマでも十分満足だ。

      エンジニア見習いの雑記帳

      • Macを新調したついでに、環境構築を見直した

        プロジェクト単位でNode.jsのバージョンを管理するために、voltaというツールを使用してみた。 使い方は単純で、以下のコマンドをターミナルに入力するだけ。 最新版をインストールする場合は、volta install node@latest特定のバージョンを指定する場合は、volta install node@20.12.1と入力する。 他にも、Homebrewを使用して、個人開発で使用する各種パッケージを一元管理するよう徹底した。 今後も、環境構築はなるべくわかりや

        エンジニア見習いの雑記帳

        • プロンプトエンジニアリングについての有用サイト

          プロンプトの品質向上については、以下のサイトを閲覧すると良い。 特に"Techniques"の項目は、具体例も示しつつ丁寧な解説があるので、とても勉強になりプロンプト文の簡素化・具体化に一役買ってくれた。

          エンジニア見習いの雑記帳

        TailwindCSSで、改行コード"\n"をきちんと認識させる

        エンジニア見習いの雑記帳

        マガジン

        • エンジニア就職について
          1本

        記事

          コンテンツの表示領域をドラッグ&ドロップで変更する

          ドラッグ&ドロップで表示領域を自由に変更したい場合、"split.js"を導入する必要がある。 また、適用したい箇所ではレイアウトをフレックス、もしくはグリッドで統一する必要があるので、手直しが結構面倒であった。 split.jsを導入するには、"npm install split.js"をターミナルで入力するか、以下のスクリプトタグをHTMLファイルのheadタグ内に設置する。 <script src="https://cdnjs.cloudflare.com/aj

          エンジニア見習いの雑記帳

          コンテンツの表示領域をドラッグ&ドロップで変更する

          エンジニア見習いの雑記帳

          WebアプリにMonacoEditorを埋め込む方法

          現在作成中のWebアプリにエディタ機能を実装する必要性が出てきた為、何か良いサービスはないかと探していた。 そしたら、vscodeと同様の機能を要するMonacoEditorというサービスを発見した。 次は実際に導入する方法だが、まずターミナル上で以下のコマンドを入力する。 npm install monaco-editor インストール後に、HTML・JavaScriptファイルを用意して以下のように記述する。 index.html... <div id="edi

          エンジニア見習いの雑記帳

          WebアプリにMonacoEditorを埋め込む方法

          エンジニア見習いの雑記帳

          ChatGPT-APIからの出力内容をJSON形式にする

          今まで出力内容を特に指定していなかったので、思い通りの形に整形するのが困難だった。 これはどうにかして解決しないといけないと考え、まずプロンプトに必ず含むべき要素を指定して出力するようにした。 すると、出力内容にある程度の一貫性が見られるようになった。 しかし、それでも毎回同じ形では出力されないので、さらなる改良が必要だった。 次に、JSONで出力されるよう指示したらいいのでは？と思い立ち、公式ドキュメントを読むと以下の部分に求めていた事が書いてあった。 上記の方式を採用

          エンジニア見習いの雑記帳

          ChatGPT-APIからの出力内容をJSON形式にする

          エンジニア見習いの雑記帳

          ローカルストレージを利用して、ChatGPTの出力結果を保存する

          function saveToLocalStorage(example1, example2, example3) { if (example1.trim() && example2.trim() && example3.trim()) { localStorage.setItem("example1", example1); localStorage.setItem("example2", example2); localStorage.setItem(

          エンジニア見習いの雑記帳

          ローカルストレージを利用して、ChatGPTの出力結果を保存する

          エンジニア見習いの雑記帳

          ChatGPT-APIでのプロンプト圧縮

          どうにかしてトークンの使用量を削減したいと考え、プロンプトを例えば機械語ないしは圧縮データ等にエンコードし、API経由で送信可能かどうかをChatGPTで質問してみた。 すると、以下の内容で返信された。 ・解釈の複雑さ及び、API側の制限 プロンプトを機械語等にエンコードして送信する場合、ChatGPT側でそれらをデコードする為の処理レイヤーが別途必要になる。 現在のChatGPTではこのレイヤーは実装されていない為、自然言語で入力・送信する必要がある。 また、API側も自

          エンジニア見習いの雑記帳

          ChatGPT-APIでのプロンプト圧縮

          エンジニア見習いの雑記帳

          ChatGPT3.5の出力品質を向上させる為に必要な事　その３

          "Chain-Of-Thought"を使用するなら、事前に要件を指定して最終的な出力に至る迄の順序を、なるべく単純かつ明快にする。 ChatGPT自身に出力内容に対しての評価・順位付け・再構築という循環を行わせる時、この一連の流れがあまりにも複雑だと、期待とは違う結果になりやすい。 また、トークン使用料を下げる為にも、出力するのは最終結果のみと言及しておく必要がある。 最初は勝手が分からず困っていたが、自作した以下の例文を追加すると品質向上が見込めた。 英語がまだまだ苦手な

          エンジニア見習いの雑記帳

          ChatGPT3.5の出力品質を向上させる為に必要な事　その３

          エンジニア見習いの雑記帳

          ChatGPT3.5の出力品質を向上させる為に必要な事　その２

          ・評価指標の明確化について 生成された文章について評価を行う時、何かしらの言葉を定義付の指標として用いるだろう。 それが"精度"であったり、"正確"という言葉だとする。我々人間であれば、その言葉が意味する事を程度の差はあれ理解出来る。Chat GPTには、それらが"何を意味するのか"をただぼんやりと投げかけるよりは、より明確にすると品質の向上が見込める可能性がある。 例えば、舞台設定のある物語を出力させるとする。 もし、プロンプト内で"精度"という言葉を評価指標として使用

          エンジニア見習いの雑記帳

          ChatGPT3.5の出力品質を向上させる為に必要な事　その２

          エンジニア見習いの雑記帳

          ChatGPT3.5の出力品質を向上させる為に必要な事

          ・要件をより具体的に記述する。 ・入出力の詳細例を添付する。 ・出力に対する評価基準を明確にする。 ・なぜ特定の意図に沿った出力を行わせるのか、その目的を明記する。 ・ChatGPT3.5の強みを活かせるよう、それに沿った内容にする。

          エンジニア見習いの雑記帳

          ChatGPT3.5の出力品質を向上させる為に必要な事

          エンジニア見習いの雑記帳

          ChatGPTのモデル間による出力結果の差異

          ChatGPT-APIを使用したアプリケーションの作成中、試しにモデルを"gpt-3.5-turbo-0125"から"gpt-4-0125-preview"に変更してみた。 すると、プロンプトは一切変更していないにも関わらず、出力結果に大幅な違いが見られた。 モデル4はモデル3.5に比べて、より複雑なタスクをこなせるよう設計されている。この事は事前に知っていたが、いざその結果を目の当たりにするとこれほど迄に違いがあるのか、とただただ驚いた次第である。 プロンプトには思考の

          エンジニア見習いの雑記帳

          ChatGPTのモデル間による出力結果の差異

          エンジニア見習いの雑記帳

          tailwindCSSでの高さ、横幅の設定

          通常height、widthの設定は"h-1""w-1"という形で設定する。 "tailwind.config.js"でスタイルを自作していない場合、"h-[100px]"と記述する事でピクセル単位で指定出来る。 []で記述する事をJIT(Just In Time)モードという。

          エンジニア見習いの雑記帳

          tailwindCSSでの高さ、横幅の設定

          エンジニア見習いの雑記帳

          TCP・UDP等を学んでいて感じた事

          現在Pythonを用いて、CLI上でデータを送受信するプログラムを作成している。 クライアント側でUDP方式によりデータを送受信するだけで苦労したが、更にルームを作成したり、既に作成済みのルームへの参加する機能を実装するとなると難易度が跳ね上がる。 知識のない状態で上記の内容を実装するのはとても大変で、世の中で利用されているメッセージアプリケーションがどれだけ凄い物なのかを実感している。 改めて、アイデアを形に出来るエンジニアには感服しかない。いつか自分もそうなれるよう、日

          エンジニア見習いの雑記帳

          TCP・UDP等を学んでいて感じた事

          エンジニア見習いの雑記帳

          TCP通信について

          TCP通信におけるヘッダーとボディーとは？ ・ヘッダー 制御情報を含むデータパケットの一部である。カスタムTCPプロトコルを作成した場合、ヘッダーにパケット関係の様々なメタデータを含められる。 ヘッダーには、アプリケーションがデータを適切に理解し読み取れるよう設計されている。 これは、郵便物における封筒や住所のようなものである。 ・ボディ アプリケーションが扱う実際のデータを含んでいる。ボディの内容と形式は、クライアント側の操作によって変化する場合がある。 何故ヘッ

          エンジニア見習いの雑記帳

          TCP通信について

          エンジニア見習いの雑記帳