はじめに 以前から情報共有に使用しているesa.ioでPlantUMLを使用したUMLをちまちま書いていましたが、去年Zenn1やNotion2、今年に入ってからGithub3やQiita4など続々とMermaidに対応しはじめ、esa.ioでも実はひっそりMermaidに対応5していた事が判明し、PlantUMLからMermaidに完全移行することにしました。 ここではMermaidに完全移行する際に説明した内容や、Mermaidでどのような事ができるのかを初心者向けにザックリ解説していきます。 また、項目が多くなってきたので使用事例については下記に移動しました。 Mermaidとは MermaidはAdobe製品のようにマウスを使って図を描くリッチなペイントツールやドローツールの一種...ではありません。Mermaid用の記法で記載したテキストから図を生成してくれるツールです。 Mer

はじめに みなさんはローカルの開発環境はdocker-composeで管理していますか？ 私はもう新しく作っているプロジェクトは全て、docker-composeで作っています。 imageを指定して簡単に起動でき、サービス間の通信もdepends_onで指定するだけでOKなのはすごく助かります。 CircleCIではv2になってからDockerをサポートするようになり、簡単にサービスを立ち上げることができるようになりました。 そこで感じたのが、開発環境で使っている docker-compose.yml をそのままCircleCIでも使用できれば、わざわざCircleCI用の定義を書かなくてよくなるのでは？、ということです。 結果 できました。つまり、 開発環境＝テスト環境(CircleCI上)を実現できました！ これで、開発環境とテスト環境でのサービス(MySQL etc)のバージョンが

はじめに A5M2（A5:SQL Mk-2）を macOS で起動させるまでの手順をまとめます。 A5M2（A5:SQL Mk-2）とは A5:SQL Mk-2は複雑化するデータベース開発を支援するために開発されたフリーのSQLクライアントです。 高機能かつ軽量で、使い方が分かりやすいことを目標に開発されています。 SQLを実行したり、テーブルを編集するほかに、SQLの実行計画を取得したり、ER図を作成したりすることが出来ます。 A5M2 を使ってみようと思ったのは、先日、こちらの記事を投稿した際のコメントで、経験豊富そうな方から教えていただいたことがきっかけです。 起動させたら、こんな感じのことがしたい。 ※ 2022/08/15 追記 A5M2 での ER図の自動生成 の記事を投稿しました。 環境 macOS（Intel） Big Sur バージョン: 11.6 Homebrew バー

要約 Wifiは無いに等しいと考えること。 (来場者1万強/日 なんていう状況下でWifiが動くと想定するのが駄目でした) 進捗管理する第三者を設けること。 ソースコード https://github.com/Na4Yu/EasyEats (RTDBのURLやSquareの個別キーは抜いているのでそのままは使えないです) はじめまして はじめまして、高校2年のNaYuです。 今回は文化祭で派手に失敗した話をさせて頂きます。 血反吐を垂れ流しながら書いていましたが、もし皆さんが文化祭を経て「この人のしたことをしなくて良かった~」なんて言っていただければ幸いです。(人の不幸は蜜の味) お願い 本記事は知見の共有を目的として個人が執筆したものであり、本記事の内容について学校、学校関係者への問い合わせはご遠慮頂けるようお願い申し上げます。 これを読んでいる後輩の方々へ この記事が私からの引き継ぎに

概要 これは、私の体験談ですがFlutterでクライアントサイドの開発をしている際、APIのレスポンスで来る日付と、アプリ内部で持っている現在日時を比較するというロジックに関する不具合報告が上がってきました。 それについて調査していたところ、ISO 8601形式のDateTimeがAPIから返却されるのに対し、何も考えずただDateTime型にパースしていました。 その結果、よからぬ挙動を起こしていたため備忘録として残したいと思います。 DateTimeの種類（抜粋） データーベースのシステムや、FirebaseなどのNoSQLサービスなどにも依存すると思いますが、DateTimeはいろいろな形式があります。 ISO 8601 ISO8601が今回の問題の日付フォーマットですが、以下のような種類があります 完全形式: 2023-08-01T00:00:00+09:00 短縮形式: 2023

