JSX

React がマークアップとレンダリングロジックを混在する理由 JSXのルール コンバータの利用 参考 React がマークアップとレンダリングロジックを混在する理由 ウェブサイトは、コンテンツを HTML、デザインを CSS、ロジックを JavaScript で書くというのが一般的で、通常は下記のように別ファイルで管理していた： HTML JavaScript 上記は静的な情報を扱うだけであれば良かったが、近年ではロジックがコンテンツの中身を決めるようになったため（動的に情報が変わる）、JavaScript が HTML の領分も担当するようになった。そういった背景から、React ではロジ…

dangerouslySetInnerHTMLが必要なった場面 Reactコンポーネントでこんなコードを書きました。 const mediaContent = getMediaContent(); return( <div className="post_text"> { mediaContent } </div> ) getMediaContent()は画像等を表示するためのHTMLを生成するためのオリジナルの関数です。mediaContentにはHTMLの文字列が格納されます。 これで画像が表示されるかというと、さにあらず。文字列がブラウジングされずに表示されました。 なんでなのと思って、…

概要 属性の指定 インジェクション攻撃を防ぐ JSX はオブジェクト 参考 概要 JSX は JavaScript の構文拡張で、React 要素を生成する： const element = <h1>Hello, world!</h1>; JSX のメリットは、マークアップとロジック両方をそのまま含んだように記述でき、コードが直感的に理解しやすくなる。上の例だと、HTML の h1 タグとして、Hellow world! を子要素として設定していることがすぐにわかる。 JSX は、式を埋め込むこともできる: function formatName(user) { return user.fir…

Reactには、いくつかの基本的な概念や用語があります。 以下に説明します。 コンポーネント (Component) Reactの中心的な概念であり、ユーザーインターフェースの構成要素を表します。コンポーネントは、再利用可能であり、独立して動作するように設計されています。 pucca0401.hatenablog.com JSX ReactでUIを表現するために使用されるJavaScriptの拡張構文であり、HTMLのように見えますが、JavaScriptの中に埋め込まれた形式で書かれています。JSXは、コンポーネントの見た目を定義するために使用されます。 pucca0401.hatenabl…

はじめに 前回のHTML/CSS/JavaScript 初級編に引き続き、TechTrainのReact.js 入門編のRailwayを終えたので、その受講記録を残します。 TechTrainとは エンジニアとしての「実力を一段上に」なってもらうためのエンジニアコミュニティです。techtrain.dev詳しくは上記のHPに飛んでいただくか、下記の紹介記事をお読みください。 bonomodel.hatenablog.com モチベーション フロントエンドシリーズの続きで、勢いで進めています。 目的はフロントエンド（バックエンド）開発の基礎的な経験と知識を獲得することです。 React.js 入…

HOCとは？ HOCのユースケース HOCパターン コンポーネントの拡張 フックのHOC フックとHOCについて 注意点 最後に 高階コンポーネントHigher-Order-Component(HOC)は、Reactの構成上の性質から派生した設計パターンです。 フックが導入される前は、コンテキストや外部データサブスクリプションにアクセスするためにHOCが広く使用されていました。 しかし、HOCを記述して理解するのは非常に複雑です。 そのため、フックが導入されたとき、誰もがフックに切り替えたのも不思議な事ではありません。 それでもHOCの概念は、クラスコンポーネントと関数コンポーネント両方に使用…

handleClick関数内でe.preventDefault()書くとうまくいかないので、JSX内の方で書く。 こんな感じで書けば大丈夫。 const handleClick = (id: string) => { console.log(id) } ... <button onClick={(e: React.MouseEvent<HTMLButtonElement>) => { e.preventDefault() handleClick(id) }} />

Vue3 のプロジェクトに TypeScript を導入してみた話。 こんにちは、開発チームでエンジニアをしている和田です。 最近はフロントエンドのプロジェクトを Vue2 から Vue3 に変更するという大掛かりな作業を終えてホッとしております 😌 とはいえ Web の世界は日進月歩、あらゆるライブラリのバージョンアップが常日頃行われています。我々、開発者は安全に開発を行うためにプロダクトの保守改善をしなくてはなりません。 ということで今回は Vue3 への移行を終えて TypeScript を導入することになったため、その作業手順を記事として残しておこうと思います。 背景・目的 この記事で…

以前書いたsatori/sharp/satori-htmlでOG画像生成を使ってたら、 やたらsatori-htmlの処理に時間がかかるので、 いろいろ調べてみたときの備忘録(*´ω｀*) unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。 使ってるのは前回と同じ、この3つ vercel/satori ... ReactNode(VNode)をSVGに変換 lovell/sharp ... SVGをPNGに変換 natemoo-re/satori-html ... HTMLをVNodeに変換 遅かったときのコード 最初はこんな感じで、 いくつか…

驚くなかれ、ScalaはJavascript(ESModuleかCommonJS)にコンパイルできる。それがScala.jsである。 www.scala-js.org 普通に10年開発されていて、普通にぜんぜんScalaが動く。ぜんぜんバグがない。昔はHello,Worldすると20MBのJSが吐き出されるというギャグがあったが、最近は普通に176KiBくらいのJSなので全然使える。 Node.jsでめちゃ強い型システムが使えてうれしい。ScalaっぽいAltJSが動くね〜という感じではなく、本物のScalaがJSにトランスパイルされ、JS環境で本物のScalaが動くという感じ。普段JVMに慣…

プロジェクトの成功は、使用する技術スタックに大きく依存します。この記事では、現代のWeb開発において最も人気のある3つのJavaScriptフレームワークであるReact、Angular、Vueを比較し、それぞれのフレームワークがプロジェクトにどのように適しているかを詳しく見ていきます。 目次 はじめに Reactについて 概要 主な特徴 コード例 Angularについて 概要 主な特徴 コード例 Vueについて 概要 主な特徴 コード例 比較 性能 学習曲線 コミュニティとサポート 結論 1. はじめに Web開発の世界は常に進化しており、新しいフレームワークやライブラリが次々と登場していま…

ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。私が関わるプロダクトでは認証や認可に Amazon Cognito を使っており、 React で実装したフロントエンドアプリケーションから Amazon Cognito との接続には AWS Amplify が提供している Auth ライブラリを利用しています。 AWS Amplify は 2023 年 11 月に v6 のメジャーバージョンがリリースされたのですが、Auth ライブラリにはいくつかの破壊的変更が含まれていたので、このブログで移行方法の一例を紹介します。 AWS Amplify JavaScript v6…

はてなブログでは日々さまざまな新機能の開発や機能改善を行っています。多くのユーザーさまに関係する機能は、すでに本ブログにてお知らせしておりますが、1ヶ月分のお知らせをまとめました。 また、目に見えづらい改善や、影響するユーザーさまが少ない機能の修正も行っておりますので、本記事にて「細かな機能修正・改善」としてお知らせいたします。 細かな機能修正・改善 1.下書きプレビュー 共有URLをコピーしやすくしました 下書きプレビュー共有URLをコピーできるボタンを追加しました。 下書きプレビューURLをコピー下書きプレビュー共有URLについては下記のヘルプをご参照ください。 help.hatenabl…

Angular vs. React: Which To Choose for Front-End in 2024 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ開発の世界は日進月歩であり、その最前線では究極のフロントエンド・フレームワークをめぐる戦いが繰り広げられており、2つの巨頭が際立っています。 AngularとReactです。どちらも卓越したユーザーインターフェイスを構築できる強力なフレームワークですが、あなたの次のプロジェクトにふさわしいのはどちらでしょうか？AngularかReactか？ それぞれGoogleとFaceboo…

目次 はじめに Reactとは何か？ 環境設定 最初のReactコンポーネント JSXの基本 コンポーネントの状態とライフサイクル イベント処理 条件付きレンダリング リストとキー フォームの扱い コンポーネントの組み合わせ React Hooksの使用 まとめ はじめに このブログは、Reactをこれから学び始める方向けのガイドです。基本的な概念から始めて、実際のコード例を通じて、Reactの使い方を段階的に説明していきます。 Reactとは何か？ Reactは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。コンポーネントベースのアーキテクチャを採用しており、再…

上京して20年目に入った週。 2024W12 (2024-03-18 / 2024-03-24) 私は生まれた育った街を19歳になる年に離れたので、すでに東京で過ごす時間が人生で一番長くなっている。そのことが私にもたらしたことはなんなのか。それは、「東京」という地の利を得て、私の文化資本の度合いが時間をかけて移動したのでは、という可能性を悶々と考えている。これは、年始の辺りにまとめた「今年の課題図書を決めた」でも推測しているんだけど、ただの驕りの可能性もあって、その見極めも必要と感じている。 東京20年目。まだまだやれるはず。

チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探し…

こんにちは王子です。 最近は恐竜が闊歩するオープンワールドで過酷なサバイバルに挑むアクションゲーム「ARK: Survival Ascended」にハマっています。 旧Arkもひたすら遊んだので目新しさはありませんが、最初からIslandでプレイしてテリジノサウルスやアルゲンタヴィスをテイム＆ライドするくらいまで進みました。 打倒！ブルードマザー！！ さて、ここ数日、SSR(Server-Side-Rendering)方式の実現方法について調査する機会がありました。 SPA/SSR/SSGについては本記事の主題ではありませんので、先に簡略な表現で記載すると下記のようになるでしょうか。 SPA(…

はじめに こんにちは。WEARフロントエンド部Webチームの藤井です。私たちのチームでは、WEARのWebサイトのリプレイスと新規機能の開発を並行して進めています。これらの開発を推進する中で、Pull Requestのレビュー負荷を軽減し、開発生産性を向上させるための取り組みを行なってきました。本記事では、その中で効果的だった取り組みについてご紹介します。 目次 はじめに 目次 背景と課題 レビューの体制の薄さ スコープの広さ 仕様把握の負担 対応内容についての説明不足 処理の複雑性 仕様の抜け漏れ 動作確認の手間 課題解決に向けた取り組み レビュー体制の見直し Pull Requestを小さ…