こんにちは、ふじけん(@kenshir0f)です。 Figma Config 2023 で Developer Mode (Dev Mode) が追加され、エンジニアなど実装を担当する人目線でのデザインの確認がより便利になりました。 この Dev Mode はいったい何が便利なのか、どうやって既存のファイルで活用するのかを紹介したいと思います。 公式のチュートリアルはこちら↓ Dev Mode とは？Dev Mode はデザインデータを実装担当者が見るときのモードです。 エンジニアが Figma にあるデザインを実装する時に、デザインに関する情報をすぐに参照したり、UIに関連するコードを確認したりすることができます。 具体的なメリットは以下の通りです。 開発に必要なデザイン・画面だけを素早く参照できる デザインに関連するリンク(GitHub や Storybook, Notion など)を

Cloudflare Meetup #1

組織内のメンバーを「リソース」として見始めると、それを100%使い切ることにばかり注力してしまいます。リソースの稼働率を下げることは、すなわち、生産性を下げること。マネージャーは、まるで強迫観念に取り憑かれたように、そのような考えに囚われます。 自社でのソフトウェアプロダクト開発において、その対象は特に、開発者に強く向けられます。その理由は明らかでしょう。バックログに積み上がり続けるアイデアをソフトウェアに変えられるのは、開発者だけです。より多く、できる限り早く、アイデアを市場投入したい。彼らに空き時間という無駄を作らせてしまうわけにはいかない。 しかし、そのような努力が、必ずしも良い結果につながるとは限りません。むしろ、開発者の稼働率を高めすぎたことが、リードタイムに悪影響を与えているかもしれないのです。そして言うまでもなく、アイデアの市場投入が延びれば延びるほど、ユーザーにとってもビジ

Cloudflare Worker + D1 + Hono + OpenAIでLINE Botを作るを見て、Cloudflare Workersに興味を持った。そこでLINEで英会話や添削ができるbotを作ってみた。 作ったもの こんな形で英会話をしたり、英作文テーマを作ってくれたり、添削をしてくれたりする。 実際のコードは https://github.com/shibayu36/english-line-bot 。このコードをforkしてもらって、LINEチャネルの作成、Cloudflareへのデプロイ、src/prompt.tsのカスタマイズをすると、自分用のLINE botも作れると思う。 利用技術 OpenAI API Hono Cloudflare Workers Cloudflare Queues Cloudflare D1 開発Tips 基本的な作り方は Cloudflar

明けましておめでとうございます。CTOのあんちぽです。新年ということで、書き初め的な感じで始めてみました。 ところで、GMOペパボ株式会社（以下、ペパボ）は、おかげさまで2020年12月11日に東京証券取引所第一部銘柄に指定されました。それを受けて、社長のケンタロさんが「東証一部企業となったGMOペパボの新たな挑戦とは。2021年の意気込みを社長に聞いてみた - ペパボHRブログ」という記事で、あらためてやっていきを述べています。 この記事では、CTOとしての観点からのやっていきを述べてみたいと思います。 ペパボは人類のアウトプットを増やす 採用面接の際に、志願者の方からペパボの今後についてご質問をいただくことがよくあります。その時に僕がいつも話している「今後の話の前に、そもそもペパボというのは……」という内容を、まずは述べてみたいと思います。 ペパボの沿革についてはコーポレートサイトの沿

執行役員 VP of Engineering 兼技術部長の @hsbt です。 GMO ペパボ株式会社(以下、ペパボ)では一年に二回、半期ごとにエンジニアが実績の資料を作成し、資料に基づいて評価を行う制度があります。評価資料では、ペパボが大切にしている三つのことである「なかよくすること」「ファンを増やすこと」「アウトプットすること」それぞれについて、エンジニアとしてどうコミットしたかというのを述べる必要があります。 2019 年上期(1-6月)の評価を @hsbt が行った部署のメンバーに向けて、何故エンジニアにとってアウトプットが大事なのか、ということを述べた文章を社内で共有しました。今回はその文章をアレンジして公開したいと思います。 今回の評価で、気になったこととしては、 「OSS は開発していません、発表もしていなかったのでアウトプットはBです」という自己評価が散見されたことです。一

🌼 はじめに 2023.02.27 UPDATE） この記事は一部正確ではない内容がありましたので、タイトルと内容を 「React で ref ではなく ref.current を操作する理由」 に変更しました。 既に読んでくださった方々、申し訳ありませんでした。 1. React で DOM にアクセスする React の世界で DOM にアクセスするとき ref を使います。 sometimes you might need access to the DOM elements managed by React—for example, to focus a node, scroll to it, or measure its size and position. There is no built-in way to do those things in React, so you

