このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
目を惹かれる良質なデザインのYouTubeサムネイルを集めたギャラリーサイト。思わずクリックしてしまうような事例をデザイナー目線で紹介しています。サムネイルに興味を持つ人すべてに、クリエイティブな刺激を与えられますように。
動機 業務でstyled-componentsを触る機会がありました。 styled-componentsは自分の周りではあまり良い噂を聞いていなかったため、少し調べたところこんな記事がHitしました。 記事の内容としては 様々な基礎概念を隠蔽しすぎている 使うことのメリットデメリットや、隠蔽されている部分の理解をしたチームでないと使わないほうが良い という内容です。 なので、しっかりと順を追って復習しました。 環境 viteで作成したReact18のTypeScriptプロジェクトで実施。 Reactの利用は関数型コンポーネントを前提としています。 Refを軽くおさらい 公式Docを見ていただくのが一番正確です。 公式では 一般的な React のデータフローでは、props が、親コンポーネントがその子要素とやりとりする唯一の方法です。子要素を変更するには、新しい props でそれを
forwardRef と useImperativeHandle - 30歳からのプログラミング
コンポーネント内の DOM 要素にRefオブジェクトを渡すための機能であるforwardRefと、コンポーネントにメソッドを生やす Hooks であるuseImperativeHandleについて、説明する。 どちらもRefオブジェクトやref属性を使った機能なので、それらを理解していることが前提になる。 理解が不十分な場合はまず Ref の基本を学ぶことをおすすめする。 numb86-tech.hatenablog.com この記事のコードは React のv16.10.2で動作確認している。 forwardRef forwardRefを学ぶための題材として、テキストボックスへのフォーカスを扱う。 以下のコードでは、focusボタンを押すとテキストボックスにフォーカスする。 import React, {useRef} from 'react'; const App = () => {
Vue.js の Composition API が登場してから 1 年少しが経過しており、すでに使いこなしている方もいらっしゃるのではないでしょう？ 私自身お仕事で Composition API を使用しており、従来の Options API と比較して UI とロジックの分解がよりやりやすくなったように思えます。リアクティブなデータをコンポーネントの外で定義できるようになったことで、1 つのコンポーネントにまとめて書かざるをえなかった論理的な関心事に分けてそれぞれ別のファイルで定義できます。 書き心地としては React のカスタムフックに近い感じとなっていますね。 個人的には React がクラスコンポーネントから関数コンポーネント + Hook へ移行したように、Vue.js においても Composition API へ移行する流れが来るのではないかと思います。 さて、そんな
Ref と DOM – React
新しい React ドキュメントをお試しください。 Referencing Values with Refs Manipulating the DOM with Refs useRef forwardRef まもなく新しいドキュメントがリリースされ、このページはアーカイブされる予定です。フィードバックを送る Ref は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。 一般的な React のデータフローでは、props が、親コンポーネントがその子要素とやりとりする唯一の方法です。子要素を変更するには、新しい props でそれを再レンダーします。ただし、この一般的なデータフロー以外で、子要素を命令型のコードを使って変更する必要がある場合もあります。変更したい子要素が React コンポーネントのインスタンスのことも、DOM
Reactでコンポーネントから子コンポーネントや要素などを操作するときに便利なrefだが、 意外に調べても使い方が出てこなかったので、様々な利用シーンに合わせて使い道をまとめてみた。 DOMにアクセス import React, { useRef, useEffect } from 'react'; const Component = () => { const el = useRef(null); useEffect(() => { console.log(el.current); }, []); return ( <div ref={el}>DOM</div> ); }; export default Component; import React, { useRef, useEffect } from 'react'; class Child extends React.Compon
ども、大瀧です。 昨日Cloudformationの大規模アップデートが有り、YAMLサポートや新しい関数などと共に異なるスタックのリソース参照機能が追加されました。 今回は異なるスタックのリソース参照機能について試してみた様子をレポートします。 これまでのスタック間参照 これまでCloudFormationには、独立したCloudFormationスタック(単一のCloudFormationテンプレートから作成されたリソース一式)同士でリソースを参照する方法はなく、リソース名やリソースIDをパラメータに入力するか、テンプレートにハードコードしていました *1。 シェルスクリプトで複数のCloudFormationスタック作成を自動化するときは、aws cloudformation describe-stack-resourcesのレスポンスをパースして次のスタック作成のパラメータに代入な
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドエンジニア御用達の MDN web docs を網羅した
React.ComponentProps 型を積極的に使おう
SAMUNE｜良質なデザインのサムネイルを集めたギャラリーサイト
ReactのRefとRefForwardingを一気に学び直した
【Vue.js】ref と reactive どっちを使う？
【React hooks】意外と知らないrefの使い方 - Qiita
CloudFormationのスタック間でリソースを参照する | DevelopersIO