ReactにHooksの仕組みが導入されてからずいぶん経ちました。Hooks導入当時のコミュニティの熱狂は、それはもう凄いものでした。「Reactにとんでもない機能が実装されたぞ！」と大騒ぎで、Hooksについての新しい記事を見ない日はありませんでした。 そんな盛り上がりも冷めつつあり、Hooksも実務に密着した「当たり前」の機能になったのかな、と思いました。しかしその一方でまだHooksについてはよくわからないという人も多く、知識の二極化を生んでいるように感じます。 世の中にはReactにすでに全く馴染んでいる人向けのHooksの解説記事は多く見当たりますが、最近のReact初心者に向けてのHooks解説記事はあまり多くありません。この記事では、Hooksについて実例を示しつつReactの基礎的な面からの解説を行います。 React初心者向けのHooks 世の中にはもう多くの高品質なHo
ラブグラフでエンジニアをしています横江 ( @yokoe24 ) です。 ラブグラフでは、エンジニア以外で Google Apps Script (GAS) を書く方も多く、 Slack通知の自動化など、業務の効率化がおこなわれています。 マジですごいと思います！ GASをエンジニア以外が書く問題点 一方で、コードを見るとプログラマーからするとムズムズするところもあります。 変数名に snake_case が混ざっている インデントが揃っていない for文の中で getValue() を回している Google Apps Script の getValue() メソッドはコストが高く、何度も実行するとタイムアウトの可能性が高まる == で比較している double quotes " と single quotes ' が混ざっている こういうコードを見ると直したくてウズウズしてしまいます。
Value Object（値オブジェクト）は3種類あった Value Object（値オブジェクト） の意義と使い所がわからなかった。そこで調べてみたらなんと3種類あった。面白かったのでその調査過程を紹介する。 なお、現在では DDD の意味での Value Object がメインであること、またこれは自転車置き場の議論であり、DDD Quickly の Value Object の章を読む方が有意義であることを先に記しておく。 1. Data Transfer Object 1つ目は、Data Transfer Object（DTO）の意味だ。これは PoEAA に少しだけだけ出てくる。かつてのJava界隈の一部では（？）DTOのことを Value Object と呼んでいた。だが、現代では Value Object と DTO は別物として定着している。PoEAA は2000年代前半に
※2019年05月29日作成の記事です。 はじめまして! いつも皆さんの面白い記事を読んで、学んだり励みにしたり楽しんだりしてます！ありがとうございます！ このたび東京都八丈島のホテル、リードパーク＆リゾート八丈島で伝票システムアプリを作らせてもらいました！ このシステムアプリの全機能はブログの記事で動画を交えて説明しています。 （QiitaじゃTwitter経由でしかアップできないため） 全機能説明ページはこちら 謝辞 ホテルの皆様 今回自分がこんな貴重な機会を得られ、最後まで作ることができたのは、寛容で柔軟なホテル支配人・レストランリーダー・スタッフの皆様のお陰だと本当に思います。 最初は遅延もあったり、レシート２枚出てきたりしてましたが、毎日使用後に多くのフィードバックを得られたので開発がとても捗りました。 「楽しい！」「今までで１番使いやすい」などの声は本当に嬉しいです Fireb
ブラウザ上で3Dキャラクターと会話できる「ChatVRM」をオープンソースで公開しました - pixiv inside
こんにちは、VRoid部のkeshigomuです。 普段は主にVRoid Hubのフロントエンドエンジニアとして、3Dキャラクターを表示するビューワーの開発に携わっています。また@pixiv/three-vrmという、Web上で3Dモデルを使ったコンテンツを開発するためのOSSライブラリの運用も行っています。 今回、ブラウザで簡単に3Dキャラクターと会話できる技術デモ「ChatVRM」とそのコードをオープンソースで公開しました。 「ChatVRM」は、テキスト・口頭で話しかけた言葉にキャラクターがフルボイスで回答してくれる「キャラクターと会話できる」デモです。WEBブラウザ上で動作でき、3Dキャラクターのインポート・切り替え、キャラクターに併せて声を調整することもできます。 (2023/07/10追記) 読み上げ音声の生成に使用していたKoeiro APIの提供終了に伴い、以前のデモとコー
より良いReact開発者になり、より優れたコードを書き、コーディング面接で抜き出るため、Reactの技量を改善するすぐに使える知識です。 さあ、皆さん。始めましょう。 1. Reactフックを使った関数コンポーネント フックはReact v16.8で導入され、Reactの関数型プログラミングを大きく向上させました。Reactフックで、クラスコンポーネントの代わりに関数コンポーネントが使えますし、使うべきです。しかし...関数コンポーネントとステートとは？ライフサイクルメソッドとは？ 怖がる必要はありません。Reactフックを使えばできます。 例をいくつか見てみましょう。 これは、クラスを使う従来の方法です。次のようにuseStateフックが使えます。 簡単に見えますか？その通りです！useStateフックを使って、初期状態を空の文字列（''）に設定し、現在の状態（value）とその状態を変
__proto__の除去でNode.jsのプロトタイプ汚染を防げないケース - knqyf263's blog
前提 Node.jsのプロトタイプ汚染について書いているのですが、プロトタイプの説明（prototype と __proto__ の関係とか）を定期的に見直さないと綺麗サッパリ忘れる程度にはNode.js触っていないので、何かおかしいところあればご指摘お願いします。 概要 Node.jsではここ数年プロトタイプ汚染攻撃が流行っています。概要は以下を見れば分かると思います。 jovi0608.hatenablog.com そもそもプロトタイプって何？という人は以下の記事が分かりやすいです。自分はお守りのように定期的に読んでます。 qiita.com 外部から送られてきたJSONなどをパースして変換し、そのオブジェクトをmergeやcloneする際に __proto__ を上書きすることで Object.prototype を汚染するというものです。このオブジェクトが書き換えられると、新しく作
ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような「普通のウェブページ」でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装について聞いたアンケートでは<div>で自前実装派とJSライブラリ利用派で回答が二分されました。 この記事ではリッチで使いやすいUIを実装するための選択肢として「ヘッドレスUI」ライブラリを紹介します。ヘッドレスUIライブラリも大きな括りでは「JSライブラリ利用派」に含まれますが、古くから定番のBootstrapやMaterial UI・Vuetifyなどとはちょっと毛色の違う存在です。 ヘッドレスUIとは？ BootstrapやVuetifyとは何が違う？ ヘッドレスUIとは「デザイン（見
業務で扱う(最小)単位でデータとロジックをひとまとめにして整理する技法 ドメインモデルが実現する世界 どこに何のロジックが書いてあるか、(ソースを見るだけで)わかる 改修しやすいプログラム ドメインモデルで解決したい問題 どこに何のロジックが書いてあるかわからない問題 - わからないから適当に書く→適当に書くからわからない → わからないから・・・ - ある修正をしようと思っても、どこまでが影響範囲かわからない - 使用している箇所全grepして調査 - 同じような処理、分岐が重複してしまう これを解決したい。これだけを考える。 なぜ(今までのシステムは)改修は難しいのか 機能クラスと、データクラスをわけてしまうから そのデータクラスを呼べる箇所 = 業務ロジックがかけてしまう どこになにが書いてあるかわからなくなる 共通クラス、Utilクラスを作ってしまうから 誰でも呼べる = そのクラ
はじめに 自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は、現場で後輩に質問されたReactの技術質問をまとめていきます。 なお質問に対しては一問一答形式で答えるのではなく、深ぼって解説をしていきます。 この記事の対象者 フロントエンジニアを目指している人 React初心者から中級者 Reactの質問をされた時にうまく言語化できない人 この記事の目標 Reactでよく使われている技術を言語化できるようになる 何となくの理解から脱却する おことわり 本記事は面接等で聞かれる質問テンプレート集ではありません 現場で後輩に聞かれた質問を深ぼって解説をするノリで書いてます Reactフックとは何か？ Reactフックは公式ドキュメントにおい
エンジニアから人事に転生してやったことまとめ｜Masaki Mitsuyama | ちょこめろん｜note
今日までアルプの人事（採用メイン）の三津山 aka ちょこめろん（@__chocomelon）です。来週からフロントエンドエンジニアになります。 アルプは継続収益ビジネスの成長を支える販売・請求管理システム「Scalebase」を開発する4期目のスタートアップです。 先日、めちゃくちゃ優秀な人事責任者の方にジョインいただいたので、めでたく?エンジニアに戻りました。数ヶ月と短い間でしたが、オペレーションの効率化や自動化、新入社員オンボーディングのアップデートなど色々やったので、やったことの一部を紹介したいと思います。 エンジニアリングマネージャーから人事へエンジニアリングマネージャーでしたが、4ヶ月とちょっと前に人事（採用メイン）に転生しました。当時は、採用を加速する上で人事周りのオペレーション含め色々課題があり、立候補する形で人事させてもらいました。 元々エンジニアリングマネージャーとして
5月は仮想通貨＋1708万円、株 -19万円でした。年次は 5900万円ちょっとまで続伸。平均すればS級Botter？ 原資5000円で累計利益1億円達成しました。ちゃんと集計したら1.1億稼いでいたらしく、今月どこかのタイミングで億を超えていました。 ここまで5年弱かかりました。まあ、実際触っていたのは2017/11~2018/4と、2021/6~なので実際のトレード期間だと2年弱でしょうか。仮想通貨は夢がありますね。 反り立つ壁のような利益-時間の図 まあ、税金を30ミリ払う必要があるので、あと60ミリくらい稼がないと税抜き後に億残りません。税金はクソ！！！ 2017年時点では大学院生で、限界系な生活をしていました。親は破産寸前、実家は売り飛ばされていたので、仕送りも帰るところもなく、研究室に雇ってもらった給料（8万円くらい）で暮らしていました。 そもそも高校に行くのも反対されていたの
フロントエンドとオブジェクト指向
フロントエンドの実装にオブジェクト指向をどのように取り入れるかを考えます。 動機 近年のフロントエンドは、Reactなどのフレームワークを使ったコンポーネントベースの設計が主流だと思います。コンポーネントは、HTMLによるマークアップ、CSSによるスタイリング、JavaScriptによる振る舞いがひとまとめにされた、再利用可能な部品です。 コンポーネントの設計を考えていると、次のような疑問が生じます。 何を基準にコンポーネントで分割すればよいか。 コンポーネントの粒度はどれくらいが適切なのか。 どのタイミングで抽象化すれば開発コストが無駄にならないか。 分業した際にコンポーネントの分割や粒度の基準をどのように統一するべきか。 そこで、いろいろ調べたり試したりしたところ、フロントエンドの設計にオブジェクト指向を取り入れることが、これらの答えの一つになるのではないかと考えました。 この記事では
Googleカレンダーの予定をデータ形式（スプレッドシート）にするGAS（プログラム） | 独立を楽しくするブログ
Googleカレンダーに登録している予定を、データ形式にする方法をまとめてみました。 Google Apps Script＝GAS（ガス）というプログラムを使います。 Google カレンダーのメリットはデータを蓄積できること 10年以上 Google カレンダーを使っています。 紙の手帳は使っていません。 紙の手帳のよさもありますが Google からのメリットはデータとして蓄積し、活用できることです。 たとえば去年の今頃は何をやってたんだろうとか、5年前どうだったかを比べてみたりもしています 。 （今よりも予定がぎっしり詰まっています） 予定を多ければいいわけではなく、減らす方向で工夫をしてきましたので、デジタルで過去の予定をさっと見ることができるGoogle カレンダーは便利なのです。 声でカレンダーの予定を入力することもできます。 Googleカレンダーに、予定を声で登録する方法
こんにちは。VRoid モバイル/StudioのUIを開発したねこまんまです。 先日VRoid モバイル/Studioで利用しているuGUI記述ライブラリ『Mux』を公開しました🎉 github.com 実は以前、pixiv TECH SALONで少しだけ紹介させていただいたのですが、今回はこのライブラリの魅力をより掘り下げて見たいと思います🔍 uGUI? uGUIとはUnityのアプリケーションで使うことができるUIツールキットです。他にもUnityには、新しく開発されているUI ToolkitやUIWidgets、サードパーティーによるものなど様々なものがあります。uGUIはその中でも成熟しており、Unityに標準的に含まれることからよく利用されています。 uGUIの特徴は、Unityのヒエラルキーに則ってUIが構築されることです。そのため、Unity Editorを用いて編集する
GoogleスプレッドシートとGASでイベント出欠管理ツールを作ってみた話 その２ - 虎の穴開発室ブログ
こんにちは、虎の穴ラボのA.M.です。 前回の記事の最後の方でも触れていますが、作った出欠管理ツールを運用していく中で、「スマートフォンから入力しづらい」または「入力できない」という声が多く上がっていました。 そこで、今回はその解決策としてイベント出欠管理ツールを拡張し、Googleフォームでも出欠登録・変更（Discordにも通知）ができるようにしたいと思います。 ※本記事の内容は、以前の記事「GoogleスプレッドシートとGASでイベント出欠管理ツールを作ってみた話」の続きとなりますので、先のこちらの記事を一読いただくことをおすすめいたします。 toranoana-lab.hatenablog.com 目次 用語 要件 使用するもの 前提 実際に作ってみる STEP1 Googleフォームを作る STEP2 回答記録シートに「反映済み」チェックボックスを追加する STEP3 GASの実
VRM入門｜npaka
1. VRMとは「VRM」は、プラットフォーム非依存の3Dアバターファイルフォーマットです。「人型のキャラクター・アバター」において、細かいモデルデータの差違を吸収し、アプリケーション側での取り扱いしやすくすることを目的としています。UnityでVRMファイルを読み書きする標準実装が提供されますが、フォーマット自体はプラットフォーム非依存であり他エンジンや環境でも取り扱うことが可能です。 2. VRMの特徴VRMの特徴は次のとおりです。 ・プラットフォーム非依存で人型のキャラクター3Dモデルデータを取り扱うことが可能。 ・3D標準の「glTF2.0」をベースに、人型モデルを取り扱うための制約と拡張を加えたフォーマット。 ・テクスチャやマテリアルなどすべてのデータを含めて1ファイルにまとめられる。 ・スケール（1.00 = 1m）・座標系と向き（Y-up, -Z方向向き）など標準仕様が決まっ
React Advent Calendar 2019 - Qiita の 12/4 です。12/5も終わろうとしていますが、僕の中ではまだ12/4です…。ほんとすみません…。 さて、技術的負債は、常に注意深く設計しない限り、必ず積み重なっていくものです。ウェブフロントエンドを含めたGUI開発では、テストがかかれないことも多いため、技術的負債を作らないために、React Hooks入門記事を書いてみました。 もっと詳しく！とかここが分からない！とかがあればぜひコメントなりいただければ、追記できる気力がある限り追記していきたいと思います。 サンプルコードは https://github.com/erukiti/react-hooks-without-debt に置いています。 React Hooks の基本 React Hooksの考え方や個々のAPI仕様に関しては、公式ドキュメント を読むと
普段コード書いている中で見通し（可読性）を良くするために意識していることを10個列挙しました JavaScript(TypeScript)のお話です 1.変数宣言はconstを利用する 変数を宣言するときはconstを使います。varは使わない様にします letを使うときは限定的で、実行する関数の中で変数を再代入する必要がある時に使います // 関数の外でのlet宣言はアンチパターン let strValue = ""; const method1 = () => { strValue = "method1"; }; const method2 = () => { // 関数内、再代入する処理で宣言する let setValue = "ほげ"; }; // 以下、変数strValueを利用するかもしれない // どこかで再代入されるかも分からない..
線形代数をBlenderで、やる｜Melville
「線形代数をBlenderで、やる」とはどういうことでしょう？ とりあえずこの画像を見てください これだけではよくわからないと思いますが、 要するに下の画像と全く同じ計算をやっています 確かに「結果」がBlenderの画像で並んでいる数字と同じになっているBlenderのノードの側にもよく見ると、3,1,4…と、 WolframAlphaの画像と同じ値が並んでいるのが確認できます 左の3つのノードが左の行列を表し、右の3つのノードが右の行列を表しているさて、このBlenderのノードシステム（GeometryNodes）ですが、 本来は3DCGのジオメトリをプロシージャルに生成にするためのもので、 決して線形代数をするための機能ではありません！ しかし、それをうまく悪用すれば使えば、 上のような行列の演算をさせて線形代数遊びができます！ この記事の最後では、これを応用して次のGIFのような
ZOZOFITアプリにおけるGoogle Analytics 4導入の取り組み - ZOZO TECH BLOG
はじめに こんにちは。計測プラットフォーム開発本部 計測プロデュース部の井上です。 私たちはZOZOFIT、ZOZOMAT、ZOZOMAT for HandsやZOZOGLASSなどの計測技術に関わるプロダクトのサービス開発をしています。先日ローンチしたZOZOFITではGoogle Analytics 4(以下、GA4)を導入しました。本記事ではGA4を導入する際に工夫した点と注意点について紹介します。 目次 はじめに 目次 計測プラットフォーム開発本部 計測プロデュース部とは 計測プロダクトとデータ分析 ZOZOFITとは GA4の導入 自動計測screen_viewイベントの無効化 手動計測screen_viewイベントの実装 GA4のDebugView設定 GA4とBigQueryの連携 Looker Studio Looker Studioのフィルタ機能 Looker Studi
Reactにおけるパフォーマンス最適化のTips
はじめに React は内部でのパフォーマンス最適化により UI 更新に必要な DOM 操作の数を軽減しています。本記事では、さらに React アプリケーションを最適化するテクニックを紹介します。 前提知識 以下にレンダリングの仕組み等を解説します。すでにご存知の方は飛ばしてテクニックの章をお読みください。 React がどのように UI を更新するのか レンダリングされたコンポーネントを作成した時、React はコンポーネントの要素木に対してvirtual DOMを作成します。コンポーネントの状態が変わるたびに React は virtual DOM 木を作成し以前のレンダリング結果と比較します。それらの違いのみを変更された要素の実際の DOM に反映します。 実際の DOM は操作するのにパフォーマンスコストがかかるため、React は virtual DOM を用いることで再レンダ
こんにちは、マーティン（@mrtn）です。みなさんNotion使っていますか？ 副業で広報を担当している株式会社トクイテンではコミュニケーションツールはSlack、ドキュメントツールはNotionを日々使っています。 今回、Notion投稿をいい感じにSlackへ通知するGoogle Apps Scriptを作ってソースを公開しました。ぜひ使ってください！ NotionのSlack通知機能は体験があまりよくない私にとってNotionは、手によく馴染み、書き心地のいいドキュメントツールです。ひとつだけ不満をあげるとすれば「Slackへの通知機能」です。 公式が用意してくれていて、ノーコードで簡単に設定できるのはとても良いですが、通知のタイミングや頻度、そして内容についてはもう少しなんとかならないものかと思っています。 この画像はNotionのSlack通知を設定しているチャンネルです。 ペー
MSW はネットワークレベルでリクエストをインターセプトする、自動テストで便利なモックサーバーです。過去記事でも紹介したとおり、スパイ（モック関数）をネットワークレベルに忍ばせることが可能です。実際に WebAPI が呼ばれた時の Payload の検証は、Jest 組み込みのモック機能では実現できない領域です。本稿は「WebAPI リグレッションテスト」を実施するための、MSW 活用方法を解説します。記事で使用しているサンプルコードはこちら。 課題の概要 Web アプリケーションページのほとんどは「1.UI を表示し／2.入力操作し／3.WebAPI 通信し／4.通信後処理を行う」という一連処理が責務です。このようなページに書かれるテストは、WebAPI 通信前後に集中しがちです。MSW を使用すると、以下の図の様に「送信後処理」まで到達可能なため、例えば「WebAPI レスポンスが返っ
kintone アプリ作成フォームの UI の状態管理のライブラリ選定 - Cybozu Inside Out | サイボウズエンジニアのブログ
サムネイル こんにちは！kintone のフロントエンド刷新プロジェクト（フロリア）の@nkgrnkgrです。 フロリアでは、kintone のフロントエンドの ClosureToolsで書かれたコードを React に置き換えています。 本記事では フォーム画面の UI の状態管理に使うライブラリを選定する際に、どのような検証と意思決定を行ったかについて紹介します。この記事が UI の状態管理を行う際に何かの参考になれば幸いです。 kintoneのアプリ作成フォーム はじめに アプリ作成フォーム画面 アプリ作成フォーム画面とは？ ユーザーの操作と状態管理で考慮すべきこと ライブラリを選ぶ上での前提 今回の選定で考慮したライブラリの種類と特徴 ３つのライブラリの特徴 Redux(ReduxToolkit) について Zustand について Jotai について 利用状況とプロダクト要件を
TinyBase
Start with a simple key-value store.Creating a Store requires just a simple call to the createStore function. Once you have one, you can easily set Values in it by unique Id. And of course you can easily get them back out again. Read more about using keyed value data in The Basics guide. const store = createStore() .setValues({employees: 3}) .setValue('open', true); console.log(store.getValues());
Flutterアプリの定期リリースを支える自動化 - Fast DOCTOR Technologies TECH BLOG
本稿では、ファストドクターのモバイルアプリのリリースフローを整備した取り組みについてご紹介します。 モチベーション ファストドクターのモバイルアプリは、2022年夏にFlutterでのフルリプレースを実施し、それ以降は機能の開発が完了次第随時リリースをするという戦略を取っていました。 この戦略はシンプルであり、開発に関わっているステークホルダーが少ない状況下でうまく機能していました。しかし、組織の拡大に伴い以下のような問題が発生するようになりました。 複数機能の開発スケジュールの調整をしたり、バックエンドのリリース・QAとの整合性を取ったりという必要性が増し、調整コストが肥大化 リリースが不定期なため、いつPull Requestをマージすれば良いか分からずopenされたままのPull Requestが多数 この状況を改善するために、以下の要件を念頭に定期的なリリースとそれを支える仕組みを
マーケターがredash&スプレッドシートでKPI管理してみた - SMARTCAMP Engineer Blog
スマートキャンプでマーケターをしている佐々木です。 最近は自販機でペットボトルを購入することにハマっています。 私は弊社の運営する資料請求サイト「ボクシル」のマッチング最適化を生業として生きているのですが、追うべきKPI・可視化したデータの共有にはスプレッドシートを好んで使っています。 SQLで取り出したデータであればRe:dashで共有するのがライトなのですが、 SQLでとってきたもの以外のデータを上手く組み合わせられない 様々なアレルギー反応を起こす人がいる（英語UIがダメな人、クエリ見ると卒倒しちゃう人etc...） 権限管理が大変 などダッシュボードとして利用していくにあたって、特に非エンジニアに浸透しづらいというのがあります。 そこでスプレッドシートをダッシュボードとして活用していく方法を紹介したいと思います。 概要 ツールごとの役割分担 使った技術 流れ 全体 1. Re:da
はじめまして、今年の 9 月に入社した井手です。 NIKKEI Advent Calendar 2021 17 日目を担当します。 今日は Web Bluetooth の仕様を Bluetooth の説明を交えながら解説し、Web Bluetooth を日経でどう使えそうかを考えてみます。 紙の新聞について 皆さんは紙の新聞を読みますか？私は読みます。日本経済新聞社の福利厚生の１つには日本経済新聞の購読費補助があり、私は日経 W プランを購読しています。 最近は紙の新聞に触れる度に、新聞が紙である意義を考えるようになりました。新聞には国民の知る権利を支える大切な役割がありますが、紙媒体にしか寄与できない側面があると思います。例えば紙媒体の新聞は朝刊・夕刊単体で購入でき、欲しい情報を安価に購入できます。また、スーパー銭湯や喫茶店といった場所に置いてある新聞を回し読むことで、購入せずとも情報に
TypeScript Future Corporation 2022 11 14 i TypeScript 1 3 1.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.2 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 1.3 TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 1.5 . . . . . . . . .
Jestを使ったVueコンポーネントのテストを導入した話 - MicroAd Developers Blog
はじめまして、フロントエンドエンジニアをしている川上です。 業務では、主にサービス要件に沿ったフロントエンド開発を担当しています。 今回は、私自身初めての経験だったフロントエンドのテスト導入手順や、 導入するにあたって気をつけた点などをお話しできればと思います。 はじめに Vueコンポーネントのテストについて Jestの導入について Jestを利用したテスト おわりに はじめに マイクロアドには様々なプロダクトがありますが、私の担当しているUNIVERSEというプロダクトについては、 フロントエンドフレームワークにVue.jsを利用しています。 jp.vuejs.org テストの導入を行うにあたって、今後、現在利用しているVue2をVue3へ移行していくことを考えると*1 TypeScript*2でテストを書いていくのがいいということになりました。 また、TypeScriptのメリットでも
ReactのComponentProps型を使って不要なPropsとお別れしよう！！ | Reactおじさんブログ
ReactのComponentProps型を使って不要なPropsとお別れしよう！！2022-10-202022-10-21 どうもReactおじさんです。 ブログをリリースして満足していましたが、記事を執筆しないと価値が無くなってしまうので、だらけずにアプトプットしていこうと思います。 今回は汎用コンポーネントの作り方です。 一般的な汎用コンポーネントの作り方フロントエンドエンジニアであればコンポーネント作成は避けて通れない道ですよね、、 今回のメインに行く前に一般的に作られているコンポーネントの作り方をおさらいしましょう。 ボタンコンポーネントの場合import type { FC, ReactNode } from "react"; type Props = { children: ReactNode; onClick: () => void; }; export const But
この記事はTech KAYAC Advent Calendar 2019の21日目の記事です。 経緯 こんにちは、今サーバサイドで仕事をしてるUnityエンジニアの魏です。 入社した以来、いつもノートで出退社時間を書いて、金曜日か月曜日で勤怠管理システムでまとめて入力することをやっていました。 しかし年を取ってきて、仕事が忙しくなるなどの原因で、よく勤怠時間をメモし忘れています。毎日勤怠をつける習慣があれば問題ないけど、やはり忘れてしまうことがよくありました。その時、KPTシートで「出社退社時間を記録する仕組みを作る」というトライを書きました。 ネットで検索してみたら、自動で打刻してくれる勤怠システムがすでにたくさんあります。しかし、それらの対象は会社管理者で、会社がそのシステムを使わない限り、社員としては何も恩惠を受けません。 だからこの記事では、管理者じゃなく労働者の立場から、自己申告
この記事はテックタッチアドベントカレンダー11日目の記事です。 テックタッチのフロントエンドエンジニアのshioriです。 エンジニアですがデザインも学びたいということで、アドベントカレンダーのアイキャッチを担当しました。アドベントカレンダーの1日ごとに窓が開いていくワクワク感を、アイキャッチで表現したいなと思いこのデザインにしました。 この記事ではクリックイベントについてお話したいと思います。 はじまり console.logでマウスイベントのログを確認すると マウスイベントの順番 要素外でマウスアップは検知されない おわり 参考文献 はじまり きっかけは、こんなコンポーネントを作ろうとしていたことから始まりました。 これはAtlassianのデザインシステムにあるInline editを参考に自前で作ったものです。 https://atlaskit.atlassian.com/pack
はじめまして、ますみです！ 本記事は、「身の回りの困りごとを楽しく解決！【PR】Works Human Intelligence」のアドベントカレンダー2日目の記事です🎄 今回は、フリーランスエンジニア向けのツールとして**「自分の稼働時間を管理するツール」**の作り方と使い方を紹介します👨💻 私自身は4年ほどフリーランスとして、受託開発やコーチングなどの業務などをしてきましたが「実際にどれくらい各案件ごとに稼働しているのか？」を把握することは非常に重要だと3年目あたりから気付き始めました。 理由としては、以下の3つです。 自分の時給単価（市場価値）を正確に把握するため。 自分のタイムリソースのマネジメントのため。 請求業務を効率化するため。 これに関しては、また別の機会に詳しく書きたいと思います！ いずれにせよ、稼働時間の管理をしっかりとしていない（もしくは全く管理していない）フ
はじめに こんにちは、GMOインサイトのR.Kと申します。 今回、初めてテックブログに投稿させていただきました。 早速本題に入っていきます。 先日、初めてGAS（Google App Script）を業務で触り、Slackと連携してみて、「あ、これはすごく便利なやつだ」と確信しました。 GASを使うと簡単な方法でBotを作成することができたので、健康維持のために始めた筋トレのモチベーションを保つために、 SlackとGoogleスプレッドシートを使った簡単なシステムを作ろうと思います。 今回作るものの概要 名前： 筋トレ管理Bot Botにやってほしいこと： ①筋トレ記録の入力促し ②筋トレ回数のスプレッドシートへの記録 ③記録完了通知 + Botからの言葉をランダムに表示 システム概要 SlackとGoogleスプレッドシートを連携させるためにはいろいろと方法がありますが、今回はSlac
実務で使った React-Hook-Form × Zod の事例紹介 - バイセル Tech Blog
はじめに こちらはバイセルテクノロジーズ Advent Calendar 2022の 24 日目の記事です。 前日の記事は田中さんの「環境構築をコマンドでまとめてみた」の記事でした。 こんにちは！ テクノロジー戦略本部 開発二部の小林です。 自分が担当したプロジェクトでは、弊社で初めてバリデーションライブラリとして Zod を使用し、React-Hook-Form × Zod の構成でフォームを作成しました。 本記事では、実際にプロジェクトで実装した事例を紹介したいと思います。 React-Hook-Form × バリデーションライブラリの技術選定に迷っている方がいましたら、ご参考になれば幸いです。 はじめに 対象読者 React-Hook-Form とは Zod とは なぜ React-Hook-Form とバリデーションライブラリを組み合わせるのか バリデーションライブラ
WEARをリノベ！Objective-CからSwiftへのリプレイス戦略でも使えるスナップショットテスト - ZOZO TECH BLOG
目次 目次 はじめに マイページ画面リプレイスに伴う課題 使用したライブラリ Objective-Cでリファレンス、Swiftでテスト リファレンス画像のファイルサイズを小さく デバイスも言語も一気にテスト 複数言語のテスト自動化 複数デバイスを一気にテストする方法 いにしえVCのためのスタブデータの用意 おわりに はじめに みなさん、こんにちは！ 松井です。普段はWEAR iOSアプリ開発で、コードを書く筋肉をパンパンに鍛えています。WEARアプリは、長い歴史を持っており、まだまだObjective-Cで書かれたレガシーなコードも居座っているんです。そんな中、私たちは地道にリファクタリングを進めています。そうしたObjective-CからSwiftへのリプレイス戦略において、スナップショットテストを活用したお話をしたいと思います。 スナップショットテストと聞くと、一般的にはコードの修正前
ReactでHooks APIが登場したのは2019年2月。現在では当たり前のように使われているHooksですが、みなさんは正しく使いこなせているでしょうか？ 本記事ではHooks APIの基本的な使い方から、注意点まで説明します。 useStateとは HooksはReactバージョン16.8で追加された新機能です。stateやライフサイクルといったReactの目玉機能を、クラスコンポーネントでなくとも使えるようになります。次のコードは、ボタンをクリックすると数値が増えるカウンターを作成するコンポーネントです。数値はReactのstate機能を使って管理されています。 import React, { useState } from "react"; export const CounterComponent = () => { // state を追加 const [count, set
しばたです。 前の記事でNext.jsを試す環境を作ったので本記事ではCloudscapeを実際に試してみます。 Cloudscape Design Systemとは？ Cloudscape Design SystemはAWSが作成しオープンソースで公開しているWEBデザインシステムです。 もともとAWSが内部向けに作成し改善していたものが今年の7月に一般公開されました。 雑に言ってしまえば「マネジメントコンソール風のUIをつくれるやつ」なんですが、デザインシステムの名の通りUIコンポーネント以外にデザインパターンやデモも公開されています。 注意事項 本記事ではこちらの手順に従い最初の一歩を試してみようと思っていました。 Using Cloudscape components ただ、手順をよく読んでみると最後の最後に、 Bundling with Next.js (optional) Th
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近Reactを始めた人向けのReact Hooks入門
Google Apps Script は、もはやエンジニアが書かない方がいいまである
値オブジェクト（Value Object）は3種類ある - パンダのプログラミングブログ
八丈島のホテルで、運用費用０円の伝票システムアプリ作って、業務改善した話。 - Qiita
より良いReactJS開発者になるための10のヒントとコツ - Qiita
ウェブ制作にも便利！React & Vueで始めるヘッドレスUI - ICS MEDIA
ドメインモデルとは(「現場で役立つシステム設計の原則」より) - Qiita
フロントエンド(React)の技術質問 - Qiita
5月の損益と再現性のあるアビトラで5000円を1億円にした話｜QASH_NFT
uGUI記述ライブラリ『Mux』を公開します - pixiv inside
技術的負債を作らないためのReact Hooks入門 - Qiita
【JavaScript】コードの見通しを良くする為に意識している事10選
Notion投稿をいい感じにSlackへ通知するGoogle Apps Scriptを公開しました｜マーティン
MSW を活用した WebAPI リグレッションテスト
喫茶店でも日経電子版を読みたい — HACK The Nikkei
仕事ですぐに使えるTypeScript - PDF版
上司に怒られない勤怠時間の自動入力方法 - KAYAC engineers' blog
マウスのクリックイベントについて語る - Techtouch Developers Blog
フリーランスエンジニア向けの稼働管理ツールを作ってみた【GAS】 - Qiita
Slackとスプレッドシートを連携して筋トレ管理をする
React Hooks入門 - ICS MEDIA
Next.jsでCloudscape Design Systemを試してみた | DevelopersIO