はじめに 最近「単体テストの考え方/使い方」を読みました。 普段フロントエンドエンジニアとして実装をしている中で、自分が作っている単体テストについての言語化をサポートしてくれました。 この記事では、フォーム UI の実装を通して、コンポーネントに対する効果的な単体テストについて考察し、具体的なテストの書き進め方の一例を提示してみます。 最終的な成果物 この記事で実装するフォーム UI の最終的な成果物は codesandbox で確認できるようにしています。右のペインの「Tests」をクリックするとテストも実行できます。 注意 この記事は「単体テストの考え方/使い方」(以下、本書)の内容に触れていますが、読んでいなくても理解できるように補足をしているつもりです。それぞれのトピックで、文中に本書の該当ページの番号を「(p123)」のように表示しています(いずれも初版のものです)。 react
1Passwordを使って、ローカルにファイル(~/.configや.env)として置かれてる生のパスワードなどを削除した 最近、コミットはされないがローカルのディレクトリに置かれている.envのようなファイルから生のパスワードやAPI Tokenを削除しました。 これは、ローカルでマルウェアを実行した場合に、ローカルに置かれている生のパスワードやAPI Tokenを盗まれる可能性があるためです。 最近は、npm install時のpostinstallでのデータを盗むようなマルウェアを仕込んだりするソフトウェアサプライチェーン攻撃が多様化しています。 Compromised PyTorch-nightly dependency chain between December 25th and December 30th, 2022. | PyTorch What’s Really Goin
今活用しているツールを紹介 古川陽介氏(以下、古川):今、具体的にいくつかツールや考え方が出てきました。今聞いているみなさんはおそらく、「じゃあ、どれを使ったらいいんだろう?」とか「何をしたらいいんだろう?」となっているかもしれないですが、倉見さんにお聞きします。ずばり私たちは今何をやっているでしょうかというところで。例えば……。 倉見洋輔氏(以下、倉見):すごく話を誘導されている感もありますが(笑)。 古川:そうですね(笑)。誘導しているんだけど。 例えば、先ほど言っていたHTMLとかそういうのをスナップショットでテストしているとか、もしくは、見た目の部分でテストをしているとか、そういうところでどういうことをやっていますかと聞いてもいいですか? 倉見:宣伝の場をいただきありがとうございます(笑)。特に見た目に関する層のテストではいくつか活用しているツールがあります。 1つはやはり、「St
ソシム社からまたまた、勉強になる面白いデザイン書が発売です! 今回はWebデザインや紙のデザイン、そしてイラストや写真にも使える、構図を使ってデザインするときのテクニックやポイントを解説した「最強構図」。 「けっきょく、よはく。」「ほんとに、フォント。」の著者ingectar-eが生み出したデザインの新セオリーが、分かりやすく解説されています。 デザインはセンスではなく、知識です! 本書は、本日(1/26)発売されたばかり! 手に取ると最初に、表紙の洗練された美しいゴールドに感動すると思います。画像で見るよりはるかに美しい金です! 「最強構図」の4文字とその下にある黄金螺旋、ワクワク感が溢れる表紙ですね。もちろん、中身もその期待を裏切らない、いや期待以上の内容でした。
Speaker Deck This deck requires a password Password
Forkwell Library #14 2023.1.25 のスライドです。 https://forkwell.connpass.com/event/271212/
株式会社SODAの社内勉強会で使用した資料です こちらは株式会社SODAのエンジニア社内勉強会にて @decoch が発表したときの資料です。 株式会社SODAについては以下リンクなどをご覧ください。 これはなに? いま流行りの Notion を使っている方は多いと思うのですが、いまいち使いこなせていない、メモ帳としては使っているけどデータベースってなに? というエンジニアの方向けに Notion の使い方を書いた入門記事です。 Notion とは notion.so からお借りしました ドキュメントやテーブルだけでなく望み通りに機能するようにカスタマイズできるワークスペースです。 基本的な使い方 新しくページを作りメモをとったりチェックボックスでタスクを管理したり、Markdown のように使うことができます。 / と打つことでサジェストされ /page と入力し決定をすると新しいページ
PHPのstringは任意のバイト列を扱えますが、JavaScript/JSONはUnicodeで扱える文字しか扱えません PHPのint / floatはプラットフォーム依存ですが、JavaScriptのnumberは整数と小数を型レベルで区別しません JSONのarrayに対応する型はPHPのarrayのうちリストであるものです PHPは配列(リスト)と連想配列を型レベルで区別せず、どちらもarrayです リストはキーが0からの抜けがない連番になっている要素が0個以上の配列です array_is_list()関数で連想配列とリストを判別できます array_values()で連想配列をリストに変換できます array_filter()の結果はフィルタされたキーがスキップされるのでリストではありませんが、結果をarray_values()に通すことでリストにできます JsonSerial
メリークリスマス! 週末もPHPを楽しんでますか? ところでWebセキュリティはWebアプリケーションを公開する上で基礎中の基礎ですよね! メジャーな脆弱性を作り込まないことはWeb開発においては専門技術ではなく、プロとしての基本です。 中でもXSS (Cross-Site Scriptingクロスサイトスクリプティング)やインジェクションについての考慮は常に絶対に欠いてはならないものです。 現実にはプログラミングには自動車のような運転免許制度がないため、自動車学校に通わず独学で公道に出ることができてしまいます。つまりは基礎知識がないままにWebプログラマとして就職したり、フリーランスとして案件を請けることも現実には罷り通っています。それは一時停止標識も赤信号も知らずにタクシー営業しているようなものです。 このような事情により、体系的な理解のないWeb開発初心者は (時にはn年のキャリアを
はじめに こちらはバイセルテクノロジーズ Advent Calendar 2022の 24 日目の記事です。 前日の記事は田中さんの「環境構築をコマンドでまとめてみた」の記事でした。 こんにちは! テクノロジー戦略本部 開発二部の小林です。 自分が担当したプロジェクトでは、弊社で初めてバリデーションライブラリとして Zod を使用し、React-Hook-Form × Zod の構成でフォームを作成しました。 本記事では、実際にプロジェクトで実装した事例を紹介したいと思います。 React-Hook-Form × バリデーションライブラリの技術選定に迷っている方がいましたら、ご参考になれば幸いです。 はじめに 対象読者 React-Hook-Form とは Zod とは なぜ React-Hook-Form とバリデーションライブラリを組み合わせるのか バリデーションライブラ
(2024/06/21追記) 本記事のアップデート版を弊社技術ブログに投稿しました。 Tipsの追加に加え、既存Tipsの内容も更新していますので、よろしければご確認ください。 はじめに 皆さん、docker composeを利用しているでしょうか? 複数のdockerコンテナをまとめて立ち上げたり、環境変数を定義できたり便利ですよね。 今回はある程度docker composeを利用している方向けに私が便利、便利そうと感じたdocker composeの機能を挙げてみました。 docker compose cli v2を利用 docker-composeではなく docker composeコマンドも利用可能になってます。 Docker Desktopでは v3.4.0から利用可能で、基本的にはコマンドの互換性あります。 Docker image名やコンテナ名のプレフィックスをディレクト
門脇 敦司/ Atsushi @at_sushi_ Knowledge Sense, Inc. CEO ← 東大 / エンタープライズ向け生成AIプロダクトで成長中のスタートアップ(2019年~) / ソフトウェアエンジニアを募集中(800万円~+SO)→DM開放中 / 好きな言葉は「実験と学習」/ 最新の生成AI 事情に少し詳しいです https://t.co/PwBZaT31cB 門脇 敦司/ Atsushi @at_sushi_ 1/ GitHub 元CTO「マイクロサービスにしたことがアーキテクチャ上の最大のミスだった」 (※少しマニアックな内容ですが、個人的には面白いと感じたので載せます→) twitter.com/jasoncwarner/s… 2022-11-16 09:20:18 Jason Warner @jasoncwarner I'm convinced that o
こんにちは、フロントエンドエキスパートチームの @mugi_unoです! kintone では フロントエンドの刷新プロジェクト(通称フロリア)が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に書いています。 テストを書くことに不慣れなメンバーもいるため、日々 Pull Request 上でのレビューやペア・モブ作業を通じて、知見の共有が行われています。今回はフロントエンド刷新のテストを書いてきた中から、筆者が有用だと感じた知見やノウハウを紹介したいと思います。 目次 💡「実はそれ最初からパスしてるかもしれない」 期待する操作で期待する結果になることを厳密に検証する 他のテストケースによって前提条件を担保する 💡「テストコード上のロジッ
2024/04/17: 更新 内容を更新した記事を書きましたので、よかったらこちらも併せて、ご覧ください。 zenn.dev こんにちは!フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト(フロリア)では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考
背景 私たちは中核人材育成プログラム 第5期受講生として、1年間にわたり様々な講義を受け、演習を実施してきました。その過程で、変化し続けるサイバーセキュリティの世界では、世界中の情報を的確に収集し成長を続けることが大事であることを学びました。 世界中の情報を利用するためには英語の力、中でもリーディングの力が不可欠です。しかし、私たち日本のセキュリティエンジニアの多くは英語に苦手意識を持っており、的確な情報活用ができていないのが現状です。 本プロジェクトは、日本のセキュリティエンジニアの情報収集力・成長力レベルアップのため、その手段としての英語リーディングの意欲・能力向上を目指して企画されました。実務や学習にお役立ていただければ幸いです。 想定利用者 日本語話者のセキュリティエンジニア全般ですが、中でも「ユーザー企業や官公庁で働く実務担当者」を主なターゲットとしています。「英語はちょっと……
はじめに こんにちは。株式会社Flatt Security セキュリティエンジニアの石川です。 本稿では、ログイン機能をもつWebアプリケーションにおける実装上の注意を、マイページ機能から派生する機能のセキュリティ観点から記載していきます。特に、XSS(Cross-Site Scripting)やSQLインジェクションのような典型的な脆弱性と比較して語られることの少ない「仕様の脆弱性」にフォーカスしていきます。 これから述べる実装上の注意点は、実際にはマイページ機能であるかどうかに関係なく注意するべきです。 しかし、開発者の視点に立つと「これこれの機能にはどのようなセキュリティ観点があるか」という形が読みやすく、また他の機能の仕様のセキュリティを考える上で想像力を働かせやすいものになるのではないでしょうか。 また、株式会社Flatt Securityではお客様のプロダクトに脆弱性がないか専
はじめに スタンフォード大学の John Ousterhout 教授が執筆された “A Philosophy of Software Design”(以下 APoSD と略す) という書籍をご存じでしょうか? 書籍のタイトルを直訳すると、「ソフトウェア設計の哲学」となります。書籍の内容はまさに、ソフトウェア設計について扱っています。 本書籍をベースに、「A Philosophy of Software Design を30分でざっと理解する」というお題で社内ランチ勉強会が開催されました。本記事執筆者である岩瀬(@iwashi86)が発表者であり、勉強会資料は以下のとおりです。 スライド P.4 に記載したとおり、本書籍は John Ousterhout 教授の意見が強く反映されており、ソフトウェアエンジニアであれば、議論を呼ぶ箇所があります。実際、勉強会の実況Slackでは、「これはどうな
ウェブブラウザはネットワークから様々なリソースを集め、それらを処理して組み合わせてウェブページをレンダリングします。リソースが揃わないとレンダリングできないので、この一連の処理のどこかが遅れるとページの表示も遅くなります。レンダリングをすみやかに開始できるようにウェブブラウザはリソースの取得やその処理を最適化するための API を提供しています。本記事ではそれらを網羅的に紹介し、ウェブアプリの性能改善を図る上でどのようなブラウザ機能が使えるのかを知ってもらうことを目的としています。各機能の具体的な適用事例については他の記事に委ねます。 本記事の内容は記事公開時点での情報に基づいており、閲覧時点では既に古くなっている可能性があります。最新の正確な情報は一次情報源を参照してください。また特定のブラウザ実装について言及する場合は、断りがない限り Chrome を想定しています。誤りや補足、質問な
こんにちは、樋口直哉です。 作家として文章を書いたり、料理家として料理をつくることを仕事にしているせいか、時々「おいしい料理をつくるために一番、大事なことはなんですか?」と聞かれることがあります。 「上質な食材を選び、注意深く料理をすること」というような当たり前のアドバイスしかできませんが、強いてひとつだけ料理のポイントをあげるなら「塩を適切に使いこなすこと」になるでしょう。 塩は原始的な調味料で、ほぼすべての料理に使われます。人間には5つの基本的な味覚(塩味、甘味、苦味、酸味、うま味)がありますが、塩味を持つ物質は塩だけです。そして、塩はおいしくて、まずいもの。適切な量の塩を使えば料理はおいしくなりますが、入れ過ぎると食べられないからです。 塩には食べ物の風味を強くしたり、苦みを抑えたりする働きもあります。試しに苦いコーヒーに塩をひとつまみ入れてみると、苦みが緩和されることが実感できるで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く