【徹底解説】これからのエンジニアの必携スキル、プロンプトエンジニアリングの手引「Prompt Engineering Guide」を読んでまとめてみた | DevelopersIO
【徹底解説】これからのエンジニアの必携スキル、プロンプトエンジニアリングの手引「Prompt Engineering Guide」を読んでまとめてみた こんにちは。CX 事業本部 Delivery 部のきんじょーです。 ここのところChatGPT と戯れてアプリを作ったり、様々なプロンプトの検証をしていましたが、言語モデルの性能を最大限に引き出すために、体系的にプロンプトエンジニアリングを学びたいと考えていました。 GitHub に「Prompt Engineering Guide」という素晴らしいリポジトリがあったので、読んで検証した内容をブログにまとめていきます。 本記事は、執筆時点の上記リポジトリの内容を元にしていますが、意訳や独自に検証した日本語のプロンプトを含みます。 上記リポジトリも絶賛開発中の段階のため、最新情報や原文が気になる方はリポジトリを直接参照してください。 目次 プ
セブに移住しようとしたが、色々あって長野にログハウス借りて住んでる人の話 | DevelopersIO
2020年8月に住み慣れた東京を離れ、八ヶ岳の麓にある長野県富士見町へ移住しました。そこに至るまでの経緯や実際にやってみて感じたことなどを書きたいと思います。 この記事は「いつかどこかへ移り住んでみたい」と考えはじめている人向けの内容です。技術的な話は全く出てきませんがご容赦ください。 やらずして後悔するよりやってみるべし 私は東京生まれビーバッブ育ちの40代、生まれてこの方ずっと東京都民として暮らしてきました。30代後半に差し掛かったあたりで「もう東京でやりたいことないな」と思いはじめ、漠然と別の土地で暮らしてみたいと考えるようになりました。 ですがプロマネという職種の性質上、お客様と対話してナンボの世界で、多くのクライアントがある東京を離れる＝ジョブ的な死を意味する、というのは少し言い過ぎにしても、仕事で価値を出せなくなってしまっては本末転倒、なかなか踏み込めずにいました。いや今思えば
[React] カスタムフックを作るときにこころがけていること | DevelopersIO
私がカスタムフックを作るときにこころがけていることがいくつかあります（こうするべきだ、と主張するものではありません）。 React の Hooks にスタイルを合わせる - https://sbfl.net/blog/2020/08/21/use-react-hooks-easy/ 関数は useCallback で包む - https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/ テストをできるだけ書く React の Hooks にスタイルを合わせる React のカスタム Hooks をカジュアルに使ってコードの見通しを良くしよう 上記の記事に非常に影響を受けました。とてもすばらしい記事なので先に読んでおくことを強くおすすめします。 ここでは実際にカウントアップするカウンターを作ってみます。 export cons
![[React] カスタムフックを作るときにこころがけていること | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
クラスメソッドが抱えていた組織の悩みを解決したProflly | DevelopersIO
2014年から10倍に拡大したクラスメソッド。私達は急成長する中でいくつもの悩みや課題を抱えてきました。本記事では私達が抱えていた組織の悩みをお伝えし、またその解決策として私達が開発しているProfllyというサービスをご紹介します。 はじめに 私がクラスメソッドに入社したのは2014年1月。当時は社員数も50人程度で、オフィスは東京にしか無く、和気あいあいと仕事していました。しかしその後組織は急成長。2017年末には100人、2019年頭には200人と急増しました。現在では日本本社だけで350人、グループ全体で500人弱と、2014年から比べて10倍に成長しています。 多くの企業が経験することだと思いますが、クラスメソッドも急成長する中でいくつもの悩みや課題を抱えてきました。本記事では私達が抱えていた組織の悩みをお伝えし、またその解決策として私達が開発しているProfllyというサービス
React界隈で話題になっている「React Server Components」についてまとめました！ | DevelopersIO
どうもReact大好きCX事業部の片岡です！ 今回はReact界隈で話題になっている「React Server Components」についての内容を意訳してみました。 元ネタ 話題になっているこちらの記事が元ネタです。 https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html 概要 Fetch APIでデータをやり取りすると、バケツリレーが発生します。例えば、Spotifyのアーティストページにはアーティストの情報と人気の曲とアルバム一覧が並びます。この時、人気の曲とアルバム一覧を取得するには、アーティスト情報を取ってこないといけません。そうすると、アーティスト情報を取得している間と人気の曲・アルバム一覧を取得するまでにクライアントサイドとサーバーサイドで無駄な待機時間が出来てし
レビューしやすいプルリクエスト | DevelopersIO
普段レビューをしていて、レビューしやすいプルリクエストに対して個人的に感じている特徴をまとめてみました。 普段レビューをしていて、レビューしやすいプルリクエストに対して個人的に感じている特徴をまとめてみました。 割と大きめなソースコードに対するレビューの話が主となります。 ざっくりまとめ 本記事では以下のようなトピックについて記載しています。 差分の目的が1つ レビューをしながら「私はいま何のレビューをしているのか」のコンテキストスイッチが発生しないので嬉しい 何を達成したいのかがわかる レビューの多くは「やりたいこと」と「実現方法」のすり合わせなので、前者の精度を上げたい 分割されすぎていない 他のコードとの関連性や構造についてのレビューがしやすい レビューの強弱をつけるための情報がついている 機械的な変換の差分だったりした場合、それが事前にわかると嬉しい 検証結果が書いてある コードだ
VSCodeの秘伝のワザを大公開！ | DevelopersIO
こんにちは！CX事業本部の片岡です。 エディタ戦争が終息して5年たった今、無血革命と呼ばれたVisual Studio Codeをご存知でしょうか？皆様ご愛用のことと存じます。 そんなVisual Studio Codeの便利なショートカットと拡張機能を紹介します！ よく使うショートカットの紹介 拡張機能「Sublime Text Keymap and Settings Importer」をインストール前提の話です。 https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings 編集時によく使うショートカット 文字選択 Command + D ：文字を選択（入力するたび選択中の文字を複数選択できます） Command + U ：文字選択のUndo（選択前に一つ戻ります） Command +
複数条件の組み合わせによるテストケース数爆発と戦うPairwise(ペアワイズ)法とそれを支えるツール「PICT」 | DevelopersIO
ペアワイズ法を使うことで、効率的にテストケースを絞り込めることがわかったかと思います。 --- 2019/10/31 追記 --- どうしてテストケースを絞り込んでも大丈夫なのか？という意見がSNSやはてブのコメントで見受けられたので、フォローアップエントリを書きました。こちらも合わせてご覧ください。 ペアワイズ法は本当に有効なのか？組み合わせテスト技法と上手に付き合う方法 ｜ DevelopersIO ペアワイズ法を支えるツール「PICT」 ペアワイズ法が有効なことはわかりましたが、この組み合わせをどうやって作れば良いでしょうか？条件の数が少なければ前述のように手作業でもやれないことはありませんが、現実の問題はもっと複雑ですので、到底無理でしょう。 そこで役に立つのが、ペアワイズ法のテストケースを生成してくれるツール「PICT」です。 microsoft/pict: Pairwise I
Appleの新しいUI構築フレームワーク「SwiftUI」を学ぶための教材まとめ #WWDC19 | DevelopersIO
SwiftUI はWWDC 2019のキーノートで発表された iOS/MacアプリなどのUIを構築するためのフレームワーク です。デベロッパーフレンドリーなコーディング＆直感的なデザインツールの組み合わせで、超簡単にUIを構築できる特長があります。例えばこんな感じです。 import SwiftUI struct ContentView: View { var body: some View { Text("Turtle Rock") .font(.title) .color(.green) } } struct ContentView_Preview: PreviewProvider { static var previews: some View { ContentView() } } これまで以上に簡単にUIが構築できることから、発表後iOSエンジニア界隈ではバズワードになっています
コントラスト比が低いUIは20人に1人以上に影響! 対策をまとめてみた | DevelopersIO
はじめに スマホアプリやWebアプリで、ボタンなどのUIを作る場合を考えます。例えばボタンの色と、その上の"OK"などのテキストの色を決める際に注意すべき点を紹介します。UIだけでなく、ドキュメントの図やプレゼン資料など、色を使う全ての場面に使えます。 例えば、スマホアプリに次のようなボタンがあるとします。 こういう配色のボタン、よく見ますよね。ところが、このボタンは背景の黄緑色と「今すぐ購入」のフォントの白の「コントラスト比」が低い、つまり「色の明るさの差」が少ないので、「文字が薄くて読めない」と感じるユーザーが存在します。 人間の色の感じ方はみな同じではなく、遺伝子の状況や疾患などによって異なります。例えば、正常とされる人とは異なった色に見えたり感じたりする「先天性色覚異常」は、日本人男性の20人に１人(5%)、日本人女性の500人に1人(0.2%)といわれており、男性ではAB型の血液
Developers.IO 2018 で「API 設計」の話をしてきた #cmdevio2018 | DevelopersIO
緊張すると声がアムロ・レイになる都元です。 ここからしばらく、キャッチコピーの迷走期が始まりますのでよろしくお付き合いください。 さて、去る 10/5 (金) 秋葉原 UDX にて開催された Developers.IO 2018、その中で 「クラスメソッドにおける Web API エンジニアリリングの基本的な考え方と標準定義」 という仰々しいタイトルで1講座持たせていただきました。 スライド 話したかったことと、話したこと 本セッションで話したかったことはだいぶ多岐にわたり、当然 40 分では話しきれないので、当初は次の 2 テーマに絞ってお話しようと考えてスライドを作っていました。 アプリケーション動作ログガイドライン RESTful / リソース指向 API 設計 しかし実際にスライドを作ってみると、それぞれで 40 分の規模となってしまい…。 ログの話は断腸の思いで見送りとさせていた
IAMによるAWS権限管理運用ベストプラクティス (1) | DevelopersIO
よく訓練されたアップル信者、都元です。AWSにはIAMという権限管理のサービスがあります。AWSを専門としている我々にとっては当たり前の知識なのですが、皆さんはこの機能を上手く使えているでしょうか。 AWSにおけるクレデンシャルとプリンシパル まず、AWSにおけるクレデンシャルは大きく2種類 *1に分かれます。 Sign-In Credential：Management Consoleログインのためのクレデンシャル（要するにパスワード） Access Credentials：APIアクセスのためのクレデンシャル（要するにAPIキー） また、プリンシパル（ログインする主体、ユーザ名等）にも大きく2種類 *2があります。 AWSアカウント IAMユーザ これらの組み合わせとして「AWSアカウントのパスワード」「AWSアカウントのAPIキー」「IAMユーザのパスワード」「IAMユーザのAPIキー
スクラムにおけるGitHub/ZenHubの使い方の例(discussion-sidebar編) | DevelopersIO
丹内です。 前回、GitHubの使い方についてブログを書いたのですが、その段階ではZenHubに関する機能や、一部のGitHubの機能(Labelsなど)をうまく使えていないというのが課題になっていました。 最近になってやっと使い方が落ち着いてきたので、まとめます。 Discussion Sidebar 前提として、ZenHubを導入済みだとします。 ZenHubを導入すると、GitHubのサイドバーが以下のようになります。 以下、項目ごとに解説していきます。 Pipeline ZenHubによって追加される項目です。 Trelloのように、IssueやPull Requestの進行状況を設定できます。 Issue/PR横のサイドバーにある歯車マークをクリックすると、設定できる小窓が出てきます。 さらに、Boards画面に行くと、これまたTrelloのように全タスクの進行状況を一覧できます
突撃！隣の開発環境 パート1 【Wantedly編】 | DevelopersIO
こんにちは！おおはしりきたけです。今回は突撃！隣の開発環境というタイトルでイケてる開発会社さんの開発環境についてインタビューさせてもらいました。第1弾として、iOS オールスター勉強会でベストプレゼンターに輝いたWantedlyの杉上さんとRubyエンジニアの森脇さんにお願いしました。Wantedlyさんは既に@yimajoさんがQiitaで連載しているiOSアプリ開発の現場で訊いてみた！シリーズでiOSの開発現場についてのインタビューはされており一部重複してしまっている部分もありますが、ご了承下さい。 突撃！隣の開発環境とは 技術事例やノウハウなどは、ブログや勉強会などで共有されることが多いと思います。しかし、各社の開発環境や開発体制などは意外と共有されていないこと多いと思います。ノウハウの流出になるかもしれませんが、それ以上に、より良い開発を目指している会社さん同士で情報交換を行い、良
Google Chrome Extensionを作ってみた | DevelopersIO
はじめに Chromeのエクステンションの作り方自体はそれほど難しくありません。簡単なエクステンションを作ってみましょう。 まずエクステンションの説明です。Chromeのエクステンションには3つのタイプがあります。 browser action page action popup[browser action] 自分が作りたいエクステンションによって使い分ける事になります。browser actionとpopupは同様にアドレスバーの隣にアイコンが出てくるのですが、前者はアイコン押下で何か処理が走る、後者は何等かの画面をpupupさせるという違いの様です。 作ります 必要なファイルは次の4つです。 manifest file html file(s) JavaScript file(s) Asset file(s) 最低限というなら、manifest fileとhtmlがあれば良いみたいで
AWSチーム社内勉強会「git-flow」レポート | DevelopersIO
こんにちは、虎塚です。 先日、git-flowをテーマに社内勉強会を行いました。講師役は、AWSチームの都元さんにお願いしました。 クラスメソッドではお客様向けにクラスメソッド・メンバーズというサービスを運営しています。このサービスの会員向けポータルサイトの開発で、Gitとgit-flowを採用しています。そこで、メイン開発者である都元さんにgit-flowの概要を話してもらって、皆で聞こうということになりました。 いつもはAWSコンサルティング部のメンバーで実施している勉強会ですが、今回はテーマが開発寄りなので、AWSソリューション部の人たちにも参加してもらいました。AWSソリューション部は、システム開発を中心に行っている部署です。 上は秋葉原オフィスの会場です。札幌オフィス、上越オフィス、リモートワークのメンバーも、Googleハングアウトで接続して開催しました。 それでは、勉強会の内
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
Sublime Text 2でコンパイル編 ｜ クラスメソッド開発ブログ
はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール
Sublime Text 2 のショートカット 12 選（Win、Mac両方） ｜ クラスメソッド開発ブログ
1ヶ月使って便利だと思った Sublime Text 2 のショートカット 12 選（Win、Mac両方） 今、巷で話題になっているエディタ Sublime Text 2 ですが、 最近社内のプロジェクトでも使用する機会が多くなってきました。 Sublime Text 2 http://www.sublimetext.com/ インターフェースがシンプルで高速、 機能を強化するパッケージも豊富で、Gitとの同期も快適です。 このブログでは、1ヶ月プロジェクトで使ってみて、 とても便利だと思ったショートカットを12個紹介します。 自分自身会社ではWindows、自宅ではMacなので、 Windows版とMac版の両方をメモ代わりとして記載することにします。 1. マルチセレクト このショートカットは複数の文字列をインタラクティブに選択し、一度にまとめて編集することができます。 OS X：⌘
【便利ツール】CSScomb for sublime text 2で、CSSプロパティを整理・整頓【16日目】 | DevelopersIO
Sublime text 2で使ってみる 最近、注目されているSublime text 2にお世話になっているので、今回はSublime text 2の手順で作業してみようと思います。 それでは早速CSScombのプラグイン（パッケージ）をインストールしてみましょう。 Sublime text 2の詳しい説明は下記をご参照ください。 【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】 CSScombプラグインのインストール Sublime Text 2を立ち上げたら、プラグインをインストールするべく、お約束のコマンドパレットを開きます ショートカットは「Ctrl+Shift+p」です。 次に、「Pakege Control: Install Pakage」を実行し、インスールしたいプラグインを探します。 CSScombと入力すると該当
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
