すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
LeetCode 150問を解いて起きた意外な変化
はじめに 年末に Twitter でこのツイートを見かけました。 もともとアルゴリズムの勉強に興味があり、一年ほど前に数ヶ月だけ AtCoder をやっていましたが、途中で挫折してしまった自分にとって、NeetCodeの勉強ロードマップは非常に魅力的に感じました。（転職意欲があったわけではないです） NeetCode のロードマップ そこで、このロードマップに従って LeetCode の問題を 150 問解くことを決意し、結果的におよそ1ヶ月半で全ての問題を解き切ることができました。 この過程で、様々なことを学ぶことができました。中には自分が予想していなかった学びも多くありましたので、同じくアルゴリズムに興味のあるエンジニアの方に役立てていただけるよう、記録として残しておきます。 ハードスキル 📗 データ構造への理解 頻出するデータ構造について、それぞれの長所/短所を理解し、主要な処理の
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点
皆さんこんにちは。先日公開した以下の記事は多くの方にご覧いただきありがとうございます。 この記事に対して多く見られた反響のひとつは、コンポーネント内に use(fetchNote(id)) という非同期処理を行うコードが含まれていることに対する違和感です。 function Note({id, shouldIncludeAuthor}) { // ↓↓↓↓↓ const note = use(fetchNote(id)); let byline = null; if (shouldIncludeAuthor) { const author = use(fetchNoteAuthor(note.authorId)); byline = <h2>{author.displayName}</h2>; } return ( <div> <h1>{note.title}</h1> {byline}
静的サイトジェネレータ「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には全
Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る (2022/10/31 追記) - Qiita
2022/10/31 追記 2022年時点ではWebpackでReactの環境を構築するより、Viteを用いて環境構築するほうがメジャーになっています。 筆者としても新規開発するならWebpackより、Viteの方で構築することをおすすめします。 ViteではReactのビルド用設定はPluginとしてパッケージされており、Webpackのように設定が必要ではありません。 下記はWebpack v4の話であり、すでに過去の物となっています。 ※自分のブログに投稿したのものと同じです。 https://mr-ozin.hatenablog.jp/entry/2020/06/20/043243 動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようと
基本思想 とにかく薄く。必要なものだけ。基本は ts-loader を transpileOnly: true で使うだけ。最悪これだけでいい。型チェックはIDEか yarn tsc -p . --noEmit でやる。 CRA や parcel は使わない。暗黙な振る舞いが多すぎるので。一切勉強したくない人はいれていいと思うが、その場合 eject しない、dist ディレクトリをそのまま使うこと前提。 style-loader/css-loader は外部CSSを読むときに設定する worker-plugin はなくてもいいけど、 worker もビルドしたいことが多いので、入れていることが多い html-webpack-plugin と webpack-dev-server 組み合わせると、他と組み合わせずに完結して動く。このHTMLを本番で使わずとも、デバッグで使ってることが多いの
【重要】学習・開発で必ず確認するべきOSS
はじめに 今回の記事では、プログラマーが学習・開発を円滑に進めるために知っておきたいOSSを紹介する。特に開発されているアプリケーションに焦点を当てて紹介する。今回の記事では、主に著者の得意分野や興味のある分野に絞って確認するべきGitHubリポジトリを紹介する。 紹介する分野は主に以下の通り。 Web Android Flutter 学習・開発でOSSを使うメリット プログラマーが学習・開発でOSSを使うメリットは以下の通り。 ソースコードを通して、開発したいアプリケーションの具体的なイメージや自分に足りないもの(必要な知識や言語等のスキル)を理解できる 自分が普段学習・開発で使っている言語の活用事例を確認できる アプリケーションの構造や開発フローを理解できる 確認が必須であるWebサイト OpenSourceAlternative.to 世界中のオープンソースのアプリケーション(特に有
過激派が教える！ useEffectの正しい使い方
ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理
はじめに 今回はフロントエンド(主にReact, Next, TypeScript)でおすすめの学習教材をまとめました。 対象者 エンジニア初心者 モダンフロント技術を学びたい人 ロードマップ Developer Roadmaps エンジニア向けの学習ロードマップが整理されています。 現在の自分の立ち位置を把握し、次にやるべきことの方向性を知ることができます。 エンジニアが使うであろう、ほぼ全技術が網羅的にまとめられているので、まずはこのロードマップを使って現在の立ち位置を掴んでみてください。 TypeScript typescriptlang 公式が提供している学習サービス。 基本文法から実践的な内容まで学ぶことができる。英語が苦手でなければここで一通り学ぶべき。 サバイバルTypeScript 実務で使えるTypeScriptの実装方法を学ぶことができる。応用的な内容も多いが、解説が丁
はじめに バックエンドエンジニアは、プログラミングの中で特にイメージがわきにくい分野である。簡単に言えば、バックエンドエンジニアはユーザから見えない部分にあるシステムである。(例えば、ユーザ認証やデータベース設計・操作・運用などが例として挙げられる) 例えば、ECサイトを運用する際に、ユーザから見えるUIだけを作っても作動しない。バックエンドになるシステムの構築も必要なのだ。 今回はバックエンド開発を理解する上で必要な10の知識を徹底解説する。その中で、個人の見解に過ぎないが初心者にオススメのバックエンドのフレームワークを3選紹介する。あくまで一個人の見解に過ぎないが、今回の記事を通してバックエンドの学習方法またはその魅力を十分に理解していただければ非常に幸いである。 本題に入る前に、本記事における「バックエンド」はあくまで認証やデータベースなどシステムやソフトウェアの裏側で動作しているも
この記事では、コーディング作業で迷ったときに確認したいコードスニペットを集めた便利サイトをまとめて紹介しています。 ウェブ開発において、フロントエンドやデベロッパーが悩んでしまう問題の解決方法を知ることができるだけでなく、世界中の優秀なプログラマーの作成したコードを確認、実際に動かしながら学ぶことができます。 ちなみに、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化などを行いましたので紹介いたします。
秋のブログ週間の9本目のエントリーになります。この企画もこんなに書く人が出てくるように育っていいですね。 「中間層を増やして柔軟性を高めるのがソフトウェアの歴史」 これは大学時代に2つ上の先輩が言っていた言葉です。例えばマシン語を直接書くのではなく、アセンブラで書けば、変換（コンパイル）の手間はかかりますが、他のCPUへの移植はしやすくなります。高級アセンブラと名高いC言語を使えばさらに移植性は上がります。C言語で書かれたVMを使う言語、例えばJava、Python、Rubyなんかはさらに移植性は上がります。 ストレージもそうです。最終的にストレージはビット列を保存するものですが、それにOSのファイルシステムというレイヤーがあり、そこにスキーマで管理されたデータを入れるDBMSが乗っかり、SQLなどの問い合わせ言語でデータ取得できるようにします。DBMSを挟むことで、レプリケーションでバッ
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っていきます。第1回はMisskey、ひいては分散型SNSの簡単な紹介とその内部実装の概略を説明します。 はじめまして！ はじめまして、Misskey（みすきー）のプロジェクトリーダーをしている、しゅいろ（@syuilo）です！ この度連載の機会をいただきましたので、ちょっと仰々しい気もしますが「Misskey & Webテクノロジー最前線」と題して、今後Misskeyやそれに関わる最新のWeb技術について解説をしていく予定です。 今回はMisskey、ひいては分散型SNSの簡単な紹介とその内部実装の概略を説明します。 対象読者は、後半の実装解説の部分においてはある程度のWeb開発の知識がある人を想定しています。 Misskeyとは、そして分散型とは Misskeyは、オープン
Visual Studio Code時代の到来
この記事は、著者の許可を得て配信しています。 https://blog.robenkleene.com/2020/09/21/the-era-of-visual-studio-code// 使用するツールを選ぶときに私が最も重視しているのは寿命です。ソフトウェアの学習は投資であり、後で別のアプリケーションに切り替えなければならない場合は、今まで投資してきた資産の一部を失うと言っても過言ではありません。 ほとんどのソフトウェアのカテゴリにおいて、寿命の長いソフトウェアを選ぶのは簡単で、最も人気のあるツールは、通常、最も長く続いているものです。Microsoft ExcelとAdobe Illustrator は両方とも1987年にリリースされましたが、今でもそれぞれのカテゴリで最も人気のあるソフトウェアであり続けています。 一方、テキストエディタは、最も人気のあるオプションが一番古いものでは
株式会社ゆめみの 23 卒 Advent Calendar 2023の4日目の内容です。 2022年のはじめに自分の開発環境を紹介する記事を投稿したのですが、思いのほか読んでいただいているので2023年度版を作成しました。 今回は拡張機能編です。キーバインドなどは後日公開します。 今年1年間で JetBrains 製品や、neovim を使ってみたりしましたが、紆余曲折あり現在は VSCode に落ち着いたのでいつかその辺りも紹介出来ればと思います。 VSCode 関連記事 下記にキーバインドや設定周りの記事リンクを追加していきます 汎用的な拡張機能 BracketLens 右括弧の左側にスコープの情報が表示されるようになる。 ChangeCase 選択範囲のテキストの case を変更することが出来る CodeSpellChecker スペルチェッカー EditorConfig .edi
「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 こんにちは、ログラスのエンジニアの佐藤です。 昨年に入社して早2ヶ月経ちましたので、入社記事でも書いていきます。 「Reactに書き換えないとこのプロダクトチームは緩やかに死を迎えます」 と、CTOに言ったのは昨年末くらいでした。 入社してまだ1ヶ月経たないくらいです。 ログラスは創業当時からAngularを使って開発をしていました。 正社員のフロントエンドエンジニアは自分が入るまではいなくて、業務委託の方と協働しながら開発をしていました。 そのプロダクトをゼロからこの創業期のタイミングでReactでフロントエンドを作り直そうというお話です。 今回のお話はあくまでログラスのプロダクトチームの目指す理想像とAngularの相性が悪いだけで、AngularがReactより劣っているわけではありません。 Angularはフ
それでは以下、簡単なデモを含めながら個別に説明していきます。 1. ハイブリッドサーチ こちらは、性質の異なる複数の検索方式（例えばベクトル検索とキーワード検索）を組み合わせて検索精度を向上させる手法になります。 各検索方式単体の場合に比べ、性質の異なる検索方式を組み合わせ、ある種いいとこ取りをする事で、検索性能の向上が期待できます。 今回はBM25でのキーワードベースの類似度検索と通常のベクトル検索を組み合わせていきます。 BM25について簡単に説明しておくと、文脈や文章構造は完全に無視した上で、文書内の単語を全てバラバラに分割し、文書内の各単語の出現頻度と文書間におけるレア度を加味した特徴量を算出します。 つまり、特定の文書内の各単語の数をカウントしてヒストグラムを作れば、似たような文書には同じような単語がよく出るはずなので(同じようなヒストグラムの形になるので)、類似度が高くなる性質
カナダで自分の会社を作ってみました。OpsBR といいます。副業のお仕事お待ちしてます！ なんのために作ったか 現在は Autify でフルタイムで働いていますが、副業が可能なので少しでも収入を補っていきたいのが一番の目的ではあります。業務委託で個人でやっててもいいのですが、法人を立てることでサービスを作ったりするのもやりやすくなるので、社会勉強も兼ねて会社を作ってみようと思いました。 あと、できればゆくゆくはこっちを収入の中心にできないかなと思ってます。というのも、10 年以上会社員を続けてて、どうしても納得がいかないポイントがあるからです。 これ。僕はお客さんのために仕事したいのに、お金を貰うには同僚のために仕事しないといけないのが、ずっと納得いってない。自分の会社作ったのはそういう理由。 https://t.co/tQawEuSZI6 — Ryosuke Iwanaga (@riyw
河野と申します。2018年8月からマッハバイトで業務委託（いわゆるフリーランス）として業務に携わっており、2022年6月から、テックリード（以降、TL）という立場となりました。 TLという言葉は広く使われていますが、実際に何をするのかは、会社や環境によってさまざま。 3ヶ月の振り返りがてら、ここに一例として公開してみようと思った次第です。 TL着任以前 Join当初はRailsエンジニアとしての働きを期待されており、最初の担当はマッハバイトiOS版用に、REST APIを開発することでした。 半年少しでその業務が一段落した後は、以下のことなどを担当してきました。 Rails製アプリケーションの機能追加、Ruby、RailsのUpdate ホストOSのUpdateに伴う、deploy環境の修正や、ライブラリなどのUpdate（オンプレ環境） マイクロサービスの中心に置きたいメッセージングサー
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
はじめに Web技術は日進月歩で新しい技術が増えているが、実務でそれらすべてを触る機会はない。そこで、今回の記事では2023年下半期に赤の他人に勧めたいWeb技術を個人の独断と偏見で解説する。 対象者 これから何をすればいいのかわからないプログラマー 新しい技術に興味があるひと スキルセットを拡大したいひと タイトルでなんとなく気になったひと フレームワーク FastAPI FastAPIはPythonでAPIを開発するために開発された軽量のWebフレームワークだ。FastAPIでは、主に以下の特徴がある。 Node.jsやGo言語に匹敵する高速なアプリケーションを開発できる 構造が簡単(Flaskの影響を受けている) Pythonに型定義を含められる 環境構築がコマンド一つで終了する 非同期処理を簡単に実装できる Pythonで開発されているので、機械学習との相性が抜群 RESTとGra
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）などを計算。それぞれについてランキングを作成しています。 それぞれの値は次の式で計算されると説明されています。それぞれの項目にはアンケートの回答数が入ります。 満足度＝またこの技術を使いたい／（
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
切り替える理由 自社の主力製品で利用している技術(WebRTC / WebTransport)がブラウザベースのため TypeScript を利用する Go を採用したのは sqlc が使いたかったという理由 sqlc-gen-typescript が出てきたのでもう Go を使う理由がなくなった 自社サービスチーム全員が Go にまったく興味が無い sqlc 自体は便利 そもそも自社に Go への興味がある人がいない 自社サービスの規模ではボトルネックになるのはデータベースであって言語ではない もしアプリでスケールが必要なときは Rust や Erlang/OTP に切り替えれば良い コネクションプールは PgBouncer を利用すればいい TypeScript からは 1 コネクション 1 接続で問題無い どうせフロントエンドでは TypeScript を書く 自社では React
卒業証書 2021年4月にプログラミングスクールのWebデザイナー向けプログラミングコースを卒業しました。 受講していたのはRailsプログラマーコースだったのを、途中からメンターさんに相談してWebデザイナー向けにカリキュラム内容をカスタマイズしてもらって、受講してました。 受講していたスクールでははじめての試みだったということで、同じデザイナーの人でプログラミング勉強したいと考えている人向けに記事を残すことにしました。 プログラミングを勉強しようと思った経緯は以前投稿した記事に書いているので、そちらを参照してください。 ksmxxxxxx.hatenablog.com スクールでやったこと 通っていたのはフィヨルドブートキャンプというプログラミングスクールになります。 実際に進めたカリキュラムは以下になります。 Linuxの基本 Terminal Debianをインストール ファイル操
結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。 ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。 JavaScriptフレームワークの簡易比較有名かつドキュメントが日本語化されており、入門書もでているJavaScriptフレームワークにはAngular、React、Vueがあります。 で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。 ・ Angularは、HTMLとJavaScript（TypeScript）を分割してかきます。 ・ Reactは、JavaScriptの中にHTMLを書きます。
重いサイトを軽くしろ！年末年始は #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” を昨年
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever. View Transitions, Image Optimization, JSX Fast Refresh, and so much more. https://t.co/vOi44246Hg — Astro (@astrodotbuild) August 30, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライ
Reactアプリケーションのテスト戦略について ・フロントエンドのテストの種類 ・トレードオフ ・所属しているチーム / プロダクトの状況 ・テスト戦略 ・Storybookを使ったこれからのテストへ
freee では仮想マシンのインフラ監視に Mackerel を使っていますが、Kubernetes を使っているところは前例にとらわれずゼロベースで見直そうとしています。現状は Elastic Stack と Mackerel のハイブリット構成になっています。 Elastic Stack による Kubernetes モニタリングシステムの紹介 - freee Developers Blog どの SaaS を使うかを決める前に、そもそも Kubernetes の何を監視すればいいのか？ というところから考え直しています。宣言的なマニフェストにより Kubernetes が自律的にあるべき状態を保ってくれるのであれば、これまでの監視とは異なってくるはずです。 監視の観点として、ここでは通知レベルを用いて次の 3 つに分類します。 None: メトリクスは収集するが通知しない Notic
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。
openbaseとは https://openbase.io Find and compare open-source packages with user reviews, categorization, and unparalleled insights about packages' popularity, reliability, activity, and more. 手を抜いてdeeplでw ユーザーレビュー、カテゴリ分け、パッケージの人気、信頼性、アクティビティなどについての他の追随を許さない洞察力で、オープンソースパッケージを見つけて比較してください。 現在、多くのプログラミング言語はパッケージマネージャがあって、何らかの方法でパッケージについての情報を取得することができると思います。 パッケージの選び方 自分の場合はjs系が殆どなので、ライブラリを選ぶ方法は以下のような感
本記事はあくまで執筆時点(2022/3/27)での一意見でありますので、今後時間や技術的な変化により参考にならない部分も出てくるかもしれません。 Reactはいいぞ、Vueはいいぞと様々な情報が世の中には溢れているものの、「こういう場合には」という前提条件にあまり言及されていない情報が多いような気がしたので自分なりの視点で考えてみたいと思いました。 また、SvelteやAngular等他のフレームワークもありますが、そちらは個人的にはよくわからないので、あくまでReactとVueについてだけ言及していきます。 私のフロントエンド経験と気持ちの変化 2018年くらいにReactを勉強し始める。 → Reactって難しい…。 2019年くらいにVueを学び始める。 → Vueって簡単！Reactよりわかりやすくてええやん！ 2020年くらいにNuxtの案件に参画する。 → Webフロントエンド
マネジメントの極意は「自分のことは棚にあげる」こと, MacBook Pro M1 Max を 1 週間使ってみての感想 - HsbtDiary(2022-02-04)
■ マネジメントの極意は「自分のことは棚にあげる」こと タイトルは https://qiita.com/jnchito/items/0a0b46106681f41f2f0e のインスパイアです。 昔エンジニアなどをやっていた時に、マネージャや上司から何かコメントを受けると「とは言っても、このコードも書けないのにさあ」というような気持ちになった経験から、自分が実際にマネジメントをする立場になると、「は〜、React とかあまりわからんので方針とか出しにくいなあ」となって止まってしまうことがあります。 昨今のソフトウェアエンジニアリングは幅も深さも異次元のレベルまで広がっているので、全てのことをマネジメントが実践できるというのは正直無理な話です。自分ができることしかマネジメントできないなら、ソフトウェア開発の世界では何もできないのに等しいです。 そこで必要なことは「自分のことは棚にあげる」です
#React やってて、props のバケツリレーを何か嫌がる人たまにいるんだけど、自分は props のバケツリレーそのものをそんなに悪いと思ったことがない。 「バケツリレーがつらい」ように見えるコンポーネントの大半はそもそも props の設計がおかしい場合が多く、本当の問題はそっちにあると思っている。 たとえば、次のようなバケツリレーはつらいかもしれない。ここでいう Body はサイドバーとしてフォロワーの一覧を表示し、メインコンテンツとしてフィード一覧を表示するみたいなものを想像して欲しい。フォロワー一覧の中で使う props とフィード一覧で使う props を混ぜて1つの親に渡している状況だ。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webサービスを作るときのテンプレートを作った - hiroppy's site
Promiseをthrowするのはなぜ天才的デザインなのか - Qiita
なんでコンポーネントに副作用があんだよ！ 教えはどうなってんだ教えは！
俺の webpack.config.js-20200503 - mizchi's blog
【2023年】モダンフロント学習教材まとめ - Qiita
バックエンド開発の基本を理解するために必要な10の知識 2022年版
どう書くんだっけ？ を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ
リリースから5年、Webフロントエンドの経年劣化と向き合う
データベースと向き合う決意 | フューチャー技術ブログ
分散型SNS「Misskey」、それを支える技術スタック | gihyo.jp
VSCode のおすすめ拡張機能 2023年度版
愛すべきAngularとのお別れ。2,3年後を見据えReactにリプレイスする話｜Yuito Sato
RAGの実装戦略まとめ - Qiita
カナダで自分の会社を作ってみた - As a Futurist...
業務委託テックリードと技術的負債 - LIVESENSE ENGINEER BLOG
2023年下半期に他人に勧めたいWeb技術まとめ
CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
自社サービスのバックエンドを Go から TypeScript へ切り替えるための整理
プログラミングスクールを卒業しました - ksmxxxxxx.hatebu
2020年にJavaScriptフレームワークをちゃんとはじめるために。｜榊原昌彦
Reactアプリケーションのテスト戦略
我々は Kubernetes の何を監視すればいいのか？
指示したUIをAIがTailwindベースで実装してくれるv0が凄い
【2024年最新版】0からReactを勉強するならこのロードマップに従え！ - Qiita
jsライブラリ選定はopenbaseが超絶便利 - Qiita
Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった
props のバケツリレーって何が悪いんだっけ - fsubal