Playwright を使いこなすためのベストプラクティス - Qiita
はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。 テストの独立性を高める 可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、 １つのテストが失敗しても他のテストに影響しない テストの順序を考慮する必要がない テストをシンプルに保つことができる あたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after
WSL2の仮想ハードディスクvhdxファイルを移動する - Qiita
はじめに Zybo-Z7の開発環境としてWindows版のVivadoとVitis、WSL2のUbuntu（18.04.6 LTS）にPetaLinux、Linux版のVivdoとVitisをインストールしたら、465GBのC:ドライブの空き容量が心ものなくなってしまったので、WSL2の仮想ハードディスクファイル（vhdxファイル）をD:ドライブに移動した。 やり方としては、 ディストリビューションを別領域に複製後、元のディストリビューションを削除 ディストリビューションをexportし、ディストリビューションを削除、そして、exportしたファイルをimport の２つあるので、それぞれをやってみた。 準備 起動中のUbuntuを終了する exitでWindowsターミナルを閉じただけでは、Running状態のままなので、wsl --shutdown か wsl --terminate
開発環境をmacからwindowsへ移行 - Qiita
はじめに 自分はフリーランスエンジニアとして約2年間macで開発をしていました。先日初めてwindowsへの移行を試し、結果問題ありませんでした。本記事では移行した理由、感想、windowsの開発環境などを紹介します。 筆者の状況としては以下になります。 2年間macを使用しておりwindowsは未使用 開発分野：webアプリのフロントエンド・バックエンド 主な使用言語：js・ts・go・php 移行した理由 使用していたm1 macの性能不足を感じた macの値段が高い pcでゲームもしたい ①使用していたm1 macの性能不足を感じた スペックは以下です CPU：m1 メモリ：16GB ストレージ：256GB 案件にてNext.jsとgoを使用しています。このプロジェクトでエディタが数秒間フリーズしたり、goのビルドで5分ほどかかっておりストレスでした、、、CPUがフル回転するのが頻繁
【React】ライブラリの《ステート系機能》と《手続き的取得機能》を区別しよう - Qiita
React Hook Form の場合 いきなりですが、下のコードを見てください。 「姓」と「名」の入力フィールドがあって、その下にある「ちゃんと再計算される氏名」に続いて姓と名をつなげた文字列が出力されます。 「ちゃんと再計算される氏名」は、姓および名を入力するたびにキチンと更新されます。 "use client"; import { type FC } from "react"; import { useForm } from "react-hook-form"; type ProfileFormValues = { familyName: string; personalName: string; }; const ProfileEditPage: FC = () => { const { watch, // // getValues, register, handleSubmit,
AutoHotKey v2 を使って WindowsでmacOSのEmacs風キーバインドを設定する - Qiita
macOSからWindowsにPCを切り替えた時に一番苦労したのがキーバインドだったので、慣れ親しんだEmacs風キーバインドをAutoHotKeyで設定したのでメモ v1.1はdeprecatedになっているので、v2.0を使用します。 以下が作成した設定ファイル（スクリプト）になります。AltキーをOptionキーのようにも使いたかったので、一部Emacsとは関係ない設定も混ざっています。 また、set_ignore_applications()で除外したいアプリケーションを指定しています。 対象アプリケーションの情報を調べるには Windows Spy を利用します。 タスクトレイにあるAutoHotKeyのアイコンを右クリックをし、Window Spyを選択 対象のアプリケーションをマウスでフォーカス（Activeに）して情報を確認 set_ignore_applications(
findコマンドの使い方を簡単に理解するための7つのルール＋実践的な知識 - Qiita
はじめに find コマンドの使い方は、ざっくり調べただけではよくわからんとなりますが、見逃しがちなルールを知れば簡単に理解できます。find コマンドに限りませんが使い方を調べるのが面倒だからと曖昧な理解で使うと逆にもっと分からなくなって時間がかかります。急がば回れ、理解して正しく使ったほうがシンプルで楽で簡単です。この記事では find コマンドの使い方を理解するために必要なルールと使い方の実践的な知識をまとめました。 Q&A（？）: -type や -perm の説明はしないの？ ⇒ それらはドキュメントを読むか検索すればすぐにわかることで難しいポイントではありません。重要なのは基本のルールを理解することです。 関連記事 POSIX 準拠のシェルスクリプトでは find | xargs よりも find -exec {} + を使うべき！ 移植性の話はこちら ⇒ findコマンドのオ
【TypeScript】超実践的テクニック集【Reactなし】 - Qiita
はじめに この記事はニジボックスQiita記事投稿リレーの2日目の記事です🌈 TypeScript（Reactなし）のフロントエンド実務現場で1年半ほど業務してきたうえで、頻繁に使うTypeScriptのテクニック（tipsレベルですが）をまとめていきます。タイトルはちょい盛りです。 手続き型でDOMを直接ゴリゴリいじくるイベント駆動のスタイルで、いわゆるモダンフロントな現場ではないという点、あらかじめご承知おきください。 1. 自分で定義した型に型ガードする 1-1. ユーザー定義型ガードについて TypeScriptではtypeof、instanceof、inなどの演算子を用いて変数を型ガードできますが、これらの演算子では自分で定義した型へは型ガードすることができません。 type Hoge = "hoge" | "fuga"; const attr = document.query
【コード品質】綺麗なReactコード 応用７例 - Qiita
初めに Reactの実装ドキュメントやライブラリは充実している 要件通り動くだけのコードを作ることは誰でもできるが、保守運用改善は大変である 綺麗なコードほどコード修正は早くなり、デバックは効率的になり、開発者間の認識の共有は楽になる 前提 基本: 数行レベルで綺麗なコードが書けること 中級: コンポーネント単位で綺麗なコードが書けること 1. 無駄なアルゴリズムの適応はするな 問題提起されてない箇所に勝手に適応していないか? ベンチマークが数段高くても、ユーザ体験的には誤差でないか？ // NG🤔 制御フローの理解，例外ケースの確認，一定時間要してしまう const sumArray = (numbers: number[]): number => { let sum = 0; for (let i = 0, j = numbers.length - 1; i < j; i++, j-
React UI ライブラリ『Mantine』の使い方 - Qiita
この記事について この記事では React UI ライブラリ Mantine の基本的な使い方について紹介します。 その他、Tailwind CSS と合わせて使う方法についても記載します。 Mantine の特徴 100種類以上のカスタマイズ可能なコンポーネント 50以上の便利なフック TypeScript ベース Next.js、Remix などのモダンフレームワークをサポート ダークテーマ対応 スタイルを上書き可能 柔軟なテーマ設定 メンテナ・コミュニティによって構築された豊富なサンプル集 (執筆時点で134種類) (個人的に) デフォルトのデザインが美しく、ドキュメントが見やすい また、スター数は直近3ヶ月で3000近く増えており、リリース速度も速く勢いがあります。 サンプルとして簡単な TODO アプリを作ってみましたが、とても使いやすい印象でした。 https://mantin
React Hooksを使う上で意識したいことまとめ - Qiita
はじめに Reactに関して最低限意識したいけどできてなかったなと思うところがあったので、 わかりやすいと感じた記事を参考に自分なりに噛み砕き、この１記事にまとめました。 useStateの使い方に注意する 上記の記事がとてもわかりやすく、すごい学びになりました！ 参考記事から学びになった部分を項目ごとにピックアップして書いていきます。 関連する状態はまとめることを検討する よくあるパターンでは、ログイン情報などだと思っています。 例えば、ログインにはemailとpasswordがセットでログインするのはあるあるですよね。 なので、以下のようになりますね！ ↓書き換え前 const [email, setEmail] = useState("") const [password, setPassword] = useState("") const handleChangeEmail = (
そのファイル、本当に hooks/・utils/ に入れるんですか？ ―― React プロジェクトを蝕む「見かけ駆動パッケージング」 - Qiita
そのファイル、本当に hooks/・utils/ に入れるんですか？ ―― React プロジェクトを蝕む「見かけ駆動パッケージング」設計アンチパターンReact 結論 (2023/06/03 追記) React の開発においては、 コロケーション Co-location の原則に従って、ファイルをディレクトリごとに分類しましょう。チームメイトや将来の自分にとって分かりやすいコードベースになります。 スキット「書くときは楽だけど...」 == 某日 == 太郎くんの今日のタスクは、「トーストを作る」です。 イメージ図 太郎くん 「コンポーネントを作るから..」 「ファイルの場所は components/Toast.tsxでええか。」 「useState でローカルに状態管理して、表示を切り替えればええやろ。」 太郎くん「ヨシ！」 この記事は、拙スクラップの一項目をモノローグ形式で分かりやす
【PHP8.1】PHP8.1の新機能 - Qiita
PHP8.2 / PHP8.1 / PHP8.0 / PHP7.4 2021/11/26にリリースされました 2021/07/20、PHP8.1がフィーチャーフリーズしました。 言語機能に関わるような機能の追加・変更が締め切られたということです。 今後はデバッグを繰り返しながら完成度を高めていき、2021/11/25にPHP8.1.0がリリースされる予定です。 というわけでPHP8.1で実装されるRFCを見てみましょう。 RFC Fibers 賛成50反対14で受理。 Fiberです。 PHPで非同期コードを書けるようになります。 $fiber = new Fiber(function (): void { $value = Fiber::suspend('fiber'); echo "レジュームした。$value: ", $value, "\n"; }); $value = $fiber
Dockerfileのベストプラクティス - Qiita
業務やプライベートでのハンズオンを通して得た知見を元に、dockerfileの実践的な書き方を記載いたしました。 軽量なdocker imageを作る観点とセキュリティーの観点を踏まえた内容になっております。なにか付け足す点などあればコメントいただければと思います。 軽量なimageを作る観点 軽量なimageの使用 Dockerfileでimageを指定する際に、軽量なimageを使用することが進めれている。 docker docsでも代表的な軽量なimageのalpineをおすすめしている。 Whenever possible, use current official images as the basis for your images. We recommend the Alpine image as it is tightly controlled and small in s
Keychron K1キーボードが持つ矛盾 (+ 個人的ベストキーボード考察) - Qiita
注意: - Keychron K1に対してかなり厳しい評価となってるので、本製品が大好きは人は読まない方がいいかもしれません。 - 指摘してる矛盾点の感じ方は個人差があると思います。 Keychron K1とは、Keychronが販売している薄型キースイッチを採用しているメカニカルキーボードです。 標準的な英語テンキーレスキーボード 有線/無線対応 有線はUSB Type-C 無線はBluetooth5.1対応 (最大3台の登録、切り替えが可能) Windows, Mac, Android, iOSに対応 赤軸、茶軸、青軸のキースイッチを選択可能 大容量バッテリ、USB Type-C接続 LED対応 (オプションにより白色、RGBを選択可能) 最近は日本にもクラウドファンディング経由で進出しており、そのデザイン、機能性を理由に注目してる人もそこそこいると思います。 私自身は普段はNiZ P
Golang - Dockerfileの最小構成 - Qiita
本番環境で動くGoアプリのためのミニマルdockerfileを記す。 実行ファイルが、軽量でセキュアなscratchイメージ上で動く go.modとgo.sumに従って、バージョン込みの依存パッケージをインストールする 依存パッケージに変更がなければ、再ビルド時のインストールにはキャッシュが使われる FROM golang:1.14.4 as builder WORKDIR /go/src COPY go.mod go.sum ./ RUN go mod download COPY ./main.go ./ ARG CGO_ENABLED=0 ARG GOOS=linux ARG GOARCH=amd64 RUN go build \ -o /go/bin/main \ -ldflags '-s -w' FROM scratch as runner COPY --from=builder
シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita
開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で
VSCode に必ず入れておきたい拡張機能 - Qiita
普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 VSCode 関連記事 VSCode の初期設定 拡張機能の探し方 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popular: 最も人気のある拡張機能 Recently Added: 最近追加された拡張機能 まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください 基本 Material Theme VSCodeの数あるテーマの中の一つです。 歯車のアイ
【古い情報】Vue+TypeScriptをESLint+Prettierでなるべくコンパクトな設定でLint+整形する - Qiita
警告 この記事の情報は現時点では古くなっています。 ESLintとPrettierを組み合わせる場合、別の記事を参考にしてください。 例： Prettierの導入とESLintとの併用について 経緯については以下を参考にしてください。 Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった Vue+TypeScriptを使用したソースコードに対しESLintとPrettierを適用するにあたり、ESLint関連のパッケージそれぞれがどのような役割を持っているか調べてみると思ったよりもコンパクトな内容(plugins,parser,parserOptionsなどは指定しなくても大丈夫)でLint+整形が出来ることを確認できたため、最終的に確認できた設定と調べた内容を共有します。 動作確認はVSCodeで行っています。 事前に準備が必要なもの Vue3
Go1.16からは go get は使わず go install を使おう - Qiita
この記事はGo Advent Calendar 2020 16日目の代打記事です。奇しくも16日目にGo1.16の話をすることになりました。 【追記】タイトル改題しました 状況が落ち着いてだいぶ経ったのと、未だに多くの方にこの記事を見ていただけていることから、Go1.16での変更というより、今を生きる私達がどうすればいいか、という点にフォーカスしたタイトルに改題しました。本文に変更はありません。一応注記すると、go get が廃止になったわけではなく、普段の開発フローで使うことはまずなくなった、という意味です。（一通り読んでいただければお分かりいただけるかと。） 【追記】Go1.18について ついに待望のGo1.18がリリースされましたね！ https://go.dev/doc/go1.18#go-command そして予告通り go get によるインストール機能は削除されました。どうし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LOCAL環境でHTTPSが必要なときはlocal-ssl-proxyが便利 - Qiita
