Micro FrontendsというWebフロントエンドアーキテクチャがあります。 このアーキテクチャを知るために、書籍を読み、簡単なサンプルWebアプリを開発しました。 そこから学んだことをすべて議事録として残したいと思います。 モノリシックな Webアプリケーション Micro Frontends とは Micro Frontends の良さ Micro Frontends の難しさ Micro Frontends の作る上で考えること Micro Frontends サンプルWebアプリ サービス 仕組み @podium/podlet @podium/layout @podium/browser 状態管理, ルーティング その他 サンプルWebアプリで分かったこと SSR + CSR (Hydration) が実現可能 サービス内で技術スタックを選択できる サービス毎のフロントエンド
はじめに こんにちは、計測システム部フロントエンドブロックの平田です。 私が所属する計測フロントエンドブロックでは ZOZOMETRYというスマートフォンを用いて身体計測し、計測結果を3Dモデルやデータとして可視化し、Web上で管理できるtoBサービスを開発しています。 このサービスのフロントエンドではReact（Next.js）を採用しています。更にそれらの知見を深めるために、NYで開催されたJSNation、React Summit US 2024、そしてWorkshopに参加してきました。 この記事では現地参加ならではの経験や、参加したセッションへの考察、Workshopで学んだ内容などを紹介していきます！ はじめに JSNationとReact Summitとは？ Day 1 - JSNation Day 2- React Summit After Party 気になったセッション
開催期間: 2020.8.28 - 2020.9.10 Kindleストアの出版社横断プログラミング書籍セール 700冊以上が対象 50%ポイント還元 or 50%オフ (対象外のも含まれていますのでご注意を) 出版社別対象作品リスト: インプレス / 日経PB / SBクリエイティブ / マイナビ出版 / 秀和システム / 翔泳社 / 近代科学社 / MdN / NextPublishing (セール対象外多め) 本ページはキンセリの特設ページです アマゾンに当セールの対象作品一覧ページが存在しないので作成しました （間違い等ありましたら運営者までお知らせくだされば幸いです） 沈黙のWebライティング —Webマーケッター ボーンの激闘— 沈黙のWebマーケティング −Webマーケッター ボーンの逆襲− ディレクターズ・エディション アルゴリズムイントロダクション 第3版 総合版：世界標
サーバーレスアーキテクチャにおけるセキュリティの2つの質問 清水崇之氏（以下、清水）：では3つ目の相談にいきたいと思います。いただいた質問・相談が「サーバーレスアーキテクチャにおけるセキュリティについて」という非常にざっくりしたものになっているんですが、今回はサーバーレスのセキュリティというテーマなので、AWSの考えるサーバーレスのセキュリティについてまずはお話ししようと思います。 下川賢介氏（以下、下川）：（スライドを示して）「AWS Lambda／責任共有モデル」とタイトルに書いてありますが、実はこの前にEC2とかVMベースの責任共有モデルも公開されています。それと見比べてもらうと、黄色のAWSが管理している範囲がLambdaの場合は多くなっています。 例えばプラットフォームの管理とか、オペレーティングシステムやネットワークの設定の管理、そういった黄色で着色されている部分は、AWSのマ
もちろんそのパッケージに含まれるすべての機能を利用する場合の数値であり、実際の利用時にはもう少し小さいはずですが、それでもその差は歴然です。 そのほかの違いですが、パッケージとしてのpreactは、reactとreact-domが備えるすべてのAPIをそっくりそのまま実装しているわけではありません。ここは少し冒頭のコピーが誤解を招くところかもしれません。 まとめるとPreactは「ブラウザ独自のAPIを利用しつつ、必要最小限のAPIを選びぬいた分だけ軽い、ブラウザ専用のReact」というわけです。 preact/compatという互換レイヤー PreactはAPIを厳選しているため、Reactをターゲットにして作られた周辺ライブラリは、Preactを利用したプロジェクトでそのまま使えないのも事実です。 また、Reactで作られた既存のアプリケーションをPreactで置き換えたいと思っても、
React.jsに関連する 用語のまとめ - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React.js 関連用語 仮想DOM Reactノード 要素 JSX トランスパイル module bundler コンポーネント 制御されたコンポーネントと非制御コンポーネント ライフサイクル Props(小道具) props.children State(状態) React Hooks パフォーマンス SPA(シングルページアプリケーション) SSR(Server Side Rendering) SSG(Static Site Generator) 本日の記事ではReact.jsに関連するいくつかの一般的な用語をできるだけざっくりと簡単に定義していきます。 全ての関連用語をまとめるとあまりにも多いので記事を分割させて頂きます。 気になった箇所を選び飛んで読んで下さい。 React.js 関連用語 仮想DOM 『仮想』という表現がメモリに保持されReactDOMのライブラリによって
Why I Love React
I still remember when I first heard about React. It was January 2014. I was listening to a podcast. Pete Hunt and Jordan Walke were on talking about this framework they created at Facebook with no support for two way data-binding, no built-in HTTP library, no dependency injection, and in place of templates it had this weird XML-like syntax for the UI. And to top it all off, I was listening to it w
Why not use GraphQL?
We're looking for Golang (Go) Developers, DevOps Engineers and Solution Architects who want to help us shape the future of Microservices, distributed systems, and APIs. By working at WunderGraph, you'll have the opportunity to build the next generation of API and Microservices infrastructure. Our customer base ranges from small startups to well-known enterprises, allowing you to not just have an i
こんにちはかみむらです。Webサイトを公開するホスティングサービスでお悩みではないですか？ 最近ではNetlifyやFirebase Hostingなど、様々な種類のホスティングサービスが登場していて、選択肢が増えてきました。 そんな中、私が注目してるのがAWS Amplify Consoleです。特徴として、GitHubと連携したシンプルなデプロイ機能や、Basic認証、プレビュー機能など、Web制作の痒いところに手が届くサービスになっています。 前提事前にAWSのアカウントを作成してください。 https://aws.amazon.com/jp/ Nuxt.jsのプロジェクトをホスティングしていきます。あらかじめ、GitHubにプロジェクトをプッシュしておいてください。Nuxt.jsの記事はこちらでも書いています。よかったら一読してください。 Nuxt.jsとmicroCMSで採用ペー
React.js LLM Agent for next generation codingReactAgent is an experimental autonomous agent that uses GPT-4 language model to generate and compose React components from user stories. It is built with React, TailwindCSS, Typescript, Radix UI, Shandcn UI, and OpenAI API. Email addressGet updates → ReactAgent v0.1.0 I've been working in the couple of months on an experiment, trying to make GPT-4 much
こんにちは。クレイの浅海です。最近の休日は3歳児とマイクラをしています。 さて、業務ではここ1年ぐらい、DocBaseのフロントエンドのフレームワークをBackbone.jsからReact.jsに変更する作業をしていました。 完全に作り直しです。2万行を超えるBackboneのコードとお別れをしました。バイバイバックボーン。 詳細 → DocBaseのフロントエンド改修をどのように進めたか Reactで実装する上で苦労した点 DocBaseにはReactとマッチしない機能もいくつかあり、Reactで実装する上で苦労しました。その一つが、メモの表示です。「メモ」というのは、DocBaseの投稿の単位です。メモは例えばこのような投稿 メモの内容は、ユーザが投稿したmarkdownをサーバでHTMLに変換しデータベースに保存、それを表示時にサーバから受け取ったHTMLをReactが表示することに
JavaScript文字列の作成、検索、置換、その他の操作について学ぼう！初心者向け完全ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScript文字列について学習します。 JavaScriptでの文字列の作成、検索、置換、それらその他の操作について初学者のうちに知っておくべき必要のあるすべてを網羅してもらう事を目的とした記事となります。 プリミティブ 文字列でのメソッドとプロパティ 文字列の作成 オブジェクト 文字列の比較 パディング文字列 文字列内の検索 文字列内の文字を置換する 文字列の分割(配列に変換) 長い文字列と改行 特殊文字 テンプレートリテラル タグ付きテンプレートリテラル HTMLテンプレートリテラル 最後に JavaScriptには、基本的に2つの種類の文字列があります。 それらは文字列プリミティブと文字列オブジェクトです。 文字列プリミティブは不変であり、文字列オブジェクトは可変であることが、これらの種類の主な違いの1つです。 JavaScriptには、他にもさまざまなデータ型が存在し
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Awesome React この記事は次の日本語訳です（Reactの部分のみ抜粋） https://github.com/enaqx/awesome-react 公式 React Official Website React Documentation React GitHub コミュニティ Reactiflux Discord Channel React StackOverflow React Twitter オンラインでReactのコードを試せるサービス CodePen CodeSandbox JSFiddle チュートリアル Re
Railsしか書いてこなかった人間が令和のJavaScriptに触れて感じたこと - 駑馬十駕
JSを本格的に業務で書き始めたキッカケ 2018年の2月頃だっただろうか。前職でインターンしていた時にRNでのアプリ開発案件が立ち上がり、面接で某社の技術試験で書いた(ほとんど先輩に書いてもらった)Reactアプリケーションを社長とEMのが覚えてくださったこともありRNでのアプリ開発を任せて頂けることになった。チームにReactをかける人がいなかったのでまず自分がすべきことはそもそもReactがどんなライブラリでありRNでできること・できないこと、周辺のライブラリやエコシステムなど全体感を把握することだった。connpassでRNの勉強会に参加し、年配のRNエンジニアにちょこちょこ相談させて頂いた。結局Expoを採用するだけだったが当時の自分はそれだけで満足していた。 さて、いざ書き始めるがまずJSがナンもわからん。冗談抜きで何もわからなかった。React.jsの公式サイトのチュートリアル
訪問ありがとうございます。Webエンジニアの桝谷です。 今回は、『SIerから自社サービス開発を行うWebエンジニアにキャリアチェンジしたければ、まずSES企業に転職しろ！』というテーマで記事を書いていこうと思います。 1. 私が経験したキャリア本題に移る前に私の経歴について、簡単にお話させていただければと思います。私は4年制の情報系の専門学校を卒業し、独立系のSIerに新卒で入社。入社後は、VB.Net、Javaなどを用いた在庫管理システムの開発を経験し、入社後半年で物流系の基幹システムの開発プロジェクトにPLとしてアサインされ、得意先の営業から設計、開発、リリース、保守と上から下まで一通り経験しました。毎日、スーツをきて満員電車に揺られながら死んだように終電で帰宅という生活を送っていました。 ある休日、自分でサービスを何かサービス作ってみたいと思い立ち、色々調べた結果、毎日必死で頑張っ
PHPerの今とその先について in 2021 【PHP TechCafe イベントレポート】 - RAKUS Developers Blog | ラクス エンジニアブログ
弊社で毎月開催しPHPエンジニアの間で好評いただいているPHPエンジニアのための勉強会『PHP TechCafe』。2021年7月のイベントでは社外でご活躍されているPHPエンジニアにもご参加いただいて「PHPerの今とその先」について語り合いました。今回はその内容についてレポートします。 rakus.connpass.com PHPerの今とその先 PHPの基本知識 PHPの歴史 1990年代の黎明期 2000年代以降の機能強化 PHPエンジニアの人口／人気／キャリア 言語別の求人数ではPHPが1位 PHPバージョン PHP5がひとつの到達点 PHP7以降は言語機能が拡張され続ける IDE フレームワーク フロントエンドとPHP PHPの強み・弱み PHPは遅いのか？ コミュニティ PHP TechCafeについて PHPerの今とその先 以下のShowNoteをベースに、様々な切り口で
Reactアプリを構築するための基本的なWebpackとBabel設定ガイド - CRA不要の初心者向けチュートリアル - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
事前準備と条件 プロジェクト作成 package.jsonの設定 Webpackの設定 Babelの設定 HTMLファイルの生成 本記事は、Create-React-App(CRA)を使用せずにReactアプリを構築する方法について初心者向けに説明します。 なお、ご注意いただきたい点として、この記事を読まれる方はすでにReact.jsに精通されていることが予想されます。 そのため、React.jsについての詳細な説明は行いません。 つまり、React.jsについてはすでに知識があることを前提としています。 ご理解いただけますよう、よろしくお願いします。 事前準備と条件 ・ 当ブログの記事ではWindowsとなります。 ・ VS Codeを使用します。 ・ Node.js ・ JavascriptおよびES6からES8の構文に関する基本的な知識 ・ React.jsの基礎に精通している まず
Let me ask you a question - what kind of a machine do you code on? I bet it’s one of desktop, laptop, or maybe even a remote server with SSH connection. That’s the standard these days, but I think that there are some passionate (and crazy in a sense) people (like me) who’d like to stretch it even further. Those who’d like to be able to code literally anywhere, no matter what kind of a device they
なぜGraphQLを使うべきではないのか
Jens Neuse GraphQLの柔軟性、RESTのシンプルさとハイパフォーマンスを組み合わせたバックエンドサービス「WunderGraph」の創業者 この記事は、著者の許可を得て配信しています。 https://wundergraph.com/blog/why_not_use_graphql 私はGraphQLで世界が変わると思います。GraphQLを使って世界中のどんなシステムでもクエリができる未来が来るでしょう。私はその未来を作っているのです。では、なぜ私はGraphQLを使うことに反対なのでしょうか？私が個人的に嫌なのは、コミュニティがGraphQLの利点を宣伝し続けているときに、それが非常に一般的なもので、実際にはGraphQLとは全く関係のないものだという点です。もっと普及させたいのであれば、正直に言って、楽観的過ぎる見方を改めるべきだと思います。この投稿は、Kyle Sc
Next.jsのデメリット【欠点】を理解する - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Webテクノロジーは、ほぼ毎月のように成長し、変化し続けています。 決定を下すには、各オプションの長所と短所を事前に知る必要があり、自信を持って適切な選択を行うことはますます困難になってきています。 本日はReactを利用したフレームワークであるNext JSの欠点に焦点を当てて解説していきます。 Next.jsとは Next.jsの短所 技術的な短所 プロジェクトにNext.jsは必要か？ 最後に Next.jsとは Next.jsは、以前はZEITとして知られていたVercelという名前の会社が所有しており、そのオープンソース開発プロセスを主導および維持しています。 Next.jsの最初の作成者は、VercelのCEOであるGuillermo Rauch氏でした。 Next.jsのサーバーレスアプローチにより、Vercelを使用してWebサイトおよびアプリをデプロイできるため、ホスティ
塵も積もれば山となる、Vue.js製スプレッドシートのパフォーマンス改善記 - ANDPAD Tech Blog
はじめに はじめまして、オクトのフロントエンドエンジニアの小泉です。約1年前に入社し、Vue.js（Nuxt.js）でプロダクトのWebフロント開発に携わっています。 初めて会社のブログに寄稿するにあたって、自分がオクトでどんなことをしているかを書こうと思ったのですが、私が担当しているプロダクトは現時点で正式リリース前のため、今回はその中に組み込まれている簡易スプレッドシート機能について、また特にそのパフォーマンスを改善するために行ったことについて書いていきます。 といっても、スプレッドシート的なものを自前で実装しようという人はなかなかいないと思いますので、データ量の多いリアクティブなサービスをVue（Nuxt）で開発する際のハマりポイントとして参考程度に流し読みして頂ければ幸いです。 スプレッドシート機能とは 現在、オクトで自分が開発に携わっているプロダクトには、商品情報を入力していって
この記事は、プロジェクトにReactを使用しようと検討中の方で、「Reactって難しいのでは？」「Reactと一緒にくっついてくるReduxって不可欠なの？」などという懸念を持っている方に向けて記載しています。 私はReactを使用して2020年11月時点で9ヶ月ほど個人的なプロジェクトの開発をしている者です。現時点で上記の問に端的に答えるとするなら、Reactは難しくないし、Reduxは使いたくなければ不可欠ではないです。素のReactの仕様自体は、stateとprops、renderをうまく管理すれば極めてシンプルに作り込みができて、使い勝手はよい方です。多くの人がReactは難しいと感じるのは、Reactとセットで導入されるReduxというライブラリが元凶になっていると想像しています。 Reduxの使用で苦しめられた私が行き着いたのは、Reduxの代わりにEventEmitterを使
React v18から17にダウングレードする方法【CRAまたはCNA】 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
React.jsがReact v18をリリースしてから、CRAはこの最新バージョンのReactをインストールします。 つまり、create-react-appは最新のすべてのReactバージョンと依存関係バージョンを使用して、まったく新しいReactアプリケーションを作成するためのCLIツールです。 ですが、現時点ではすべてのパッケージがこの最新バージョンのReact 18をサポートしているわけではありません。 そのような場合、プロジェクトで依存関係エラーが発生します。 この問題は、React 18をまだ使用する準備ができていない依存関係に対してより広く存在します、React v18でまだ動作できない内部ライブラリがあるため、この問題が発生しています つまり、使用したい他の多くの依存関係がバージョン18に対して最新ではなくサポートがされていないので、ダウングレードをしたい場合です。 既存の
WindowsでのReact Native開発環境構築と基礎文法解説：Expoを使った最初のプロジェクト手順 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
一般に、React Nativeを使い始めるには、「Expo CLI」または「React Native CLI」を使用する2つの方法があります。 どちらの方法にもそれぞれ長所と短所がありますが、React Nativeの公式ドキュメントでさえ、モバイル開発が初めての場合はExpo CLI から始めることを提案しております。 したがって、当記事ではWindowsを使用した最初の React Nativeプロジェクト用にExpo開発環境をセットアップするために必要なすべての手順を説明致します。 そして、Windows上でReactを使用してiOSアプリ開発を試してみたいと思っている方に向けた入門記事でもあります。 ですが、MacOSをお持ちの方はReact Native CLIを使用してプロジェクトをすばやく起動するのが標準的な方法ですので、すぐに移行をお勧めします。 また、この記事では、Re
2019年のJavaScriptとDartの比較
さて、あなたが何を既に心得ているかはわかっています。伝説のJavaScript言語を使って、Webアプリケーション、サーバーサイドアプリケーション、デスクトップ、およびモバイルアプリケーションでさえ、作ることができたんだと思ってましたよね？その点、間違っているかもしれませんよ。2019年を早送りしてみましょう。私達には、より簡単かつ効率的に、上記のものの大部分を行える（それほど新しくない）言語があるのです。ハロー、ダート！ さて、両者の競争は直接対決となっているようです。 2019年に、これら2つのプログラミング言語が互いにどのように比較されるかを見てみましょう。 2019年におけるJavaScriptの必要性は何か？ この質問を誰かに聞くと、たいてい「当然必要でしょう？我々は皆、毎年JSが必要ですよ！」という答えを得るでしょう。全くその通りです。今年を見ていく前に、以前を振り返ってみまし
はじめに 2016年に.NET Coreが誕生し、Windowsのプラットフォーム依存がなくなりました。以前書いた記事に対するコメントで「C#？Visual Studio要るんでしょ？」、「開発を支えるツールがあるの？」など、C#がWindows以外で動くことは知っているけど、実用に耐えるのか？を疑問に思っている人が多いと感じました。私が個人サービスを開発して得た経験や知見を通じてVisualStudioがなくても充分に開発出来るということを知ってもらえたら嬉しいです。ハンズオン形式でご紹介しますので、よろしければ作成したリポジトリをご覧ください。 事前準備 .NET Coreを利用するためには.NET SDKと呼ばれる.NETアプリケーションに必要な一連のライブラリとツールが必要です。以下のURLからダウンロードしてください。 環境変数の設定 エラーの原因を探るためにstackoverf
The top React UI libraries and kits in 2023 - LogRocket Blog
Chidume Nnamdi I'm a software engineer with over six years of experience. I've worked with different stacks, including WAMP, MERN, and MEAN. My language of choice is JavaScript; frameworks are Angular and Node.js. Editor’s Note: This list of React UI libraries was last updated on 5 October 2023. React is currently on top of the JavaScript food chain. Stack Overflow’s 2023 Developer Survey shows Re
Reanimate
Reanimate is: An animation library: Animations are written as code. Written in Haskell: High-level, purely functional, expressive. Based on SVG: Powerful and introspective. Cross-platform: Windows, MacOS, and Linux. Reanimate aims to be a batteries-included way of creating animations and illustrations. It builds on two core ideas: (1) graphics (both still and animated) should be expressed as code,
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
はじめに React公式には知識ゼロからReactのコンセプトを学べる、非常に丁寧なチュートリアルが用意されています（日本語版あり）。 右も左もわからない状態からReactを学ぶことになったとき、このチュートリアルには大いに助けられました。ただしこのチュートリアルは型のない素のJavaScriptで書かれています。 ここにTypeScriptを導入するとパワフルなサジェスト機能が使えるようになり、コードがより見通しの良いものになります。 Reactでは、コンポーネントと呼ばれる機能単位をブロックとして組み合わせることが基本となります。Reactにおける型推論の恩恵の一つは、コンポーネントが要求するパラメーター（しばしば"props"という名のオブジェクトとしてまとめられます）が何であるかコード上でマニュアル化され、誤っている場合には実行前に検知できることです。 さらに、Reactにはバージ
React JSを使用した【PWA】化の構築方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
GoogleはProgressive Web App(PWA)という新しいテクノロジーを提供しました。 PWAテクノロジーは市場に出回ってからしばらく経ちますが、その人気はここ数年で急上昇しております。 PWA開発の基本と定義を見ていきましょう。 PWAとは？ PWAで構築する理由 ReactでPWA Webアプリ作成 Manifest.json アプリのビルド Service Workerの登録 最後に PWAとは？ PWA（Progressive Web App）は、Webアプリケーションとネイティブアプリケーションの利点を組み合わせたアプリケーションであり、ハードウェア機能を含めたクロスプラットフォームアプリを提供します。 PWAは、ネイティブアプリよりも開発とサポートが迅速で、低コストであるため、注目されています。 この技術は、モバイルアプリとWebサイトの両方で最高のユーザーエク
1. まずは基本から！React.jsとは？ React.jsはFacebookが開発したフロントエンドのライブラリ。コンポーネントという小さな部品を組み合わせて、動的なユーザーインターフェースを構築するのが得意。SPA (Single Page Application) での開発が主流で、ボタンやフォームなどのUI部品を効率よく作れるんだ。 あれ....? じゃあReactでもう良くない...? 結論 ページ数が少ない小規模な開発ならReact!大規模ならNext.jsか他のやつ！ ページ数が多い大規模の開発ならReactだと読み込み遅くなっちゃう！ 2. じゃあ、Next.jsって何？ Next.jsはReactの上に乗っかってるフレームワーク。このNext.jsの一番の魅力は、サーバーサイドレンダリング(SSR) と スタティックサイト生成(SSG)。これにより、クライアントサイドの
React初学者が必ず押さえておきたい考え方とは？【コンポーネント指向のフロントエンド】 | in-Pocket インポケット
こんにちは、i3DESIGNエンジニアの田口です。 今回は「React初学者が必ず押さえておきたい考え方とは？」というテーマでお話します。 こちらの記事は、下記のような方を対象としています。 プログラミングを学習中でフロントエンドの技術に興味のある方 Reactを触ったことはないが、興味がある方 私自身が、HTML, CSS, Pug, Sass, JavaScriptでの開発から、Reactでの開発に移行してからの約半年で感じた体験をもとにお話し致します。 まず本題に入る前に、簡単にReactの説明をします。 Reactとは？ Reactとは、Facebook社とコミュニティによって開発されているユーザーインターフェース（UI）構築の為のJavaScriptライブラリです。 実は、Reactはフレームワークではなく、ライブラリです。（Vue.jsやAngular.jsはフレームワーク、j
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、新井康太と申します。東京大学大学院の修士1年で、普段は音色を直感的に可視化する研究などを行っています。私はフロントエンド領域の開発が好きで、今回のLINEの夏インターンでは、フロントエンド開発センター (UIT) Frontend-Dev9チームでフロントエンド開発の業務に携わらせて頂きました。主に任せて頂いた業務は、LINEバイト (https://baito.line.me/) のWebからの流入を強化する、といった内容で、具体的には、サイトマップや構造化データの整備、ページのパフォーマンス向上など、様々な観点からWebサービスとしての品質向上に取り組みました。 このブログでは、こういった施策全般を"Web最適
React Hooks 入門 モーダル実装 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
事前準備 モーダル実装 本日はReact.js Hooksでモーダルコンポーネントの実装を他のライブラリを活用せずに、独自に作成していきます。 こちらは初学者様に向けた入門となります。 Web開発されてるならば、モーダルはごく一般的なUX要素です。 現在のページの上部に表示されるダイアログボックス/ポップアップウィンドウとなっています。 より効率よくそしてUIを壊す事なくコンテンツを動的にレンダリングする事を意識して作成していく事が重要となります。 当ブログの記事では複雑なコードではなくシンプルな実装となっております。 事前準備 • create-react-appを使用していきます。 npx create-react-app プロジェクト名 • VS Code • React Hooksの最低限の理解 モーダル実装 まずはコンポーネント全体コードからどうぞ。 import { useSt
GraphQL Rubyと実際の開発 - Qiita
この記事はGLOBIS Advent Calendar 2020の19日目の記事です。 新規サービスの開発にバックエンドはRuby on Rails + GraphQL、クライアントサイドはReactを使っています。バックエンド側ではGraphQL Rubyをライブラリとして使用しています。実際にGraphQL Rubyを開発に盛り込んでしてきたことを書いていきます。 なぜ GraphQL + React を採用したのか 我々が現在開発中の新規サービスではサーバーサイドに GraphQL、フロントエンドに React.js を採用しました。 グロービスでサービス側はフロントエンドに React.js を主に採用しており知見・リソース共にサービス立ち上げの開発速度を担保するために十分でした。サーバーサイドについては Ruby on Rails を利用しており、APIについては Swagger
ReactとTypeScriptでuseEffectフックの正しい使用方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
useEffectとは 暗黙のリターン useEffectでのasync/await 最後に React.jsでは副作用を処理するためのフックが２つございます。 ・ useEffect ・ useLayoutEffect これらの主な違いは、詳しくは解説致しませんが、全ては実行時のタイミングです。 簡単に言ってしまえば、非同期なのか同期処理なのかです。 以下で、解説しておりますので参照下さい。 dev-k.hatenablog.com useEffectとは useEffectフックは２つの引数を受け入れます。 useEffect(() => { // Mounting return () => { // Cleanup function unmount } }, [//Updating]) // 第2引数 デフォルトでは、すべての再レンダリングで実行しますが、オプションとして２番目の引数
React.js は、最も一般的なフロントエンド JavaScript フレームワークです。 開発者は、HTML と JavaScript の組み合わせである JSX を通じて、自然な方法でビューを作成できます。 開発者は、アプリケーション全体で再利用可能なブロック用のコンポーネントを作成することもできます。 このラーニング パスでは React を紹介し、この強力なフレームワークを使用するために開発者が必要とする重要なスキルについて説明します。
React.jsでのインポートとエクスポートとは 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactを学び始めたときにまず気付く初期の構文のいくつかは、「インポート」と「エクスポート」というフレーズを目にする事がほとんどかと思います。 これらの用語は何なのか？またReact.jsにとって非常に重要な理由は何？どの側面がそれらを必要とするのか？これらのまだ非常に新しい概念を初学者様にそれらをここで説明することになります。 エスクポートとインポートの役割と概念 Reactエクスポートとインポート扱い方 それらを組み合わせ 最後に エスクポートとインポートの役割と概念 インポート・エクスポートの概念は、JavaScriptのES6モジュールです。 JavaScriptのES6モジュールは、以下で詳しく解説していますので参照ください。 dev-k.hatenablog.com React.jsでインポート・エクスポートすると、モジュラーコードを記述できます。 コードを複数のファイルに分
WebサイトとWebアプリの違い 知っておくべきこと 基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ウェブ開発とモバイルアプリ開発を専門とするプログラマとして、私たちはクライアントとそれぞれの目的について頻繁に話し合い、それらを区別する方法を説明してきています。 そのため、これら2つの主な違いを指摘するガイドを作成することを考えました。 いくつかのトリックを知っていれば、それらを区別するのは本当に簡単です。 本日は初心者様にこれらを解説致します。 Webサイト Webアプリケーション 類似点 違い デメリット 適切な選択は？ まとめ 最後に 完全なデジタル時代に移行するにつれて、Webサイトの人気がますます高まっております。 2022年では世界的にも、中小企業の71%以上がWebサイトを保有しております。 保有していない場合、ワールド・ワイド・ウェブ(WWW)の時代において、現代の世界で生き残ることは困難となります。 ただし、Webサイトを必ず持っていなければならないというわけではござい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Micro Frontends を学んだすべて -
JSNation & React Summit US 2024参加レポート - ZOZO TECH BLOG
【Kindle】夏のプログラミング書 合同フェア (2020/8/28から9/10まで)
Cognito×API Gatewayで認証・認可を実現 ロール管理と不正なアクセスを防止するアーキテクチャ
Preactで始める軽量コンポーネント指向開発 | 第1回 Preactの特徴
Amplify Consoleで楽々ホスティング - Basic認証からドメイン設定まで解説します
ReactAgent - The open-source React.js LLM Agent
Reactで生HTMLを自由自在に加工する
Awesome React - Reactのオススメ記事・ライブラリ・ツール まとめ - - Qiita
『SIerからWeb系への転身』にはSES企業を使え｜Kazuma Masutani
The state of web development on mobile
React.jsは難しいのか？Redux代替にEventEmitterを使用して難易度を下げる
「C#？Visual Studio要るんでしょ？」からの脱却 - Qiita
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
React公式チュートリアルをTypeScriptで（Hooks導入以後）
Next.jsってそもそもなんで必要なんだっけ - Qiita
【インターンレポート】LINEバイトのWeb最適化
React を使って初めての Web アプリを作成する - Training