ExpressionChangedAfterItHasBeenCheckedErrorとは 子コンポーネントに値を渡した後に親コンポーネントの値が変わってたときに出てくるエラーみたいです。 エラーになる原因 Angular2の変更検知（change detection） Angular2の変更検知オペレーションを理解しないとエラーになる原因がすっかり理解できないため、その処理を簡単にまとめてみます。 変更検知処理 チェックプロセス１ - 子コンポーネント・ディレクティブにバウンディングしているプロパティを更新する - 子コンポーネントのngOnInit, onChanges, ngDoCheckをinvokeする - 現在のDOMを更新する - 子コンポーネントの変更検知処理（チェックプロセス１再帰）を実行する - 子コンポーネントのngAfterViewInitをinvokeする 引用元

はじめに どんな仕事でも強い人は存在する。 でも最初から強い人は珍しい。 これは、web 業界に身を置いてみて、信じられないくらいムキムキになっていった人たちを見てきた私が送る こうしたら強くなれるかもしれない？指南書である。もしエンジニア職に興味があるのであれば、一考になるかもしれない。 最初から強いやつの特徴 平日の稼働時間以外も勉強 or 開発する 土日も勉強 or 開発する 公式ドキュメントをちゃんと読む 以上のような当たり前のことは、最初から強い人じゃなくてもやるので特徴に入れません。 1. 読解能力が異常に高い 国語の力です。 これは、ちゃんとドキュメントに書いてあることが理解できると同義です。 そしてこれが本当に大事です。 強い人に質問すると必ず「ん？ Docs 読んだ？」って聞いてきます。私は (...読んだわ！) って内心思ってますが、それは読んだだけです。内容をちゃんと

はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォントもNoto Sans JPを使われててとても読みやすい。黒も #000 でなく見やすい色になっている。 やばいですねこれ。 そしてこのレイアウトを見たとき、余白のおかげでとても見やすいなと思いました。そこでChrome Dev Toolでレイアウトを見てみ

概要 こんにちは。 KDDIアジャイル開発センターの小板橋です。 本記事は、KDDIアジャイル開発センター Engineer & Designer Advent Calendar 2022の2日目の記事です。 今回は、巷で噂の tRPC についてをまとめつつ、検証してみたというものになります。 tRPCとは？？ 例えば、3層のwebアプリケーションや、BFF(Backend For Frontend) を使用した複数のバックエンド API を吸収するようなものを配置したアプリケーションを考えた時に、フロントから REST API などでやりとりさせようとすると API における型定義がとても重要なのは想像しやすいでしょう。 そのために、例えば OpenAPI によるAPIの型定義ファイルを用いて開発を進めることで、事故をなるべく防止しようと努めると思います。 ただ、このAPIの定義ファイル

※ この記事の内容は先日のQiita Nightでお話ししたことと一部重複します。 Qiita NightではLTの制限時間(10分)に収めるため、結構端折りました。 はじめに ChatGPTが登場してから数ヶ月が経ちました。 ChatGPTをはじめとしたGenerative AIは完全に現在のIT業界のトレンドとなっています。 今や多くの企業でChatGPT APIをサービスに組み込んで顧客提供を開始したり、自社の社内システムに組み込んだりと積極的に利用するようになりました。 私もGenerative AIが無くなると業務に支障が出るレベルで利用しています。 そして、2023年5月時点ではChatGPTのAPIを利用する方法として、本家OpenAI社が提供しているAPIを利用する方法とMicrosoft社が提供しているAzure OpenAI ServiceのAPIを利用する方法の2つが

