静的サイトジェネレータ「Astro 2.1」リリース。画像の最適化、Markdocのサポート、ファイル変更検知し型チェックなど新機能

2023/03/15 13 users astro 静的サイトジェネレータ image リリース 画像

静的サイトジェネレータ「Astro 2.1」リリース。画像の最適化、Markdocのサポート、ファイル変更検知し型チェックなど新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 2.1」が正式にリリースされました。 Astro 2.1 is here with a brand new <Image> component! C... 続きを読む

なぜReactは標準でComponentをmemo化しないのか？

2022/05/22 111 users render React taro BtoB SaaS 標準

はじめに 普段はスタートアップでBtoB SaaSの開発をしている作っているtaroと申します。 今回は、Reactのmemo化について考えている中で抱いた 「なんでReactは標準でComponentをmemo化していないんだろう？」 という疑問を解消するために、色々と調べたり考えたりした内容をまとめました！ 途中でrenderのタイミングや、... 続きを読む

React Componentの推しディレクトリ構成について語る

2021/10/29 120 users React Component ディレクトリ構成 単体 開発

こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Componentのディレクトリ構成」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおい... 続きを読む

Next.js の Error を丁寧に扱う

2021/09/12 11 users error TSX pages Next.js ログ収集

Next.js には組み込みのエラーフォールバック機構が存在します。Unhandled Error を捉え、pages/404.tsx・pages/500.tsx・pages/_error.tsxの順に適した Component にフォールバックされます。 実アプリケーションにおいてはこれだけでは不十分なケースが多く、きちんとハンドリングしログ収集に繋げるなどのエラー設計... 続きを読む

React.Context で作る GlobalUI Custom Hooks

2021/02/16 12 users Notification Tips サンプル 画面上部 コード

GlobalUI を、React.Context を利用して作る TIPS です。どの Component からも利用しやすい様に Custom Hooks を経由します。よくある、何かを更新した際、画面上部に通知（Notification）を表示するサンプルを元に解説します。（↓ の画像の様なもの） 利用例 Notification を呼び出す Component は次の様なコードにな... 続きを読む

Component 実装と文化を支える自動化ツール | リクルートテクノロジーズ　メンバーズブログ

2020/12/15 13 users ASG reg-suit ビジュアルリグレッションテスト

こんにちは！アプリケーションソリューショングループ（以下、ASG）の吉井です。本記事は Recruit Engineers Advent Calendar 2020「15 日目」の記事です。 Stories as Test ASG では、Storybook / reg-suit を用いたビジュアルリグレッションテストを推進しています。Component テストを兼ねた .stories ファイルのコミ... 続きを読む

hygen で生成 - 対話形式の Component 雛形 -

2020/10/18 13 users module StorYBook test 雛形 一度

Component 作成にあたり、storybook や test も一度にコミットする場面が増えてきました。そして CSS Modules や、特定 Component 専用の custom hooks など、一つの Component を構成するファイル群はそれなりの量になってきます。例えば、以下の様な module 構成の Component です。これを手作業で作成するとなると、... 続きを読む

JavaScriptやCSSを読み込むローダーライブラリをES Modulesとして読み込む | Web Scratch

2020/04/05 18 users ES Modules CSS render module

今どきのnpmパッケージはUNPKGやPika CDNを使えば、ES Modulesとして直接import文読み込めることがあります。 たとえばPreactなら、次のようにUNPKG経由で直接モジュールをインポートできます。 <script type="module"> import { h, Component, render } from 'https://unpkg.com/preact?module'; // Create your app co... 続きを読む

R8/Proguard: Daggerの生成コードがR8でどのように変わるかを見る - stsnブログ

2019/01/21 7 users DAGGER modules Proguard int 実践

R8/Proguard: Daggerの生成コードがR8でどのように変わるかを見る Created at Sun, Jan 20, 2019 コードの最適化の話です。この記事では実践に寄せて、Daggerの生成コードがR8によってどのように変化するかを見ます。 まずはサンプルコードです。 @Component( modules = [ AppModule1::class, AppModule2::class ] ) int... 続きを読む

AWS CDK は React - cockscomblog?

2018/11/14 37 users React cockscomblog CDK AWS CDK

AWS Cloud Development Kit（以下、CDK）というものがあるが、これの提供する抽象化について考えを巡らしていたところ、唐突にこれは React だと気付いた。 CDK と React の類似性 CDK の CloudFormation Resource は、React の DOM Element に対応する。 CDK の Construct は、React の Component に対応する。 CDK で... 続きを読む

