タグ

ブックマーク / zenn.dev/seya (4)

  • ローコードテスト自動化ツールの mabl がすごい

    というのを使っていて思ったのでレポを書いていきます。 mabl とは - 基的な機能 ざっくり言うと E2E テストをお手軽にメンテできるツールです。 こんな感じでポチポチ画面を操作していくと、それで実行したアクション(ボタンやリンクをクリックするなど)を自動で記録してくれて、E2E のテストを作成することが出来ます。 コードを書かずに E2E テストをサクッと作れちゃうのが魅力な訳ですが、それだけではありません。そんなすごいところを紹介していこうと思います。 mabl のここがすごい Auto Healing 何やら回復魔法みたいな感じでかっこいいですが、何かというと E2E テストがコケるようになった時に自動で修復してくれる機能です。 例えばボタンの位置が変わってしまっても、同じ文脈であろうボタンを自動で探して修復したりしてくれます。 E2E での辛さといえば、やはりテストのメンテナ

    ローコードテスト自動化ツールの mabl がすごい
  • SQLが重いときに見るお気軽チューニング方法

    SQLのチューニング方法 昔Qiitaで書いたものをzennうつして、若干の修正、追加をしてみました。 ORACLEでの経験を元に書いていますがコストベースのリレーショナルデータべースなら大体共通の考え方だと思うので他にも使えると思います。 SQLのチューニングといえば比較的容易に済むインデックスをとりあえず作成する。といった対応を取られがちですが、数万レコード程度でのデータ量ではあまり効き目がなく(自分の経験則)、どちらかといえば、結合順が大幅に狂ってたりすることが原因のことが多かったりします。よって当にインデックスがないことが原因なのか?を熟考する必要があります。(例えばID以外のフラグとかコードに単項目indexを貼ってるのもみたことがあります。怖いけど実話) また、インデックスを作りすぎるとオプティマイザが狂いやすくなって他のSQLにも悪影響を及ぼしたりするので結構熟慮して追加

    SQLが重いときに見るお気軽チューニング方法
  • 一番文句言われなさそうな React コンポーネントの書き方

    最近 React コード生成機を作っていて「一番文句言われなさそうな React コンポーネントの書き方ってなんだ…?」と改めて疑問に思ったので考えてみました。 結論から言うと以下の形をデフォルトにするのが良さそうかなと思いました。 function vs. アロー関数 -> アロー関数 型は基的に VFC でつけて、 children が欲しい場合は明示的に props に追加する return を省略可能な時省略するか -> しない props を destructure するか -> しない派だったけどした方がいい気がしてきた const Hoge: React.VFC<Props> = ({ title }) => { return ( <Fuga title={title} /> ) } ちなみにですが、大事な前提として TypeScript を使うことを前提としています。(型

    一番文句言われなさそうな React コンポーネントの書き方
  • 新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜

    CSSで三角を作る方法と言えば border でした。 私も三角を作りたい時は 「css 三角」 で検索、コピペして調整して作っていました。 ですが最近 clip-path というプロパティによってより分かりやすく三角が作れることを知ったので共有いたします。 ちなみに IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。 clip-path を使った三角の作り方 こう CSS を書くと .sankaku { background-color: blue; width: 16px; height: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); } こうなります。 どこの点を結ぶかは clip-path で指定して、高さと

    新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜
  • 1