ゴールデンウィークのはじめ（4月29日）に投稿された以下のツイートですが、5月7日20時において、1,938.8万件の表示ということで、非常に注目されていることが分かります。 我が名はアシタカ！スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた。どうすればよい！ pic.twitter.com/e26L1Bj32Z — スタバでMacを開くエンジニア (@MacopeninSUTABA) April 29, 2023 これに対して、私は以下のようにツイートしましたが、 これ入社試験の問題にしようかな。『スタバのFreeWi-Fiを使いながら会社の機密情報を扱う仕事をしてたら全部抜かれた』と言う事象に至る現実的にありえる脅威を説明せよ。結構難しいと思いますよ。 https://t.co/LH21zphCTV — 徳丸 浩 (@ockeghem) April

はじめに hossie - AtCoder 2023/04/01 に AtCoder 入水しました (参加者の上位 10% ほどにあたる水色レートに到達)。参加から一年ほどでした。 本記事は色変に関する、まとまりのない長文ポエムです。 入緑の色変記事 AtCoder 緑になったのでパズル好きな人に競プロを紹介してみる - Qiita Rust 初心者の AtCoder 用開発環境設定と、解く流れの例 - Qiita Rust 初心者の AtCoder でよく使う言語機能とライブラリー覚え書き - Qiita スペック 開発環境 Microsoft Surface Laptop 2 + Windows 11 外付けディスプレイ、外付けキーボード、マウスは使っていません Visual Studio Code + Rust + cargo-compete 中の人 44歳、子育て世代 プログラミン

個人でのお勉強時のメモです。殆どコピペなので。。。 CSPとは？ CSP（Content Security Policy）は、クロスサイトスクリプティング (XSS) 、データインジェクション、クリックジャッキング、パケットキャプチャなどブラウザに表示されるコンテンツを用いた、よく知られた種類の攻撃を検出して軽減するするために追加されたセキュリティレイヤー。 サーバサイドからブラウザに対してコンテンツの使用ポリシーを伝えて各種攻撃を回避する。 仕組み CSP を記述することで、コンテンツの提供元や取得方法（HTTPS経由のみ取得可能など）を制限することができ、コンテンツ提供者が意図しないコンテンツを読み込ませることを阻止することができる。 コンテンツには実行可能なスクリプトも含まれているため、第三者による悪意のスクリプトの実行を制限することができる。 ポリシーの記述方法 デフォルトポリシー

