DevTools architecture refresh: migrating DevTools to TypeScript | Blog | Chrome for Developers
This post is part of a series of blog posts describing the changes we are making to DevTools' architecture and how it is built. Following up on our migration to JavaScript modules and migration to Web Components, today we are continuing our blog post series on the changes we are making to Devtools' architecture and how it is built. (If you have not seen it already, we posted a video on our work of
Cypress Component Test Runner を Vite & React で試す
Cypress Component Test Runner Cypress 7.0.0 より、 2021/04/10 時点ではまだ Alpha 段階ですが Cypress Component Test Runner という機能が追加されました。（@sekikazu01 さんのツイートで知りました。） E2E テストのようにブラウザ上で実際にレンダリングしつつ、コンポーネントテストのような軽快さで動くという、中間的な位置付けと捉えています。 試してみる (Vite) create-react-app や vue-cli を使ったチュートリアルが用意されているので、とりあえず確認してみたい場合はそちらが良さそうでした。 ドキュメントも存在しており、webpack-dev-server を利用する場合はそちらが参考になりそう。 ただ、そのままやってもテンションが上がらないので、紹介記事には As
教育心理学はソフトウェア開発に活用できるか（教育心理学特論を読み終えて） - 勘と経験と読経
数年前からアジャイル開発コミュニティで話題になっていた放送大学のテキスト「教育心理学概論」というものがある。その増補改訂版である「教育心理学特論」を、放送大学大学院の講義15回を通じて読み終えた。そこで、本記事ではソフトウェア開発という観点から同書の感想などについて触れてみたいと思う。 教育心理学特論 (放送大学大学院教材) 作者:芳雄, 三宅,始, 白水発売日: 2018/03/01メディア: 単行本なお世間的には「教育心理学概論」が有名なようですが、私は特論のほうをお勧めします。理由は以下の記事を参照 「教育心理学概論」と「教育心理学特論」を比較してみた - 勘と経験と読経 本書は（ソフトウェア開発関係者に）お勧めなのか？ 自分にとって本書を通じた学びは知的好奇心を満たしたのみならず、今後の仕事への刺激も大きく、満足の高かったものだった。ではソフトウェア開発関係者（私の同僚や同業界人）
アジャイルな開発とチームづくり - Mitsuyuki.Shiiba
社内でLTしたネタ。去年からサポートしているチーム作りのお話。 1週間スプリント 最初は短いサイクルで試行錯誤したいから1週間スプリントでやることにした。 スプリントの終了と開始 金曜日にスプリントレビューとレトロスペクティブとプランニング。 プランニングは2部制にして 第1部では次のスプリントでやりたいことの認識合わせを全員で 第2部では細かいタスクの話をエンジニア中心で やってる。 ストーリーポイントと理想時間を併用してみてる これはだいぶあとの方の話。 最初の頃はチケットのサイズを見積もるのにストーリーポイントだけを使ってたんだけど、半年くらいした頃にストーリーポイントに加えて理想時間の見積もりも併用することにした。 最初の頃に理想時間を導入しちゃうと、頭では分かってても「時間」に引っ張られてしまうので、ポイントだけで始めることにした。で、半年くらいしたころには新しいやり方にも慣れて
JavaScript / TypeScript全体研修を実施 ~歴史あるサービス保守からモダンフロント開発まで幅広く手掛ける為に~ | NIJIBOXのフロントエンドエンジニア
フロントエンドグループ JavaScript / TypeScript全体研修を実施ニジボックス フロントエンド開発室の高橋です。 3月4日、3月11日の2日間にかけて弊社、株式会社ニジボックスのフロントエンドグループ全体を対象にJavaScript, TypeScriptの全体リモート研修を実施しました。講師にはリクルートから３名のプロフェッショナルをお招きしました。参加者は総勢で50名近くになりました。 今回この研修の企画運営メンバーの一人として携わりましたので、研修当日の雰囲気や研修後の成果を含めてご紹介させていただきます。 ニジボックスフロントエンドグループの現状と課題ニジボックスフロントエンドグループはSUUMO, ゼクシィをはじめとしたリクルート内のWebサービスのフロントエンド業務に幅広く関わっています。 業界も様々ですが、使用している技術や開発フローもプロダクトによって大き
TypeScript＋Reactで安全に動かし続けるために LINE証券のフロントエンドにおける型安全性への取り組み
2020年11月25〜27日の3日間、LINE株式会社が主催するエンジニア向け技術カンファレンス「LINE DEVELOPER DAY 2020」がオンラインで開催されました。そこでLINEのフィナンシャル開発センターFront-endチームのフロントエンドエンジニアである鈴木僚太氏が、「LINE証券フロントエンドにおける型安全性への取り組み」というテーマで、TypeScript＋Reactで安全に開発を続ける方法について共有。前半は「LINE証券」のフロントエンドがどのように作られているかについて紹介しました。 LINE証券フロントエンドにおける型安全性への取り組み 鈴木僚太氏（以下、鈴木）：このセッションでは『LINE証券フロントエンドにおける型安全性への取り組み』についてお話いたします。私はフィナンシャル開発センターの鈴木僚太と申します。よろしくお願いします。 最初少し自己紹介をさせ
採用担当者向けのエンジニア採用勉強会を開いた｜ころちゃん
こんにちは、株式会社Casterでエンジニアとして働いている @corocn です。 bosyuというサービスの開発や、働き方ファームのRPO（Recruiting Process Outsourcing; 採用代行）事業を支える仕事をしています。 本日社内向けに開いた勉強会がとても好評だったので、「じゃんじゃん公開してこ」という社内の声に後押しされ、全ページ無料で公開してみます！ なぜ勉強会を開いたかチームのSlackにいる方はほぼ人事・採用担当者の方で、中にはエンジニア採用に関わっている方も多くいます。同時に「エンジニア」という職種に関する知識の足りなさを課題に抱えている人もたくさんいて、みんなの理解の底上げをするのが目的でした。 エンジニアの私としても、世の中の採用担当者の理解が進めば、変なスカウトメールを受け取らなくてもすみますし、採用のミスマッチがなくなれば幸せハッピーです。ミス
職種を超えたコミュニケーションデザインを考える
2018年9月8日 builderscon tokyo 2018 （#builderscon）に登壇しました。様々なタイプのエンジニアが集まる大イベント。エンジニア寄りの話ばかりの中でデザインの話をしてきました。とはいっても、直球のデザインの話をしても面白くないと思ったので「デザイナーとうまく協働する方法」というコミュニケーションについて今やっているコトと今後の課題について話しました。 職種を超えた言語共有の難しさ ニュアンスだけでなく言葉ですら捉え方は様々です。デザイナーの間でさえ「デザイン」という言葉から思い浮かべる職域や働き方が微妙に異なります。「プロダクトのあるべき姿」であればなおさらです。人によって「良い」の定義が異なれば、優先順位も微妙に変わります。 こうした課題を解決すべく、言語化・視覚化があちこちで行われています。ペルソナを作るのもひとつですし、プロトタイプも方向性を共有す
Railsアーキテクチャパターン: In-App Gems (アプリ内gem) パターン
なんとなくパターン・ランゲージ（パターンカタログ）のスタイルが懐かしくなったので、あのスタイルを思い出しながら書いてみます。 目的 特定のアプリと完全に同期していますが、機能的には独立したライブラリをアプリ内のgemとして提供するものです。 動機 アプリで使いたい機能として、ある程度の独立した機能を実装したい 単独のクラスやモジュールとして実装できるものではなく、複数のクラス等が関連して動く程度の粒度を想定する（ので、個別のファイル単位よりはもう少し大きい粒度になる） 独立した機能とアプリが渾然一体となり、気がつくと境界を侵食したり侵食されたりしてしまうことは避けたい 適用可能性 いくつかのclassやmoduleがアプリケーションに依存せず、独立した機能になっている場合 特定のRailsアプリからしか使われる予定がない（共有する必要・予定がない）場合 一定期間しか利用せず、どこかのタイミ
統計学に魂が震えた体験をもとに、何を選択できるようにしてきたか？ データ活用職のキャリアプランを考える - Findy Engineer Lab
統計屋のあんちべ（@antibayesian）です。 さまざまな企業でデータ解析やコンサルを請け負ったり、データ活用部署の立ち上げをしたりしながら生活しています。 この記事では、データ活用系職種のキャリアプラン形成に悩んでいる方の参考になればと、私のこれまでのキャリアや、キャリアプランニングの考え方についてシェアしたいと思います。 というのも、データ活用系職種の中でも特に2010年くらいから注目を集めている1データサイエンティスト界隈のキャリアは、まだ職種として歴が浅いこともあって不透明な部分が多く、データサイエンティストなるものの解釈やポジションも多様なため、先行きに懸念を抱いている方も多いかと思います。 また、周辺環境も日進月歩の勢いで成長しています。例えば、全自動で簡単に売上予測や画像の分類などができるCloud AutoMLというサービスも提供されています。この手の仕組みはどんどん
アクセシブルなサイトリニューアルのチェック項目
検討したり、例外を適切に設けるために使うものです。 要件定義 バックエンドシステム・CMSが以下に対応している 入力フォームに時間制限はない 入力フォームの入力チェック機能は適切なエラーメッセージがでる 出力されるHTMLが仕様に準拠したHTML 画像に代替テキスト(alt属性)が入れられる 動画にクローズドキャプションを追加できる 自動的に生成されるウィジェットがアクセシブルになっている 画像のポップアップ（モーダル）機能など 3rdパーティのウィジェットやASPがアクセシブルである 動画埋め込み 地図埋め込み サイト内検索 自動翻訳機能 チャットボット 情報設計 情報設計に問題がない・情報を管理できている ナビゲーション設計が適切でどのページにもたどり着ける リンクテキストとリンク先ページタイトル・見出しに乖離がない ページタイトルとh1見出しに乖離がない サイト内でページタイトルに重
自分の気持ちを正しく表現する - けんちゃんくんさんのWeb日記
私、自分から積極的に調べることはないんですが、若者言葉やネットスラングって大好きなんですよね。そもそも西暦2020年において、全く新しい言葉が必要になることって殆どないと思うんですよ。新しい物質や惑星が見つかったとか、世紀の大発見でもない限り、今までの言葉で表現できないものってないじゃないですか。にもかかわらず、毎月、毎週、下手したら毎日新しい若者言葉やネットスラングが生まれていて一体どういうことなんだろうって。 ところでみなさん「ぴえん」って知ってますか？まぁ知ってると思うんですが、では「ぱおん」って知ってますか？ これをきいたときに、自分は「象？象なの？」と思ったわけです。そう思った人、他にもいますよね？先生怒らないから手を上げてこらん？ どうやら「ぴえんを超えてぱおん」という言葉が生まれていたらしく、「ぴえん」の強い版(?)らしいんです。 「ぱおん」のことはちょっとおいておいて、「ぴ
プロジェクト初期は理想日見積もりし、徐々に相対見積もりへ移行する - $shibayu36->blog;
プロジェクトマネジメントにおいて、見積もりをどのように行うかは結構難しい。僕は理想日見積もりの形式も、相対見積もり(ストーリーポイント)の形式も試したことがあるが、どちらも一長一短であった。 最近色々試す中で、プロジェクト初期は理想日見積もりし、徐々に相対見積もりへ移行するという方式がやりやすいと感じた。今回はその様子を紹介してみる。 理想日見積もりと相対見積もりそれぞれのメリット・デメリット 見積もりの基礎知識と「ストーリーポイント vs 理想日」の考察の記事を読むと、理想日見積もりと相対見積もり(ストーリーポイント)それぞれのメリット・デメリットがさっと把握しやすい。自分としては、それぞれ以下のように思っている。 理想日見積もり : 他の割り込みが全くなく、1日中タスクに取り組んだ場合を1理想日とする見積もり方式 メリット: 他に基準となるタスクがなくてもとりあえず雑に出せる。相対見積
「全員デザイナー」を実現するグラフィックシステムづくり｜田島 美鈴
こんにちは！TRIVE GROUPでデザイナーをしている田島美鈴です。 今回は自社で運営しているメディアのクリエイティブを、デザイナー以外でもつくれるような仕組みづくりを約1年かけてしていたので、まとめてみようと思います。 プロジェクトの概要概要 サムネイルやバナーなどのクリエイティブ制作を、デザイナー以外もクオリティを保ちつつ制作できるよう、figmaでのオペレーションを作成しました。 期間 約1年間 (他の業務もしながら徐々に仕組み化) システム作りの背景「バナーやサムネが間に合わない！」TRIVEグループではライフエンディングやマッチングアプリなどのメディアを複数運営しており、私はメディア内で使うサムネイルや記事内画像、UIをデザインしていました。 ただ、働き始めて事業のスケールが大きくなるにつれ、かなりのペースで記事が公開されるようなり、ライターからサムネや記事内画像のクリエイティ
a11y由来のスタイリング考察
aria属性 や role属性 を用いたスタリング実例は、まだあまり聞くことがありません。例えば CSS Modules の場合次の様な指定が可能であり、a11yとスタイリングを両立できるため、アプローチとして良さそうと考えています。 .text { color: #000; } .text[aria-invalid=true] { color: #f00; /* エラーの表現とか */ } .menu[aria-expanded=false] { display: none; /* メニューの開閉表現とか */ } .menu[aria-expanded=true] { display: block; /* メニューの開閉表現とか */ }
ジャンプの漫画学校講義録⑥ 作家編 松井優征先生「防御力をつければ勝率も上がる」 - ジャンプの漫画学校
週刊少年ジャンプ・ジャンプSQ.・少年ジャンプ＋編集部は、2020年度より、漫画家を対象とした創作講座「ジャンプの漫画学校」を開講しています。 第1期の全10回の講義より、一部を抜粋し、本ブログで順に公開していきます。 今回は「作家編①」から松井優征先生の講義の一部を紹介いたします。 松井先生が語って下さったノウハウや考え方が、クリエイターの皆様の漫画制作の一助になれば幸いです。 【講師】 必ず身に着くテクニック「防御力」！ 松井 漫画では「面白さとは何だろう？」といった問題が常に付きまといます。一昔前の編集さんは「面白ければ何でもいい」と言い、では面白いとは何かと聞くと「人それぞれだよ」という人が多かったです。皆さんはそういう人の言うことを聞いてはいけません。「面白い」とは何なのか、それは作家も編集も本人なりに言語化できないといけません。 そこでまず説明したいのが「防御力」です。 松井
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
最近の ESLint とかの構成2021
みんな好きな構成を好きなように入れれば良いと思ってるけど、自分が最近やってるやつを雑に紹介する。 シンプルなTypeScriptのプロジェクトを想定している。 npm install --save-dev eslint prettier typescript eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin npm-run-all
アイコンフォント
安全でアクセシブルなアイコン・フォントアイコンフォントの問題点と、安全な方法で提供する方法について解説された翻訳記事。フォントが読み込まれない場合、@font-face がサポートされていない古いブラウザの場合の話や、アクセシビリティに関してアイコンフォントが適切に動作しない場合の話などが紹介されている。 アイコンフォントとアクセシビリティ： ディスレクシア（失読症）向けフォントでの表示問題についてアイコンフォントを利用していると、ディスレクシア向けの機能でフォントが置き換えられた場合にコンテンツが正しく表示されない問題が紹介されている。 アイコンフォントか？ SVG アイコンか？「ユーザーがフォント設定をカスタマイズした場合などに、アイコンフォントが表示されない (いわゆる「豆腐」になったり、文字化けしたり、空白になったりする)。」という問題に対して考察。アイコンフォントが表示されないリ
四国の次世代水族館「四国水族館」で美しき水中世界を楽しむ
2020年6月1日に香川県宇多津町（うたづちょう）にオープンした、四国の次世代水族館「四国水族館」。展示テーマは「四国の水景」。四方を海に囲まれた四国の豊かな水景を再現した。館内は光の演出が素晴らしく、美しき水中世界に心奪われる非日常空間を演出しています。人気のイルカプログラムはプールと客席の間に仕切りのガラスが無いため、水面ギリギリからの目線でイルカのジャンプを楽しむことができます。また夕日に染まる瀬戸内海を背景にイルカプログラムを観ることができるのも、四国水族館ならでは。充実のお土産ショップもチェックをお忘れなく。 入館料は大人（高校生・16歳以上）2,200円、小中学生1,200円、幼児（3歳以上）600円、3歳未満は無料です。
発売わずか3ヶ月で30万本の大ヒットを生んだsöpöはデータから生まれたという話｜Chiba Hisayoshi
ファミリーマート限定で販売しているsöpöというブランドがあります。söpöはNOINが作っているブランドで、先日発売わずか3ヶ月で30万本の大ヒットとなっているというリリースを出したところですが、今回はそのsöpöがどのような経緯で作られたのかという点について解説したいと思います。解説なんて偉そうに言っていますが、開発に私はまったく絡んでいませんが…。マーケティング視点での施策設計や、なにより企画段階での女性からの反応をみてもsöpöは自信はありましたが、文字通り社運を賭けたプロジェクトで、ちゃんとヒットするまでドキドキが止まりませんでした。 ↑ファミリーマートからのリリースです。 伊藤忠商事との業務提携söpöの話の発端は伊藤忠商事との事業シナジーのブレストから生まれています。事業会社から出資をする場合、彼らの目的はVCとは違い、事業提携です。「事業におけるシナジーがあるのか」という点
CloudRun + Go + Next.js で画像閲覧に特化した Twitter クライアントを作ったはなし
zenn 初投稿になります、kimihiro_n です。 先日リリースした個人開発のアプリケーションのはなしをしたいと思います。 作ったもの 最初に宣伝かねて作ったものの紹介を。 イラスト投下閲覧用に Twitter を使っているのですが、公式 Twitter だとイラスト以外の投稿もたくさん混ざって追いづらかったり、最適化の影響で見逃してしまうツイートがあったりと不便さを感じていました。 Twitter API を使ってこの辺いい感じにフィルタリングしたら快適になるんじゃないかと思い Web アプリケーションとして作ってみることにしました。 自分のタイムラインやリストをフィルタリングして表示するだけのアプリケーションですが Twitter で絵師さんを追いたいみたいな用途だと便利に使えると思うので是非試してみていただければと。 後述しますが PWA(Progressive web app
EC2 Image Builderを用いたRedashの運用改善 - ZOZO TECH BLOG
こんにちは、SRE部の谷口（case-k）です。 本記事では、EC2 Image Builderを使いRedashの運用改善を行った事例をご紹介します。運用しているRedashについてご紹介し、その後、Redashの運用課題に対してEC2 Image Builderでどのように解決したかTipsも踏まえご紹介します。 余談ですが全国どこでも働けるようになったので沖縄に住めています(感謝！) https://press-tech.zozo.com/entry/20210118_zozotechpress-tech.zozo.com 目次 目次 運用しているRedashの紹介 役割 インフラ構成 クエリ実行の流れ EC2インスタンス起動時の処理 Redashの運用課題 EC2 Image Builderによる課題解決 EC2 Image Builderの紹介 各リソースのTips 事前準備 コ
Android 12、“Material NEXT”を準備中？大幅なデザイン変更か
Googleは今月中にもAndroid 12のデベロッパープレビュー版をリリースするようだ。正式配信は秋ごろと予想される。 先日、Googleがパートナー向けに共有したAndroid 12のドキュメントがリークされたことで通知パネルの大幅なデザイン変更が判明したが、デザイン変更はより多くの画面に及ぶ可能性が高いようだ。 テーマ変更機能の大幅拡張を計画 XDA Developersによると、リークされたAndroid 12のスクリーンショットで判明した通知デザインの大幅な変更は“road to Material NEXT”（次なるマテリアルへの道）の始まりとGoogle社内で呼ばれているという。 マテリアルとはGoogleが提唱するデザイン手法のガイドラインである「マテリアルデザイン」のこと。物理の法則に従うことで人間の脳にとって自然なものを作ろうという考え方でAndroidだけでなくYou
豚肉とねぎの煮込み丼の作り方｜樋口直哉(TravelingFoodLab.)
昼ごはんは簡単に食べられるものが一番。というわけで、たまに書くまかないシリーズです。今日は豚肉とネギの煮込み丼。 豚バラ肉(薄切り) 200g 生姜みじんぎり 15g(大さじ1) 長ネギ 50g 出汁（または水） 200ml 醤油 大さじ2 酒 大さじ3 砂糖 大さじ2 みりん 大さじ1 山椒の水煮 あれば 片栗粉 小さじ1/2 ネギなどの青み 豚バラ肉を自分で細かく切って使うのがポイント。挽き肉を買ってくれば簡単ですが、この料理に限っていえば切ったほうがおいしくできます。豚バラ肉という安価な材料こそ、手間をかける価値があります。 生姜のみじん切り。しょうがは風味が強い皮ごと使います。薄切りにしてトランプのように重ねたら、、、 まず千切りにします。 次はその千切りを90℃回転させて、さらに切っていきます。み
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fjorb Boot Camp as a Gate
#28 フロントエンドエンジニア出身のUIデザイナーへのキャリアチェンジ その2 with @takanoripe さん by devchat.fm
【React】そろそろ技術ブログで setCount(count + 1) と書くのはやめませんか
温泉 | 由縁別邸 代田 | YUEN BETTEI DAITA | UDS Hotels | UDSグループホテル公式サイト