はじめに 先日新しく発表された React の公式ドキュメントを皆さんはご覧になられたでしょうか？ この react.dev の前に Beta 版があり、筆者は少しずつ読み進めていました。その中で React の基本や思想をほとんど知らないまま使っていたことに気づきました。 今回読み進めることで公式ドキュメントをしっかりと理解することの重要性を知り、アウトプットとしてまとめてみたので、是非参考にしてもらえると嬉しいです！（GPT の手助けもあります） Props について Props とは親から子コンポーネントに渡す変数（プロパティ）のことです。 関数の引数のように利用でき、かならずオブジェクトとして渡す必要があります。 function Avatar({ person, size }) { // ... } // 渡し方 <Avatar size={100} person={{ name

こんにちは！モバイルアプリケーション開発部の折田 (@orimomo)です🍑 私たちの部署では2023年1月にチームの再編成をおこないました。 もともと2チーム制だったところを3チーム制へと変更し、そのうち2チームでスクラムではなくカンバンを採用するという選択をしています（残り1チームはスクラムを継続）。 今回は、カンバンを採用した理由や、この4ヶ月間おこなってきた試行錯誤について書いてみようと思います。カンバンが気になっている方、スクラムからカンバンへの移行を検討している方にとって、少しでも参考になれば幸いです。 なお、以前に部署のスクラムについて紹介する記事を書いておりますので、よければそちらもご覧ください。 creators-note.chatwork.com 2023年〜のチーム構成 カンバンを採用した経緯 カンバンを始めるにあたって 実際カンバンをやってみて どうだったか？ メ

CodeZine編集部主催のウェビナー「CodeZine Night」の第一回発表資料 https://codezine.connpass.com/event/279012

Regional Scrum Gathering Tokyo 2017

Motorimodaでは、バイクやクルマをエレガントに楽しむ、「大人のためのモータースタイル」をご提案致します。 ヨーロッパを中心とした国内外のトップブランドが集結し、その多くは当社が正規輸入元となっております。 「モード」「クラシック」そして「レジェンド」を基本構成とし、常に世界のモータースタイルトレンドをいち早く導入。 2（バイク）＋4（クルマ）のある六輪生活にさらなる喜びと潤いを与える最新アイテムを、直接お手に取ってご覧ください。 ご満足頂ける厳選商品、私たちならではの品揃えとサービスで、お客様のご来店をお待ちしております。

初めに こんにちは。フロントエンドエンジニアの竹本です。 入社してそろそろ4ヶ月が経とうとしています。だいぶBASEの開発にも慣れてきました。 この記事では私が社内の静的アセットを管理しているリポジトリ(以降は便宜上static-repositoryと呼びます)のNode.jsのバージョンを12から16にあげたら、webpack dev serverの立ち上がりが約12分から約5秒に短縮できた話を紹介したいと思います。 この作業は業務の隙間時間でやったのですが、どのように取り組んでリリースまで持っていったかをお伝えできればと思います。 結論3行 webpack dev serverの立ち上がりが遅かったのはApple シリコン搭載のMacでNode.js 12を動かしていたから。 Apple シリコン搭載のMacでNode.js 15未満を動かすと、rosetta経由になり非常に遅くなる。

近年はDBサーバで直接UPDATE/DELETE文を発行する場面はかつてより減ったように感じますが、引き出しとして持っていて損はないと思ったので私が普段やっている方法をメモしておきます。 プロトタイピングだったり、開発環境でも有効なので手癖にしておくのは有効だと考えます。 MySQLを例に書いていますが、対象のRDBMSは特に限定されません。 1. 対象のレコードを下見する まずはこれから更新する対象を見ておきましょう。 mysql> select * from books where id=1; +----+-----------+-----------------+-------+ | id | author_id | title | price | +----+-----------+-----------------+-------+ | 1 | 1 | Learning UPDA

前作BaroccoMD600がキー数も増えて進化。さらに使いやすく。ユーザーからの要望が多かった、F1-F12キーや矢印キーなどを追加した、いわゆる75％タイプのエルゴノミクスキーボードです。キーボード自体が左右に分離できるので、肩や腕を広げた自然なフォームでのタイピングを可能にします。分離したキーボードの中央にトラックボール・タブレット・メモ書きなどを置いての作業も可能です。また、5種類のCHERRY MXスイッチから、好みの打ち心地を選べます。 CHERRY MXスイッチについてはコチラ キーボード自体が左右に分離できるので、肩や腕を広げた自然なフォームでのタイピングを可能にします。通常のキーボードだと両手が近づくため、どうしても肩や腕が内側に狭くなってしまいます。キーボードを離すことで、それぞれの肩の広さに合わせた位置にキーボードを設置し、自然な状態でのタイピングが可能です。

何か重要な作業を効率的にしようと思うのに、次々と考えが思い浮かんでしまい集中できないときは、まず、頭の中で、以下のように上下左右に強力な磁石のようなものが設置されている様子を想像する (ここで磁石には N 極と S 極があるがどっちの方向を向いて配置されているのかといった論理的なことは考えなくても良い。とにかく磁石のようなものがある、という程度で良い)。 磁石のイメージをリアルに思い浮かべる必要は全くない。だいたい磁石のような、何かを吸い寄せるような性質のものがあるな、という程度で良い。 次に、その磁石で囲まれた空洞の中央部分に、少し重いけど、手で簡単に持てる程度の鉄球 (鉄を思い浮かべなくても、磁石のような何かに吸い寄せられるような何か) を思い浮かべる。 背景のイメージは Microsoft Windows XP の壁紙からの引用であり、コンピュータのディスプレイを見ながらイメージをす

Developers Summit 2023 登壇資料 https://event.shoeisha.jp/devsumi/20230209/session/4171/ overflowは、副業・転職サービス「Offers(オファーズ)」の開発、運用を行っています。 サービスの提供を開始してか…

Reactにおいて、フォームをどのように実装するかというのは開発者の悩みの種のようです。筆者は最近ロジックをRecoilに載せるのにはまっていますので、今回はRecoilを使ってフォームを実装することを考えてみます。 制御コンポーネントと非制御コンポーネント Reactにおいてフォームの実装方法は2種類に大別されます。それは、制御コンポーネント (controlled components) を使うか非制御コンポーネント (uncontrolled components) を使うかです。制御コンポーネントとは、入力されたテキスト等をReactのステートとして保持し、<input value={state} />のようにinput等のvalueに渡してレンダリングする方法です。制御コンポーネントではデータの本体がReact側にあり、DOMはそれを写像しているだけです。一方、非制御コンポーネン