すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
その例外、いつキャッチするの？
Merpay Advent Calendar 2019 の19日目は、Backendエンジニアチームの @toshinao がお送りします。 新しくマイクロサービスを立ち上げる機会があり、クリーンアーキテクチャをベースにしました。クリーンアーキテクチャはバックエンド・フロントエンド・アプリなど様々な場所で採用されています。ただ、確固たる方法というのは無く、みな試行錯誤しているのでは無いでしょうか。この記事では、クリーンアーキテクチャを取り入れる上で考えたことを紹介したいと思います。 マイクロサービスを作ったことがない人や、今までいくつか作ってきたけどより良い設計について考えている人の助けになれば幸いです。 はじめに メルペイのバックエンドは主にGoとGoogle Cloud Platform（GCP）で開発を行っていますが、各マイクロサービスをどう実装していくかは概ね各チームに委ねられてい
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法
先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。 CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。 CSS ways to Create Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を
静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に
静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 2.0」が正式にリリースされました。 Astro 2.0 – our most exciting release yet!https://t.co/FPb5rBTRPT — Astro (@astrodotbuild) January 24, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。 ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」 - Qiita
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」JavaScriptテストフロントエンド はじめに JavaScriptにおけるテストのベストプラクティスをまとめた「javascript-testing-best-practices」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。 （補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。 Section 0: The Golden Rule Section 1: The Test Anatomy Section 3: Frontend Section 4: Measuring Test
e-TaxはGoogle Chromeに対応していきます。| 【e-Tax】国税電子申告・納税システム(イータックス)
令和2年5月25日より、Google Chromeから「受付システム」及び「e-Taxの開始(変更等)届出書作成・提出コーナー」をご利用いただけるようになりました。 Google Chromeからのご利用に当たっては、事前にChromeウェブストアへアクセスし、Chrome拡張機能をダウンロードする必要があります。 Chrome拡張機能は、受付システム専用の事前準備セットアップインストーラを実行中にChrome ウェブストアのページへ移動し、ダウンロードすることができます。 操作にご不明な点がございましたら、インストールマニュアルをご確認ください。 なお、以下のソフト・コーナーについても、令和3年1月からGoogle Chromeに対応する予定です。 Google Chrome対応予定ソフト・コーナー（令和3年1月予定） ・e-Taxソフト(WEB版) ・NISAコーナー ・FATCAコー
はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescriptlang 公式が提供している学習サービス。 基本文法から実践的な内容まで学ぶことができる。英語が苦手でなければここで一通り学ぶべき。 サバイバルTypeScript 実務で使えるTypeScriptの実装方法を学ぶことができる。応用的な内容も多いが、解説が丁
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、2020年に人気だったコードスニペットランキングがこちら。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 どう書くんだっけ？ を一発解決！コードスニペットを集めたオススメWebサイトまとめ CoddMyUI Javascript、HTML、CSS、jQueryプラグイン、ウェブ開発にできるデザインスニペット1200個以上が揃ったサイト。ボタンやホバーリンク、テキストアニメーションなど細かくカテゴリ分けされているので、必要なパーツごとのコー
@herablog さん、@shunke07 さんと共に Muddy Web #3 で発表した資料です。 https://cyberagent.connpass.com/event/261115/ news.ameba.jpは5年前にデスクトップ版ではReact化、モバイル版ではAMP化が行われました。当時は最先端の技術でしたが時が経つにつれて技術的なトレンドも変化しています。TypeScriptやTanStack、Core Web Vitalsの登場によりWebフロントエンドの技術構成は日々進化しています。 時代の流れに合わせてAmebaNewsでは、脱AMP、脱SPAやTypeScript化などを行いましたので紹介いたします。
JavaScript: Past, Present, and Future - NDC Porto 2020
「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 こんにちは、ログラスのエンジニアの佐藤です。 昨年に入社して早2ヶ月経ちましたので、入社記事でも書いていきます。 「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 と、CTOに言ったのは昨年末くらいでした。 入社してまだ1ヶ月経たないくらいです。 ログラスは創業当時からAngularを使って開発をしていました。 正社員のフロントエンドエンジニアは自分が入るまではいなくて、業務委託の方と協働しながら開発をしていました。 そのプロダクトをゼロからこの創業期のタイミングでReactでフロントエンドを作り直そうというお話です。 今回のお話はあくまでログラスのプロダクトチームの目指す理想像とAngularの相性が悪いだけで、AngularがReactより劣っているわけではありません。 Angularはフ
State of JavaScript 2020：いちばん利用率の高いJSフレームワーク、フロントエンドがReact、バックエンドはExpress、テストにはJest。2万4000人の調査結果
IT技術者のSacha Greif氏とRaphaël Benitte氏が、JavaScriptに興味を持つ世界中のIT技術者約2万4000人にアンケートを取り、結果をまとめたWebサイト「State of JavaScript 2020」が公開されています。 JavaScriptの最新のシンタックスや命令がどれくらい使われているか、フロントエンドやバックエンド、ビルドツールなど分野ごとにさまざまなJavaScript関連の技術はどれくらい興味を持たれているかなど、アンケート結果を基にして、満足度（Satisfaction）、興味（Interest）、利用率（Usage）、認知度（Awareness）などを計算。それぞれについてランキングを作成しています。 それぞれの値は次の式で計算されると説明されています。それぞれの項目にはアンケートの回答数が入ります。 満足度＝またこの技術を使いたい／（
近日連投していた Next.js 記事のサンプルコードを公開しました。このサンプルコードを元に、私のフロントエンドディレクトリ構成・テスト観点を紹介します（あくまで執筆現在の脳内アウトプットになりますのでご了承ください） フロントエンドディレクトリ構成の事情 タイトルの「フロントエンドディレクトリ構成」をさす「Components」のディレクトリ構成は、いつも悩みのタネです。このモジュールシステムは「デザインシステム観点・アクセシビリティ観点・フロントエンド実装観点」の 3 つの観点が混在するため事情が複雑です。どうせ作るのなら「デザイナー・フロントエンド」どちらの開発基盤にもなりえる、盤石なモジュールシステムを目指したいですよね。 "AtomicDesign やめました"という声をたまに聞くのですが「デザインシステム的に捨てていいの？」と思うこともあるので、とくに要望がなければ、筆者は「
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
重いサイトを軽くしろ！年末年始は #WebSpeedHackathon 2021 に挑戦しよう | CyberAgent Developers Blog
ABEMA で Web フロントデベロッパーとして活動している 宮代 @3846masa です。CyberAgent Advent Calendar 2021 4 日目は、Web パフォーマンス改善のコンテストについてお話します。 TL;DR Web パフォーマンス改善コンテスト “Web Speed Hackathon 2021 mini” を開催します！ 改善する対象は https://web-speed-hackathon-2021.herokuapp.com/ です オンライン開催で、12 月 4 日から 1 月 3 日までの 1 ヶ月間、好きなときに誰でも参加できます 記事の後半は、課題となる「重たい短文投稿サイト」を作るまでの開催記です はじめに CyberAgent では、Web パフォーマンス改善を競うコンテスト “Web Speed Hackathon 2020” を昨年
フロントエンドのつくりかた
フロントエンドの特定技術について語る解説は多くあれど、そもそもフロントエンドのつくりかたについて語った解説は多くないのではないでしょうか。 フロントエンドという大きな領域ですので恐れ多くもありますが、私が GUI プログラミングに携わった経験をもとにお話した内容のスライドとその補足をここでしたいと考えます。 スライド スライドのページ数は多いですが、差分がほとんどですので、それほど構える必要はないです（カーソルキーに負担がかかるという問題を除いて）。 補足解説 大きなテーマごとに補足をしていきます。 スライドで取り上げているテーマは次の４つです。 GUI アーキテクチャパターン データの同期 エラーハンドリング コンポーネント構造 「GUI アーキテクチャパターン」はいわゆる MVC や MVP といわれるものがどういったものかを解説する章です。 「データの同期」は画面と実際のデータが離れ
爆速のアイコン検索サイトを作った
爆速のアイコン検索サイトを作ったので、遊んでみてください。 (1) まずは自分が使いやすいアイコン検索サイトを作りたかったので作りました。(2) 様々なアイコンを爆速で横断検索し、サクッとアイコンをコピーできるようにしました。単純ながら意外とその部分が面倒なサイトは多い気がします。(3) また応用とメンテがしやすい実装にして、非常にサポート範囲の広い DB を GitHub Pages 上で構築しました。公開時点では 120+ のアイコンセットと、130,000+ のアイコンをサポートしており、サポート数も観測範囲では No.1 です。 開発動機 アプリ/サイト開発ではまずお世話になるであろうアイコン。私はこれまで Material Icons と Bootstrap Icons ばかり使っていました。これは検索が面倒だったからです。検索が面倒だと知名度の高いものだけに閉じてしまうので、良
ソニー開発のディープラーニングによる世界最高の音源分離技術を利用できる、音楽制作サービス、Soundmain｜DTMステーション
ソニー・ミュージックエンタテインメント（以下SME）によるSoundmain（サウンドメイン）というプロジェクトをご存知でしょうか？ ソニーが研究・開発する最新の音楽関連テクノロジーをいち早く機能として実装し、クリエイターが利用できるようにするプラットフォームとなっており、将来的にはブロックチェーン技術と権利処理のノウハウを組み合わせたサービスや、後述の音楽制作サービスにAIを用いた機能の実装が予定されるなど、これからも進化を続けていくユニークなプロジェクトとなっています。そして、その中にSoundmain Studioというサービスがあり、これはブラウザ上で使える音楽制作ツール、つまりインストールすることなく使えるDAWとなっています。 そのSoundmain Studioにおいて、現在の目玉となる機能が、ソニーが開発した世界最高峰という音源分離技術。簡単にいうと、これは2mixの音源を
マークアップのわかり方
この記事は、2022年10月28日に開催されたDIST.37「マークアップな夜」での発表「マークアップのわかり方」をもとにしたものです。当日は話せなかった内容も大幅に追加しています。 現代における「マークアップ」とはどのような行為なのか。いかにそれと向き合っていけばいいのか。そういったことについて考えてみます。 マークアップの議論においては、「マークアップには正解がない」という意見が決まって出ます。正解がないと言うならば、たいていなんであってもそうです。たとえばCSSやJavaScriptの書き方には「正解」があるのかと考えてみると、必ずしもそうではありません。 しかし、ことさらマークアップにおいてこれがよく言われる理由としては、妥当性を判断する基準がわからない、ということでしょう。 というのも、CSSなら望む通りの見た目になればとりあえずOKだし、JavaScriptでも意図した通りの振
ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."
新人声優 +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
まもなくやってくる Vue.js 3
Amazon Aurora Serverless v2が意外と高かった話と、�AWS Database Migration Serviceの話
自分が開発しているLaunchableのWebアプリがローンチされて1年半ほどになる。このWebアプリにはReduxのような状態管理ライブラリを入れないまま開発してきたのだが、今のところ困らずに開発できている。そういえば昔自分は状態管理について何か考えていたような…とブログを掘り起こしてみた。 ninjinkun.hatenablog.com このエントリは2016年にネイティブアプリを対象にして書かれているが、この後自分は2018年ごろにWebフロントエンドに軸足を移し、ネイティブアプリ開発から離れた。なのでこのエントリはWebフロントエンドエンジニアが2022年に再考した話になる。 結論としては、当時自分が管理したかった状態のほとんどは現在ApolloClientのキャッシュによって解決されている。 繰り返しになるが、自分が開発しているLaunchableのWebフロントエンドには状態
サーバサイドレンダリングの導入から生じるSSRF | セキュリティブログ | 脆弱性診断（セキュリティ診断）のGMOサイバーセキュリティ byイエラエ
［速報］AWS、ローコードでWebのフロントエンドを開発できる「AWS Amplify Studio」発表。バックエンド管理機能も統合。AWS re:Invent 2021
Amazon Web Services（AWS）は、Webアプリケーションのフロントエンドを短時間で容易に開発できる機能と、バックエンドのクラウドサービスの運用管理などを統合した新ツール「AWS Amplify Studio」を発表しました。 AWSは以前から、Webアプリケーションやモバイルアプリケーションのバックエンドの迅速な構築と運用をするフレームワーク「AWS Amplify」を提供していました。 AWS Amplifyによって開発者は簡単にAWSのサービス群を組み合わせてスケーラブルなバックエンドを構築できます。 そしてAWS Amplifyに含まれているクライアントライブラリを利用することで、そのバックエンドに接続するフロントエンドの開発に注力することが可能でした。 今回発表された「AWS Amplify Studio」は、このAWS Amplifyに対応したフロントエンドをロ
const colors = ["赤","青"] as const; type Colors = typeof colors[number]; //"赤" | "青" typeof colors[number]･･･ってよォ～～～～～ typeofはわかる。スゲーよくわかる TypeScritの世界では、typeofで変数から型を作れるんだよなァ だがnumberってのはどういう事だああ～～～～っ!? 配列にnumberを渡せるかっつーのよ───────ッ!! ナメやがってこの型ァ!! 超イラつくぜぇ～～～～ッ!! 解説 これはよォ 「Lookup Type」ってやつらしいぜぇ たとえばよォ 👇みたいに書くとPerson型からプロパティの型を取り出せるよなァ～?? type Person = { name: string, age: number } type name = Person
概要 Partytownというプロジェクトが先月発表された。このプロジェクト自体はWebのパフォーマンス向上(3rd Party Scriptによるブロッキングの低減)を主目的としているが、実質ブラウザにおけるJavaScript Sandboxの方向性に一石を投じるものであるとして自分は理解した。本稿ではこちらについて背景とともに解説を試みる。 WebブラウザにおけるJavaScript Sandbox JavaScriptで記述されたWebアプリケーションにおいて、たとえばプラグイン機構を実現したいなど、他Partyが提供あるいはユーザ自身が記述したスクリプトを、ホストとなるアプリケーションに影響を与えることなく実行することを許可したい、というケースはままある。2000年代に跋扈したブログパーツの類はWebコンテンツに対するプラグインの代表例とも言えるが、埋め込み先ページに対しての全権
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
Fresh is a new full stack web framework for Deno. By default, web pages built with Fresh send zero JavaScript to the client. The framework has no build step which allows for an order of magnitude improvement in deployment times. Today we are releasing the first stable version of Fresh. Client side rendering has become increasingly popular in recent years. React (and React-like) pages allow program
ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マイクロサービスにクリーンアーキテクチャを採用する上で考えたこと | メルカリエンジニアリング
Webサービスを作るときのテンプレートを作った - hiroppy's site
俺の webpack.config.js-20200503 - mizchi's blog
【2023年】モダンフロント学習教材まとめ - Qiita
どう書くんだっけ？ を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ
リリースから5年、Webフロントエンドの経年劣化と向き合う
フロントエンドの
良い設計、良いコードを考える
愛すべきAngularとのお別れ。2,3年後を見据えReactにリプレイスする話｜Yuito Sato
【個人開発】収益化したサービスのコードを50%以上削除して得られた境地
私のフロントエンドディレクトリ構成・テスト観点 2022
70万通りのURLを持つWebサービスを Next.jsにリプレイスして高速化した話
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
2020年にJavaScriptフレームワークをちゃんとはじめるために。｜榊原昌彦
Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった
フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
再考: アプリ開発と状態遷移の管理 - ninjinkun's diary
ナメやがってこの型ァ!!超イラつくぜぇ～～～～～ッ!!
今Partytownがヤバい。JavaScript Sandboxの未来はどっちだ？
雑にReactアプリを作りたい時に使ってるもの
Fresh 1.0
WebサイトをPWA（プログレッシブウェブアプリ）にする手順とその必要性
この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック