タグ

carolina04のブックマーク (933)

  • 【読書】Unit Testing Principles, Practices, and Patterns

    【読書】Unit Testing Principles, Practices, and Patterns 感想 「テストは分類器」であるととらえ、混同行列における偽陽性を取り除くことが、単体テストで注力すべき柱であるという視点が得られたのが大きい。偽陰性を出さないことも重要ではあるが、プロジェクトの持続的な成長の観点からは偽陽性を出さないようなテストを書くことが最も重要である、と意識するだけでもテストの書き方は変わる。どうすればそのようなテストを書けるのか？という疑問にも答えが示されている。 数学的な背景のある著者は、プログラミングのガイドラインは数学的な定理と同様に第一原理から導出されるべきであるとの立場に立っており、本書は一貫して根本的な問いから徐々に論拠を構築して、最終的な結論に至るようなボトムアップ式の展開となっており、非常に理解しやすく腑落ちするところが多かった。 単体テストや統

    【読書】Unit Testing Principles, Practices, and Patterns

  • UIコンポーネントの大きさは外から制御しよう - Qiita

    昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P

    UIコンポーネントの大きさは外から制御しよう - Qiita
    carolina04
    carolina04 2024/07/03
    “基本的には2択で「完全に大きさ固定」か「親からの影響に従う」です”
    リンク

  • ドラッカー風エクササイズでチームを安全な状態にする - hacomono TECH BLOG


    はじめに こんにちは。hacomono UX部エンジニアのyasuです。 今年の3月からUX部とリアーキテクチャ&イネーブルメント部が連携し、フロントエンドの開発基盤を刷新するために発足した新プロジェクトにおいて﹁ドラッカー風エクササイズ﹂と呼ばれるチームビルディングを実施したので、実施に至るまでの背景や成果などをお伝えしたいと思います。 ドラッカー風エクササイズとは？ 自分の強みを活かすための方法や時間の有効活用など、経営学者のピーター・ドラッカーの思想や理論をベースに﹃アジャイルサムライ﹄の筆者が提唱したチームビルディングの手法の一つです。 次の4つの質問に回答する形で相互理解を深め、メンバー間の期待値を明らかにします。 自分は何が得意なのか？ 自分はどうやって貢献するつもりか？ 自分が大切に思う価値は何か？ チームメンバーは自分にどんな成果を期待していると思うか？ 各質問の意図などは
    ドラッカー風エクササイズでチームを安全な状態にする - hacomono TECH BLOG

  • Total Gym ELEVATE Encompass™

  • 生成AI時代のフロントエンド開発術


    2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
    生成AI時代のフロントエンド開発術

  • Nuxt3のLinterは Nuxt ESLint で整備する (マイグレーションあり)


    はじめに こんにちは、がんがんです。 2024年4月、NuxtからNuxt ESLintというモジュールが公開されました。Nuxtユーザー待望のAll-in-one ESLintモジュールです。 本モジュールの登場によりNuxtにおけるリンターの設定方法が大きく変わりました。 本記事ではNuxt ESLintを用いたマイグレーションを中心に新しいNuxt ESLintをセットアップしていきます。Nuxt ESLint とはNuxt ESLintはAll-in-one ESLint integration for Nuxtと公式ドキュメントに記載がある通り、NuxtユーザーのためのAll-in-oneモジュールです。 今までのNuxtユーザーは Nuxt3でESLintを使う場合、どれがNuxt公式のルールだろうNuxtでESLint Flat Configはどうすれば良い？nuxt
    Nuxt3のLinterは Nuxt ESLint で整備する (マイグレーションあり)

  • TypeScriptのパフォーマンス改善


    2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマンスの最適化が不可欠です。コンパイル速度を上げることでビルド時間やテスト実行時間の削減を行うことができます。今回の発表では、TypeScriptのコンパイルパフォーマンスを改善するための具体的な手法とその背後にある理論をいくつか紹介します。 ◎内容 1. TypeScriptのパフォーマンスとは何か、そしてなぜそれが重要なのか 2. コンパイル速度を改善するための具体的な手法とその背後にある理論 本資料で紹介している内容については以下の記事で詳しく記載していますので合わせて参照していただければと思いま
    TypeScriptのパフォーマンス改善

  • React HooksとVue Composition APIの比較


    概要 Vueの作者であるEvan You氏は、Vueのデフォルトバージョンが2022年2月7日以降3.x系に切り替わる事を開発者ブログにおいて発表しました。 それに伴い、Vue2.x系の最後のマイナーバージョンであるVue2.7が2022年7月1日にリリースされ、こちらの LTS (long-term support)はリリースから18ヶ月であることから、Vue2.x系へのサポートは2023年12月を持って完全に打ち切られる事となりました。 以下の記事でも語られている通りVue2とVue3では破壊的変更が多く、移行コストが格段に高いことから、多くの開発チームがVue３.x系への移行を頑張るかReact等の他のフレームワークへの乗り換えをするかの選択を迫られています。 3.x系へ移行すべきかフレームワークを乗り換えるべきかの是非についてはこの記事では触れませんが、Vueの破壊的変更に伴って多
    React HooksとVue Composition APIの比較
    carolina04
    carolina04 2024/05/11
    React HooksとComposition APIは根本的に全く異なるAPIであり、筆者もそれに同意します。 その最大の相違点は、状態をMutableに管理するかImmutableに管理するか、という点です。
    リンク

  • Yahoo! 知恵袋フロントエンドをリアーキテクトしている話

    Yahoo! 知恵袋のフロントエンドには26000行を超えるユニットテスト(1つのcontrollerのユニットテスト)や、多くのロジックを含むcontrollerがあります。これらによって追加実装・保守が難しい状況です。この問題を解決するために、リアーキテクトを行いました。以下について主に話そうと思っています。 ・リアーキテクトで取り組んだこと ・リアーキテクトの結果・学び・反省点

    Yahoo! 知恵袋フロントエンドをリアーキテクトしている話

  • ブレーンストーミングとＫＪ法

    carolina04
    carolina04 2024/04/04
    “＜良い「１行見出し」の例＞ アルバイトやサークルで学生は忙しい 大学の講義は退屈だ 大学の講義は役立たない 大学での勉強は就職活動で重視されない”
    リンク

  • エンジニア基礎 ウィルゲート2024年度エンジニア新卒研修

    ▼この研修についてのテックブログ記事 https://tech.willgate.co.jp/entry/2024/04/01/184252 ▼補足 株式会社ウィルゲート 2024年度エンジニア新卒研修「エンジニア基礎」の資料です。 実際に研修で使用したものを加筆修正して外部公開しています。 ▼研修を実演するイベントが開催されました 2024/4/15 18:30〜『エンジニア基礎 - 話題の新卒向け研修実演』 https://forkwell.connpass.com/event/315283/ YouTube Live アーカイブ https://www.youtube.com/watch?v=VidNzvmlbvE

    エンジニア基礎 ウィルゲート2024年度エンジニア新卒研修

  • v-if で表示・非表示を切り替える | Vue3 Hands-on


    v-if で表示・非表示を切り替える ​本章の概要とゴール ​購入しようと思った商品が売り切れで購入できないと、せっかく購入しようとしたユーザーをがっかりさせてしまいます。 本章では、v-if ディレクティブを使って売り切れの商品は非表示にするようプログラムを改修していきます。 本章を実践すると、特定の条件の時だけ HTML を表示させることができるようになり、v-if の使い方が理解できます。 v-if の書き方 ​Vue.js では特定の条件の時だけ DOM を生成し表示できる、v-if というディレクティブが用意されています。以下のように、表示・非表示を制御したい DOM 要素に v-if を追加します。v-if の値が true の場合は表示され、 false の場合は表示されません。 html<!-- 表示される --> <div v-if="true">something</d
    carolina04
    carolina04 2024/04/03
    “v-if と v-for を同時に使うことは推奨されていません。なぜなら、同じ要素において v-for は v-if より優先度が高く v-if の評価に関わらず v-for の表示処理が行われるためです。以下の例のように、別の要素に分けること”
    リンク

  • Nuxt2からNuxt3へ！段階的に移行する手順と注意点

    サービス運営や機能開発を止めずにNuxt2からNuxt3へ段階的に移行する手順と注意点について説明します。 Nuxt2のEOL(End Of Life)は2024年6月30日に延期されたため、まだ移行に猶予がありますが、Vue2は2023年12月31日でEOLを迎えたので、Vue2のライブラリは今後バグやセキュリティの不具合がサポートがされなくなるおそれがあります。今のうちに移行しておきましょう。

    Nuxt2からNuxt3へ！段階的に移行する手順と注意点

  • 【Nuxt.js】Nuxt2とNuxt3の違い｜Flutterラボ


    Nuxt.jsはVue.jsをベースにしたフレームワークですが、バージョンが上がったことでどのように変わったのか簡単にまとめておきます。 Vue.jsのバージョンNuxt2はVue2をベースにしていましたが、Nuxt3ではVue3をベースにしています。 コンポジションAPINuxt2では、コンポジションAPIをVue2に追加するための別途プラグインが必要でしたが、Nuxt3では、Vue3にもともと組み込まれているため、デフォルトで使用できます。ViteのサポートNuxt2では、Webpackをビルドツールとして使用していましたが、Nuxt3は、ViteとWebpackの両方をサポートしています。Viteによって、開発時のホットリロードと、ビルドのパフォーマンス向上が期待できます。Nuxt NitroNuxt2では、Nuxt Nitroをサポートしていませんでしたが、Nuxt3には導入
    【Nuxt.js】Nuxt2とNuxt3の違い｜Flutterラボ
    carolina04
    carolina04 2024/03/28
    Nitroによって、サーバーサイドレンダリング(SSR)の最適化、高速なコールドスタート、より良い静的サイト生成(SSG)など、パフォーマンスが向上します
    リンク

  • クリーンアーキテクチャを少し説明できるようになれる記事 - Qiita


    はじめに クリーンアーキテクチャって最近流行ってるけどよく分からない。理解しようとすると結構学習コストがかかりそうだし、必要になったタイミングで改めて勉強しよう...と思っている人いると思います︵自分がそうでした︶ そんな人向けに、この記事さえ読めばなんとなくクリーンアーキテクチャの本質が分かるようになる記事を書いてみました。 自分なりの解釈も混じっている部分もありますがご了承ください。 また、クリーンアーキテクチャを用いたディレクトリ構成もサンプルとして別記事に書いたので、もしご興味があればご覧ください。 ︻コード付き︼クリーンアーキテクチャのディレクトリ構成例を丁寧に紹介 - Express クリーンアーキテクチャとは クリーンアーキテクチャとはビジネスロジック︵ドメイン︶を中心に置き、インターフェースの層や技術を外側に配置する設計アプローチです。 Robert C. Martin (
    クリーンアーキテクチャを少し説明できるようになれる記事 - Qiita
    carolina04
    carolina04 2024/03/24
    “つまり、この図の通り全部の層に分ける必要もなく、依存関係をしっかりコントロールすることが重要だということです。”
    リンク

  • Ruby on Rails×クリーンアーキテクチャを1年半に渡って本番運用して得られた学び


    この記事はPharmaXアドベントカレンダー2023の18日目の記事です。 こんにちは、エンジニアの加藤(@tomo_k09)です。PharmaXの薬局DX事業部でバックエンドの開発を担当をしています。 薬局DX事業部で開発しているサービスのバックエンドはRubyonRailsで書かれているのですが、RubyonRailsで一般的なMVCアーキテクチャではなく、クリーンアーキテクチャをベースとしたアーキテクチャを採用し、1年半に渡って本番運用しています。 そこでこの記事では、あえてRails wayを離れてアーキテクチャを導入するに至った背景や、このアーキテクチャを本番運用してみて得られた学びについて、具体的なコード例を交えつつ紹介します。 Rails wayから離れてクリーンアーキテクチャベースのアーキテクチャへ移行した理由 クリーンアーキテクチャベースのアーキテクチャを採用する
    Ruby on Rails×クリーンアーキテクチャを1年半に渡って本番運用して得られた学び
    carolina04
    carolina04 2024/03/24
    “Railsとクリーンアーキテクチャは、そもそも目的が異なるため相性があまり良いとは言えません。というのも、思想的には真逆だからです。RailsはRails wayに乗って実装することにより開発コストが最小になることを”
    リンク

  • Speaker Deck Pro | Share Your Presentations Online

    ✓ Share your presentations within minutes ✓ Add privacy to your decks ✓ No Limits ✓ and a lot more useful features. ➜ Read more now.

    carolina04
    carolina04 2024/03/24
    パワーポイントのデザインパターン
    リンク

  • パスワード付きzipファイルの作成方法(Mac) - Qiita

    zip -e コマンドを使うと一発で作成できます。 フォルダでなくファイルを圧縮する場合、 -r オプションは不要です。 $ zip -er {作成先ファイルパス}.zip {作成元フォルダパス} Enter password: {パスワードを入力する} Verify password: {再度パスワードを入力する}

    パスワード付きzipファイルの作成方法(Mac) - Qiita
    carolina04
    carolina04 2024/03/23
    “zip -e コマンドを使うと一発で作成できます。 フォルダでなくファイルを圧縮する場合、 -r オプションは不要です。 $ zip -er {作成先ファイルパス}.zip {作成元フォルダパス}”
    リンク

  • YAMLで複数行を記述するときに使うブロックスカラーのサンプル - Qiita


    YAMLの書き方にブロックスカラーというのがある。 |︵パイプ記号、縦棒記号︶ または >︵大なり記号︶ に、 + や - を組み合わせた、複数行に渡った値の書き方だ。1毎回書き方のサンプルをGoogle先生に聞いているような気がするので、ここにメモります。2 | |は複数行を改行コードで繋げる。
    YAMLで複数行を記述するときに使うブロックスカラーのサンプル - Qiita
    carolina04
    carolina04 2024/03/18
    “|- 単純な複数行ではブロック最後の改行は削除される - |- hoge fuga # ["hoge\nfuga"]”
    リンク

  • あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG

    Xの初学者のポストにて古の手法を教わっている方をよく見かけるので、2024年現在そのCSSテクニックはもう古いってものをいくつか列挙しました。 ブロックのセンタリングに margin を使うなら margin-inline:auto を使いなさいmarginを使ってブロックのセンタリングを行う際によく教わるのはmargin:0 autoあるいはmargin:autoでしょう。

    あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
  • 1 2 3 4 5 6 7 8 9 10 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.