はじめまして、sonesuke( https://twitter.com/sonesuke ) です。 LLMのニュースを追っかけ続けたので、これからキャッチアップする人用にまとめておきます。 単発のプロンプトテクニックについてはこちらご覧ください。 これだけは知っとけ用語 各手法の説明を読む前に、これらの用語を読んでおくと各手法がわかります。知っている人は飛ばしてください。 プロンプトエンジニアリング 入力(プロンプト)を工夫して性能をあげようというアプローチ。 機械学習系で精度アップといえば、追加学習させたりモデルを拡張するのですが、LLMではモデルが大き過ぎてコストが洒落になりません。 そのような事情からプロンプト側を工夫することで、回答に直接影響を与えるという手法が発達しています。 ファインチューニング モデルを新たな学習データで追加学習させ、モデルのパラメータを更新し、精度を高め

昨日様々なトランザクション分離レベルに付いて書いた。 AnomalyとはSerializableでない実行を引き起こす異常状態パターンのことを言う。 弱い分離レベルほどAnomalyが起きやすい。 これから図を交えながらAnomalyについて説明する。 図中の「W(x)」は「xに何らかの値を書き込む」、「R(x)」は「xの値を読む」をそれぞれ意味する。 分かりやすいようにReadは青、Writeは赤色で統一する。 また、Anomalyの被害に遭うのは常にT1に統一する。 Cはコミットを意味する。 Dirty Read Anomaly 未コミットな値を読んでしまうAnomalyの事。Readがロック関係なしに値を読んでしまう場合などに起きる。 T1が書き換えられる最中のxの値を読んでしまっている。もしT2が途中でアボートしたらT1はどこにも存在しない値を読んだ事になってしまう。 READ U

はじめに OpenAIによって開発されたChatGPTが話題になっています。特に、2023年3月14日に公開された最新モデルであるGPT-4は、これまで私達がAIに持っていた認識を根底から覆したのではないでしょうか？ 私は、「普通に人間とやりとりしているのと変わらんやん…」と率直に驚きました。 エンジニアの業務の中でも、自動コーディング支援、技術的課題の壁打ち相手、ドキュメント自動生成、学習支援等さまざまな用途に活用する可能性を皆さん検証している段階です。私もその波に乗っている真っ最中です。 そこで今回は、ソースコードリーディングをChatGPTをメンターにしたら爆速にできるのではないか？という仮説を検証してみました。 そしてどうせやるなら、ソースコードリーディングのハードルの高さナンバーワン（個人調べ）の「Linuxカーネル」を題材にしてみました。 なお、使用したモデルはGPT-4です。

はじめに 私は１０年以上前から個人でwebサービスを開発してきた。 20~30程度公開してきたが、ヒットしたと言えるものは１つしかない。 その収益は大きいものだったので今はそれで生活できてしまっている。 最近は読書も飽きたので、毎日のようにゲームをして遊んでいるけれど、ときどきはてブをみると個人アプリ開発ノウハウ系の記事を目にする機会がある。 その中で語られていることの半分は嘘である、という話を最初にしておきたい。 これからアプリ開発に夢をみている人のための記事であり、私の暇つぶしのための記事でもある。 また、こうやれば成功率をあげられるよという話も最後にしておきたい。 この記事は、まだヒット作がない個人アプリ開発者のための記事だ。 アプリ開発ノウハウ系記事の嘘 ノウハウ系の記事を書いているおじさん達は悪意があって記事を書いている訳ではないと思う。 おじさん達は、第一に成功体験を語って誰か

GPT-4時代のエンジニアの生存戦略 ※ この記事の内容の一部はこちらのイベントでお話したことと重複します。 はじめに 2023年3月1日にOpenAI社よりChatGPTのAPIが公開されました。 さらに14日にはGPT-4が登場し、その翌々日にはMicrosoft 365 CopilotでGPT-4をOffice製品に搭載することが発表されるなど、AI領域で大きな変化が起きています。 変化の速度の速さと変化量の大きさにより、私自身も追いつくのが精一杯な状態です。 個人的には、iPhoneの登場時以上の衝撃を受けています。 人類の歴史上、過去3回AIブームがありました。Generative AIが4回目のブームになります。 そして、特に日本においては顕著なのですが、AIへの過度な期待とそれへの失望の繰り返しがここ数十年にわたって繰り返されてきました。 直近だと数年前のDeep Learn

const obj = { hoge: [new Date(2023, 3, 12), 1], fuga: 'foo' }; const objClone = structuredClone(obj); // ディープコピー obj.hoge[1] = 10; console.log(objClone.hoge[1]); // 1 objClone.hoge[0].setFullYear(2050); console.log(obj.hoge[0].getFullYear()); // 2023

ChatGPTを使ってプレゼン資料を作る エンジニアのみなさんはコードを書くことは得意でもLTなどで発表するプレゼン資料（スライド）を作成することが苦手の方もいらっしゃいますよね。そんな人（自分含む）にChatGPTを使ってスライドを作成する方法についてまとめましたので共有します。 ちなみに、現状(2023/03/30時点)のChatGPTには直接スライドを出力できるような機能はないので、下記のような感じで工夫するとChatGPTを使って爆速でスライドが作れちゃいます。 使用するツール ChatGPT Marp for VS Code Marpって何?という方は下記の記事をご参考ください。簡単に言うとMarkdownからスライドを作成できるものです。もちろん皆さん大好きなPowerPointやPDFにも出力可能です。 作成フロー 1.ChatGPTでプレゼン資料にしたい内容をMarp形式で