Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
アマチュア驚き屋のきしだです。 ChatGPTが画像入力に対応するよという話があって、来週くらいに使えるようになるかなーと思ったら、もう使えるようになってました。 で、写真から「カレー食べてる男の人です」くらいを言えるイメージで試してたら、なんかふつうに画面設計やクラス図からコードを書いていてびっくりしてしまいました。 まあ、起きたらこういうのが来てたわけですね。 で、まあ試してみて「あぁ、いままでのマルチモーダルよりちゃんと画像認識してるなー」くらいに思ったわけです。 で、NetBeansでの画面設計を読ませてみたらこう。 こういうコードが生成されました。 import javax.swing.*; import java.awt.*; public class SimpleForm { public static void main(String[] args) { JFrame fr
以下の記事を見て、早速「Open interpreter」を試してみたので、使い方や始め方をまとめておきます Open Interpreterとは Open Interpreterは、GPT-3.5、GPT-4、Code Llamaなどの大規模言語モデル(LLMs)を活用して開発されたオープンソースのツールです。 このツールは、OpenAIが提供するChatGPTの「Advanced Data Analysis(旧Code Interpreter)」のオープンソース版とも言える存在で、Python、Javascript、Shellなどのプログラミング言語のコードを自然言語による対話を通じてローカル環境で実行することができます。 このツールの最大の特徴は、ChatGPTの「Advanced Data Analysis」と違いローカル環境で動くため、ファイル容量やネット接続への制約がなく、Ch
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場 WindowsやMacなどのデスクトップPCでVisual Studio Code(以下VSCode)を利用して開発をする場合、同じローカルマシン上でDockerコンテナのLinux環境を起動し、VSCodeのターミナルで接続して操作することは、開発環境としてよくあることだと思います。 これと同じことをWebブラウザ版のVSCodeでも実現する、すなわちWeb版VSCodeが同一Webブラウザ上にWebAssembly化したDockerコンテナを起動し、Web版VSCodeからローカルマシンとして接続し利用できる、実験的実装を実現したVSCodeの拡張機能「vscode-container-wasm」が登場しました。 V
はじめに ソースコードをLLMに読んでもらうとき、単一ファイルだと楽なのですが、GitHubのリポジトリのように複数ファイルから構成されるプロジェクトだと困ってしまいますね。 リポジトリごとLLMに読んでもらえるようにいい感じにテキスト化できると良いですね。そんなソフトがありました。しかも2つ。 両方ともほとんどコンセプトは同じです。特に後者のgenerate-project-summaryは使い方も含めて、自分のやりたいことが、すでに開発者の清水れみおさんが以下の記事にまとめていました。 なので、あんまり書く必要ないのですが、せっかくなのでgpt-repository-loaderの使い方と、出力したファイルの別の活用方法について書いてみたいと思います。 gpt-repository-loaderでリポジトリをテキストに変換 使い方はREADMEに書いてあります。シンプルなソフトなので、
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています!興味をお持ちいただける方は、こちらまで。 はじめに VSCodeは世界で多くの人が使っているコードエディタです。 開発の際に使用している人も多いのではないでしょうか。 今回はそんなVSCodeの拡張機能を一挙に紹介していきます。 拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストールのやり方を説明します。 アクティビティバーの拡張機能マークをクリックする(四角が4つあるマークです) インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをク
はじめに Gitのステージングエリアにあるファイルを対象に、レビュー結果をSlackに通知するアプリケーションを作成しました。 開発環境のターミナルで指定したコマンドを実行するだけで、Slackにレビュー結果が送信されます。 ソースコードは以下です。 こんな人におすすめ コードレビューを受ける前に自分で事前チェックをしたい方 一人でコードを書くことが多く、レビュワーがいない方 どうせなら楽しくレビューしてもらいたい、好きなキャラクターにレビューしてもらいたい方 アプリケーションの構成 レビュー依頼の手順と流れ 以下のような手順と流れでレビュー結果を得ることができます。 レビュー対象のファイルをステージングエリアに登録する(複数ファイルの登録が可能です) ローカルのターミナルでaireviewコマンドを実行 Slackに必要な情報が送信される レビュー結果を確認する スレッドにレビュー結果が
みなさんプログラムは書いていますでしょうか。この一年でChatGPTができ、CopilotにCopilot Chatなど色々なAIツールが出ていますが今回お勧めするのはPhindというAIアシスタントです。 Phindとは Phind(Phind.com)とは端的にいえばGPT-4を超えるコーディング能力に特化した言語AIです 参考リンク:大規模言語モデル「Phind」がコーディングにおいてGPT-4を上回る リンク内で言われているように、WebからChatGPTやGoogleのように簡単に使うことができますが、Phindの真髄はここでは味わえません。 Phindの真の実力 Phindの本当の実力はVScode拡張を使うことによって体感することができます。 PhindのベースモデルはPhind-CodeLlamaというものを使っています。これはMeta社が作ったCodellamaというプロ
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています!興味をお持ちいただける方は、こちらまで。 シェルスクリプトの世界へようこそ! シェルスクリプトって何? シェルスクリプトは普段 Bash などのシェルで実行しているコマンドを並べて、まとめて実行できるようにしたものです。ファイルのバックアップ、ログファイルの解析、システムのセットアップなど、ターミナルで行っていた一連の作業をまとめてシェルスクリプトに記述することで、シェルスクリプトを実行するだけで自動的に一連の作業を終わらせることができるようになります。また、シェルスクリプトはファイルに保存することになるため、再利用するのも簡単になります。 シェルスクリプトで使うコマンドの多くは UNIX コマンドになると思います
jp-postal-code-api https://github.com/ttskch/jp-postal-code-api 日本の郵便番号から住所のデータを取得できるWeb APIです。 GitHub Pagesを使用して静的なJSONファイルとして配信している ため、可用性が高いのが特徴です。また、オープンソースなのでクライアントワークでも安心してご使用いただけます。もしリポジトリの永続性や GitHub Pagesの利用制限 が心配な場合は、ご自由にフォークしてご利用ください。 日本郵便によって公開されているデータ を元に住所データのJSONファイルを生成して配信しています。JSONファイルには日本語表記・カナ表記・英語表記の住所データが含まれています。ただし、以下の注意事項があります。 大口事業所個別番号の住所データは以下のように出力されます(元データ の内容がそうであるため)
どんな人向けの記事? これからRAGを作ってみたい DifyやLangChainにこだわらず、自分で開発をハンドリングしたい ベクトルDBや埋め込みモデルの選定の勘所をサッと知りたい ここではRAGとは何かのような話題は扱いません。 RAGが、ほぼAI活用の現実的な最適解になりつつある LLMは高度な知的タスクを実行可能である。 そんな理解が世界に広まっていく中で、企業は自らが蓄えたデータをLLMに組み合わせてどう活用するか躍起になっています。これからはビッグデータだ!という時代を経ているため、情報インフラに投資した企業も多く、AIでデータを活用する流れはもはや確定路線と言えます。 この問題を解決する手法として一番最初に思いつくのは、モデル自体を改変するファインチューニングです。しかし、ファインチューニングにはいくつかの実用上の問題があります。ファインチューニング自体に専門知識が必要である
これは、多数派が支配すべきだという意味ではない。委員会によって設計されたアーキテクチャは、肥大化し、焦点が定まらない傾向がある。私たちの経験では、理想的なバランスとは、多様な経験と視点を持つ数人の仲間が、より良い情報に基づいた決定を下すために、主張に異議を唱えることである。 再利用の目標が誤った決定を左右するようなことがあってはならない。その代わり、再利用は理にかなった場合のみ行うこと。 コード、コンポーネント、設計、あるいはコンフィギュレーションの再利用は、最初は良いアイディアのように聞こえる。経営陣は、再利用によってコストが削減され、納期が短縮され、品質が向上すると信じて、このコンセプトを推進したがる。チームは、MVPをより早く提供するために既存のアプリケーションの大部分を再利用することを決定するかもしれないし、かなり成功した製品を提供するために作成された既存のアーキテクチャを再利用す
Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio
日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。 一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を使うと、コード上にメモを残しながら読み進めることができるので、既存のコードを読む際に便利です。 Code Tour とは VSCode の拡張機能で、コード上にメモを残しつつ、そのメモをたどることができるツールです。 使い方 ツアーを始める コマンドパレットから「Code Tour: Record Tour」を選択すると、ツアーの記録モードになります。 ツアーの名前 どのソースに紐づけるか(紐付けなし、ブランチ、タグ) を選択すると、リポジトリ直下に .tours/${指定したツ
1. インストール 1pip install open-interpreter ターミナルで次のコマンドを実行して、Open Interpreter をインストールします。 2. 対話型チャットの開始 インストール後、次のコマンドを実行して、ターミナルで対話型チャットを開始できます。 1interpreter Python で対話型チャットを開始するには、次のコマンドを実行します。 1import interpreter 2interpreter.chat() 2. OpenAI APIキーの設定 OpenAIのAPIキーを利用する場合は設定が必要ですが、OpenAIのキーを使用しない場合は、Code-Llamaを利用することができます。 これで、Open Interpreterを利用する準備が整いました。 Open Interpreterの使い方 タスクの依頼・実行 Open Inter
OpenAIからChatGPT-4oが発表されましたが、皆さんガンガンつかっていますでしょうか? さて、このChatGPT-4oですが、テキスト以外のデータも使用できるようになっているという特徴があります。 普通にテキストでのやり取りをしつつも画像データを扱えるということで、「実はこれいい感じのOCRとして使えるんじゃね?」って思っちゃったわけです。 ということで、今回はChatGPT-4oを使ってOCRを使うとどんなもんなのかやってみたいと思います。 やりたいこと やってみる とりあえずやってみる 請求書 名刺 参考文献 感想 やりたいこと 今回やりたいことはOCRです。早い話が画像ファイルを突っ込んでテキストを読み取りたいって感じです。 ただ、当たり前のようにOCRって言葉を使用していますがOCRって結構奥が深いです。 mediadrive.jp 単純に画像から文字を見つけて対応するテ
ここでいくつかのルールとして motion-count-multiplied 例えば10jで十行下へ移動、d2kで上2行を削除など operator-doubled 例えばyy, dd, cc, >>とか、2回繰り返すとカーサーのある行に動作する upper case operator 例えばc->C、d->D, y->Yのように、現在のカーサーから行の最後まで動作するケースと、対になっている(逆の機能を持つ)ケース、例えばp->P, o->O, n->N, a->A, i->I, f->Fなど)に大まかに分けられる exclusive inclusive 例えば、yiw vs yaw, cib vs cabの違いで、テキストオブジェクトの内部(inner)だけか、境界線も含めるか(around) があります。これらのルールは他のプラグインにもよくみられるので、Vim wayに慣れればプラ
プログラミング支援AIサービスが主要各社から出揃う、各サービスのまとめ。GitHub/AWS/Google/GitLab/JetBrains AIがプログラミングを支援してくれるサービスが主要各社から出揃いました。 Publickeyではこれまで各社の発表時点でそれぞれのサービスを紹介してきましたが、ここであらためて主要各社のプログラミング支援AIサービスをまとめます。 本記事では、各AIサービスごとの主な機能などをリストアップしています。ただし、実際にはAIに指示などをすれば品質の差異はあれどおそらく何らかの結果は返ってくるであろうこと、この分野は急速に進化していて各社とも積極的な能力向上と機能追加を行っていくであろうことから、現時点で機能差はあったとしてもそれほど顕著な違いとは言えないでしょう。 そして、おそらくは今後各社のコード生成関連のAIの能力はある程度十分な高さまで急速に到達し
AndroidのためのJava/Kotlinはスコープ外とします まず断っておくと、俺はScalaが好きだ。 自分が作ったScalaプロダクトは二個現存している。うち一つはまだまだ自分が開発している。というか今は会社を作って1人でプロダクトを作っている身なのだが、それもScala3+ZIO2でゴリゴリ書いている。 でも残念、もうScalaというかJVM言語がオススメできません。TypeScriptかGoかRustをオススメします。 どういうこと?まずこの記事を見ていただくのが一番分かりやすい。 https://aws.amazon.com/jp/builders-flash/202310/java-serverless-saas-backend/?awsf.filter-name=*all 素晴らしいエントリーだ。読みに行かないせっかちな方のために概要を紹介する JavaプロダクトをAWS
Language Server Protocol通称LSPの仕様と、各機能をどうやって実装したら良いかの指針を示します。 対象読者 * 言語処理系を実装する人/したい人 * Language Serverを実装する/したい人 * LSPに興味がある人、日本語のまとまった情報源を探している人 * Language Serverがエディタの裏でどのようなことをしているのか気になる人 本書で解説される機能は以下の通りです。 * Diagnostics (検査) * Completion (補完) * Inlay hint * Hover * Goto definition (定義へ移動) * Find references (参照を表示/移動) * Rename (名前変更) * Code actions * Code lens * Signature help * Command * Docu
const colors = ["赤","青"] as const; type Colors = typeof colors[number]; //"赤" | "青" typeof colors[number]・・・ってよォ~~~~~ typeofはわかる。スゲーよくわかる TypeScritの世界では、typeofで変数から型を作れるんだよなァ だがnumberってのはどういう事だああ~~~~っ!? 配列にnumberを渡せるかっつーのよ───────ッ!! ナメやがってこの型ァ!! 超イラつくぜぇ~~~~ッ!! 解説 これはよォ 「Lookup Type」ってやつらしいぜぇ たとえばよォ 👇みたいに書くとPerson型からプロパティの型を取り出せるよなァ~?? type Person = { name: string, age: number } type name = Person
概要 4年ほどProductionで使っていたリッチテキストエディタ(Quill on Nuxt.js v2)をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
DDD を理解したいあなたのための DDD 入門以前 Rubyist Magazine 63 号をお届けする。 突然のお知らせで恐縮だが、日本 Ruby の会の主たる事務所が東京から北海道に移転した。それもあってあまりまとまった時間がとれず、11 月のうちに書くはずだったのが気がつくと 12 月も半ばを過ぎていたので、今回は以前書きかけていた文章を発掘してお茶を濁したい。 Ruby とは直接関係がなくて恐縮だが、Ruby に限らずソフトウェア開発では現在でもちょくちょく話題になることがある、DDD についての話である。 ドメイン駆動設計こと DDD は 2020 年代のソフトウェア開発でもよく話題にされるが、率直に言うとストレートにポジティブな評価が行われているとは言い難い。 どちらかというと、ある種マニアックで、対象分野が制限されており、また初心者にはとっつきにくいところがある手法と思わ
プログラミング言語AWKが好きなので、この言語のどこが好きかを語ります。主にAWKを知らない、知ってるけど使ったことが無いかた向けの記事ですが、使ったことがあるかたも「こういう思いで使ってる人がいるのか」と遠巻きに眺めてもらえればと考えます。また、後半で最近出たAWKの書籍についても紹介しているので、そちらも役立つかもしれません。 AWKとは AWKは1977年にAT&Tベル研究所で生まれたプログラミング言語です。AT&Tベル研究所といえばUNIXが生まれたところです。著者もUNIXに縁が深い、この世界のレジェンドばかりです。たとえばKernighan先生はプログラミング言語Cをはじめ、たくさんの書籍の著者として有名です。なんだか強そうな言語ではないかという気がしてきました。 AWKは汎用プログラミング言語ですが、「1行1レコードになっているテキストファイルを最小の手間で処理するワンライナ
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか? 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください! ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種類のロジックについて整理する。 レンダリング レンダリングをする際、コードはpropsとstateを受け取り、変換し、画面で表示したいJSXを返す。コードのレンダリングは結果のみを計算するべきでそれ以上のことをするべきではない。 イベントハンドラ イベントハンドラはコンポーネントの中にある関数で、Input Field の更新やユーザを他の画面へ誘導したり等、単純な計算以上の役割を担う。イベントハンドラはユーザの行動(ボタンクリック等)による、
この記事はTLS/SSLを実装してみたいという人が増えるといいな!という気持ちで書いています。実装の詳細は別記事で書こうかと思います。 数年前からいつかTLS/SSLのプロトコルをPHPで実装したいと思い、まずは本で知識を得ようかとラムダノートの「プロフェッショナルSSL/TLS」や 「徹底解剖TLS1.3」を買って読んでみましたが、なかなか頭に入らずに読んでは寝てしまうというパターンに。 やはり自分でTLSを実装してみないとなと思ってたところに、PHPカンファレンス福岡2024で hanhan1978 さんの「PHPでデータベースを作ってみた」を見て大いに刺激をもらい、ついにTLS実装に着手できました。 speakerdeck.com この資料は本当によくて名言の宝庫です。たとえば、 「まじめに作ろうとすると大変な努力が必要になる。もっと迂闊につくりたい」 「不格好でもいいので、動く完成
CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.connpass.com にもご参加いただけると嬉しいです。 この記事でご紹介している疎結合なフロントエンドアーキテクチャを実現する Remix の魅力についてお話します。 なぜ依存を最小にするのか? R
Difyって何? 少し前から話題の、プログラミングなしで生成AIアプリケーションを開発できるOSSです。 「Dify すごい」 でSNSを検索すると、驚き屋さんがみんな驚いています。このゴールデンウィークはAmazon BedrockとDifyの話題でもちきりでしたね。 元々は「GPTビルダーのOSS版ね。はい解散」という感じだったのですが、最近追加された「ワークフロー」機能がすごく便利のようです。 ちょっとしたアプリなら、ローコードで簡単に作れてしまうとのこと。 最近は自分でPCやサーバー準備して動かさなくても、SaaS版が公式から準備されたようです。無料プランもあります。 やってみた サインアップ 公式サイト右上の「Get Started」からサインアップします。 GitHub連携すると、いきなり開発画面に辿り着きました!いいUX。 「(いち?)から作成」よりワークフローを作ってみまし
Dockerを使った機械学習環境の構築方法 株式会社松尾研究所で働いているからあげ(@karaage0703)です。松尾研究所では、機械学習(ここでは、予測モデル、画像認識からLLMまで幅広く扱います)を使う多数のプロジェクトが走っています。プロジェクトの特性は多種多様なので、環境構築方法は様々なのですが、松尾研究所では、環境構築方法の1つとしてDockerを推奨していています。今回はDockerを使った機械学習環境の構築方法を紹介します。 松尾研究所の特にインターン生を想定した記事にはなりますが、他の組織、個人の方にも参考になる部分があるかと思いWebに広く公開させていただきます。 なぜDockerで機械学習環境を構築するのか? 具体的な手法に入る前に、まずはDockerで機械学習環境を構築する理由から説明したいと思います。説明が不要な方はここはスキップしてもOKです。 そのために、Do
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く