React-Router v4を使って認証状態でリダイレクトする処理

2018/07/12 22 users React react-router 処理 import 認証

ログインが完了したらトップページにリダイレクト、未ログインで認証が必要なページにアクセスしたらログインページへリダイレクト、という処理がある。 react-routerのv4でルーティングするとこんな形である。 import React, {Component} from 'react' import { BrowserRouter as Router, Route, Switch } from 'react-... 続きを読む

recomposeではじめるReact Higher-order Components(HoCs) - Qiita

2018/05/08 21 users Qiita recompose Sta React API

最近、recompose を使用して React を書いており、ある程度知見が溜まって来た為、整理の意味を込めて纏めてみました。不備、不明点等がありましたら、コメント頂ければ幸いです。 TL;DR HoCs 、recompose とは recomposeの代表的な API の紹介・使い方 setDisplayName：Component に任意の名前付与 withStateHandlers：Sta... 続きを読む

Dagger2の設定をグラフにする – Kenji Abe – Medium

2017/12/12 10 users medium Dagger2 Kenji Abe グラフ 外側

このツール使うとDagger2の設定をグラフにしてくれます。 ちょっと試してみました。サンプルとしてComponentを3つに適当にModuleとProvidesを設定しました。 Bubble chart Bubble chart 白いのが Provides アノテーションで設定されてるものになって、その外側が Module になります。さらに外側が Component になります。 Tree c... 続きを読む

Building High Performance and Testable UI component // Speaker Deck

2017/09/16 27 users Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む

reactjs - React NativeのComponentの流行り具合 - Qiita

2015/11/06 42 users Components Qiita reactjs リポジトリ

React Nativeでアプリを作る予定なのですが、何が人気なのかとかいまいちつかめていないのでとりあえずAwesome React Nativeの Componentsにリストアップされているリポジトリのスターのつき具合をまとめてみました。（2015/10/17時点） 定期的に（覚えてたら）更新しようかと思います。 とりあえずは上からどんなComponentなのか見ていくのが近道になりそうな予... 続きを読む

最近のWebデザインで採用されているレイアウトやコンポーネントが豊富に揃ったPhotoshopとSketchの素材 -Baikal | コリス

2015/09/07 36 users Baïkal コリス Sketch コンポーネント レイアウト

縦長ページ、マガジンスタイル、カード型レイアウト、ランディング、コマース、ブログ、ポートフォリオなど、最近のWebデザインで見かけるレイアウト、ヘッダやフッタ、エレメントのバリエーションが豊富に揃ったコンポーネントベースのUI素材を紹介します。 しかも、商用利用できる全揃いセットをコリスのビジターにプレゼント！ 勉強にもよし、そのまま使ってもよしの素材です。 Baikal – Component ... 続きを読む

Reactのprops/stateとFluxのStore - mizchi's blog

2015/08/24 60 users Props Flux immutable state

2015-08-24 Reactのprops/stateとFluxのStore 基本的に、ReactのpropsはImmutable, stateはmutableという扱いです。 storeはストレージ抽象じゃない— 賢さを上げて法で殴る (@mizchi) 2015, 8月 24 rootComponent以外のComponentで参照するプロパティは基本的に全てpropsになるしstoreから... 続きを読む

AngularDart 1.0入門 (1)双方向バインディングとComponent - Qiita

2014/10/21 23 users Qiita

name: angular_sample dependencies: browser: any angular: ">=1.0.0 <2.0.0" web_components: any transformers: - angular pubspecを書いたら忘れずに>pub getしてください。 Step 1: エントリポイントの作成 Webページ上でAngularDartを動かすために、エント... 続きを読む

guide/component/vs.md at master · component/guide · GitHub

2014/06/17 10 users GitHub Guide md at master

Component is one of many frontend solutions. One of the major differences between Component and other solutions is that it is vertically integrated, meaning it does everything from package management ... 続きを読む

Componentによるフロントエンドのパッケージ管理 ::ハブろぐ

2014/02/18 133 users タスクランナー 直近 ライブラリ選定 Vue.js 実装

Component 直近で、新規案件に関わることになりそうなので、ライブラリ選定やタスクランナー、そして今回の依存管理のようにベーシックな話が続いてます。次第に、具体的な実装やコード設計のポストが多くなる･･･はず。 今回はVue.jsでも触れましたが、改めてcomponent - modular javascript frameworkについて。 概要 Componentはパッケージマネージャー... 続きを読む