はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ついにChatGPTのプラグイン(Beta)が開放され、waitlistを待たずとも使えるようになりました。 ChatGPT plugins とは ChatGPTのユーザーインターフェース上で第三者のアプリケーションを使用可能にする機能です。 ChatGPTにプラグインを追加することで、以下のような機能を拡張することが可能です。 リアルタイム情報の取得（スポーツスコア、株価、最新のニュースなど） プライベートな知識ベースからの情報の抽出（社内文書や個人的なメモなど） チャットを通じたアクションの代行（航空券の予約や食品の注文など） 今ま

※この記事は個人的な実験の記事です※ ※実験内容は随時記事を更新していきます※ 24時間いつでも手助けをしてくれるGitHub Copilotさん。 24時間文句も言わずにいつでも親切に回答してくれるChatGPTさん。 そんな両者に要件だけ伝えて自動コーディングしてもらおう(AIペアプロ)、という実験記事です。 Copilot自動コーディング動画 以下の動画は、最初に要件だけをコメント入力して、それ以降はCopilotの提案を受け入れているだけになります。 コメントの入力と提案の受け入れ以外は、全くタイピングをしていません。 コメントの内容は Next.jsでボタンをクリックしたら画像を選択してブラウザに表示する です。 完成品 要件のコメントと受け入れだけをしたコードを実際に動かしてみました。 自動コーディングしてもらったコードは以下の通りです。 // Next.jsでボタンをクリック

日々便利なプロンプトが生み出されたり、 ChatGPT pluginsの発表など話題が絶えないChatGPTですが、 今回はインストールだけでChatGPTがインターネットから得た最新の情報をもとに回答してくれたり、自分の質問履歴を検索できたり、世界中の人が作ったプロンプトを検索したり、自動同期をしてくれたりと、とても便利なChrome拡張機能をいくつかご紹介いたします。 拡張機能をインストールするだけなので、手間が全くかからずにすぐに使うことができます。 こちらの記事は随時更新追加していきます 機能 インターネットから適切な情報を検索し、ChatGPTの回答能力を向上させることができます。この無料のアドオンを利用することにより、関連性のあるオンライン情報をChatGPTに与える質問に組み込むことができます。その結果、ユーザーはより正確で最新の情報に基づく会話を楽しむことができるようになり

GitHubが2023年3月22日に「GitHub Copilot X」の発表をしました。 ChatGTP-4をベースに、機能を大幅に強化して新機能も沢山あります。 今までのGitHub Copilotとの違い GPT-4がベース コードエディタ内でAIとテキストチャットもしくは音声で対話をしながらコーディングが可能になる「Copilot Chat」「Copilot Voice」が追加 プルリクエストの説明文を自動生成してくれる「Copilot for pull requests」が追加 ドキュメントを学ばせたAIにチャットで質問できる「Copilot for docs」 コマンドラインインターフェイスをAIで補完してくれる「Copilot for CLI」 「Copilot Chat」および「Copilot Voice」でコードの説明やバグを修正してくれる GitHub Copilotと

GitHub Copilot Labsとは？ VSCodeの拡張機能として、GitHub Copilot Labs をインストールすれば、コードの解説をしてくれたり、リファクタリングしてくれたり、バグを修正してくれたりと便利な機能がたくさんあります。 以前に筆者が書いた以下のようなChatGTPの拡張機能のようなものです。 公式ページより抜粋 GitHub Copilotの実験的なアプリケーションのためのVS Code拡張機能。 GitHub Copilotは、開発者向けの画期的なAIペアプログラマですが、私たちはコーディングの未来を探求し始めたばかりです。テクニカルプレビューの期間中、Copilotチームは提案の質を向上させ、安全機能を追加しました。しかし、Copilotがコード提案以外にも提供できる潜在的な助けを見るのは難しいことではありません。 本日、GitHub Copilot L

質問のコツ 質問内容は抽象的な言葉よりも具体的な言葉を選ぶようにすると、回答の精度がより上がります。 回答内容に対して、更に質問を繰り返して深掘りしていくと理解度が高まり効果的です。 「あなたはプロのエンジニアとして振る舞って下さい」などと最初につけるとよりそれっぽくなります。 文章が長くて途中で終わってしまう場合は、「続き」と入力すると続きからの回答をしてくれます。 わかりやすく解説してもらいたい時は「小学生でもわかるように解説して下さい」などとつけるとわかりやすい回答が返ってきます。 「私はプログラミング初心者です」など自分のレベル感を付けると、レベルに応じた回答になります。 「コードブロックだけで返事をしてください」とつけるとコードだけで回答してくれます。 ロードマップ(カリキュラム)編 まずは、目標に向けてどういった勉強をすべきかというロードマップ(カリキュラム)を提案してもらいま

ChatGPTとは？ OpenAIが開発するGPT-3という言語モデルをベースとした(執筆当時)チャットアプリです。 こちらの質問に対して、AIが色々な質問に答えてくれて、一般的な内容だけではなく、コードレビューやバグなども発見してくれるめっちゃ凄いやつです。 細かい内容は以下の記事がとても参考となります。 筆者の関連記事 VSCodeと連携して、ブラウザを開かなくてもChatGPTを使用できるようにする 通常はブラウザを開いて使用するのですが、コーディング中にサクッとレビューしてもらったり、バグを見つけてもらえるような拡張機能があったので、そちらの設定方法について記述してみます。 今回インストールする拡張機能 使用までの手順 環境 PC: MacBook Pro (Apple M2) OS: macOS Ventura 13.1 VSCode: v1.74.3 OpenAIの価格について

個人の備忘録です。 環境 react: 18.2.0 next: 12.2.3 react-dropzone: 14.2.2 @chakra-ui/react: 2.2.4 やりたいこと 複数の画像ファイルをページにドラッグ&ドロップする 選択された画像をプレビュー表示する プレビュー画像は削除可能 選択された画像を DB へアップロードする ライブラリは react-dropzone を使用 完成イメージ install まずは、react-dropzone を install import { Img } from '@chakra-ui/react'; import { useState } from 'react'; import { useDropzone } from 'react-dropzone'; import { useImageNew } from 'usecase/

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? どんな記事か？ こちらのイベント参加の記事になります。 筆者自身がもっと早く身につけておけば、コーディングが楽だったなと思うことを記事にいたします。 環境 PC: MacBook Pro (Intel Core 2016) OS: macOS Montery12.3.1 Chrome: Version 100.0.4896.127 最初の頃は恐いエラーだが、仲良くなるとこれ以上の情報はない プログラミングを始めた当初は、「うぁ、またエラーか。英語でよくわからないからそっ閉じ。。」といった反応をしていましたが、 エラーほど重要な情報はあり

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ゲームでAWSが学べるらしいのでやってみます。 サービス概要 AWS公式が提供(2022/03/15サービス開始？) AWS Cloud Quest: Cloud Practitioner プレイヤーはクラウド技術者となり、オープンワールドの街の中を歩き回って問題を抱えている人と出会い、その問題をAWSのソリューションで解決していく Webブラウザで楽しめる無料オンラインゲーム ゲーム内では本物のAWSのシステムコンソールを用いてソリューションを構築する体験ができるようになっている ゲーム内は全て英語 やってみる 実際にやってみます。

PlanetScaleというサーバレスDBが凄く勢いのあるサービスと聞いて、公式にクイックスタートがあったのでやってみました。 環境 PC: MacBook Pro (Intel Core 2016) OS: macOS Montery12.2.1 では概要から確認していきます。 サーバーレスDBとは サーバがない、のではなく、サーバ管理や検討が不要 AWS Lambda(NoSQL)など PlanetScaleとは PlanetScale年表 2010年頃 YouTubeが急激に成長し、データベースが爆発しそうになっていたので、Sugu氏ともう一人のYouTubeのエンジニアがオープンソースプロジェクト「Vitess.io」（ヴィテス）を立ち上げる 2016年頃 MySQLでバイナリプロトコルを扱えるようにしたことで、VitessはYouTube以外の企業にとっても魅力的なシステムになり

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Jest + TypeScript でテストコードを書く際に、覚えておくととても便利だと感じたものを備忘録的に記事にいたします。 1. Parameters まず、TypeScriptの Utility Types である Parameters<Type> です。 (Utility Typesとは、TypeScriptが標準で提供している便利な関数のような機能です) 特徴 関数に対して使用する Parameters<関数型> とすることで、関数の引数をタプル型 にしてくれる Parameters<typeof someFun> でもOK コード例 では、例を見てみましょう。 // 例：1 type T0 = Parameters<() => string>; // type T0 = [] || 引数がないので空タプル // 例：2 type T1 = Parameters<(s: str

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

今回はUnityでAR開発を手軽に体験してみる方法を記事にいたします。 AR Foundationが公式でGitHubにあげているsampleを動かします。 AR Foundation とは ARFoundation とは、Unity が開発している、AR 開発用のフレームワークです。ARFoundationを使えば、ARCore(Android向け)、ARKit(iOS向け)など、様々なプラットフォーム上で動くARアプリを簡単に開発することができます。 動作イメージ pic.twitter.com/vUJna3xpGr — たく (@5HdM6WlLVaazBV7) January 15, 2022 環境 Windows10 Unity Hub 2.4.5 Unity 2020.3.25f1 Android Studio 2020.3.1 ARFoundation 4.2.0 Andro

Railsを使って開発しているときに、Sass内の background-image などで画像を参照している場合、 rake assets:precompile時にその画像がpublic/以下に生成されず、production環境で画像がなくなる、ということがあって困っていました。 そんなときに、sass-railsがimage-urlというhelperを提供していることを知りました。 // これを background-image: url('/assets/logo.png') // こうする background-image: image-url('logo.png') // data-urlとして埋め込みたい場合は // こうする background-image: asset-data-url("logo.png")

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

メモ代わり GoF曰く→既存のオブジェクトのコピーであるテンプレートを元にオブジェクト生成を行うこと jsで実装が簡単(もともとprototypeベースだし) jsで継承を簡単に実装出来る。 継承の実行時には関数のコピーを生成するのではなく、参照が作成される わかりやすい(個人的に) 以下が例 var myCar = { name: "Ford Escort", drive: function(){ console.log("I'm driving!"); }, panic: function(){ console.log("Wait, How do you stop this thing?"); } }; // 車のインスタンスを作成するためにObject.createを利用 var yourCar = Object.create(myCar); console.log(yourCar.