もちろんそのパッケージに含まれるすべての機能を利用する場合の数値であり、実際の利用時にはもう少し小さいはずですが、それでもその差は歴然です。 そのほかの違いですが、パッケージとしての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 not use GraphQL?
Are you looking for an Open Source Graph Manager? Cosmo is the most complete solution including Schema Registry, Router, Studio, Metrics, Analytics, Distributed Tracing, Breaking Change detection and more. I think GraphQL will change the world. There will be a future where you can query any system in the world using GraphQL. I'm building this future. So why would I argue against using GraphQL? My
こんにちはかみむらです。Webサイトを公開するホスティングサービスでお悩みではないですか？ 最近ではNetlifyやFirebase Hostingなど、様々な種類のホスティングサービスが登場していて、選択肢が増えてきました。 そんな中、私が注目してるのがAWS Amplify Consoleです。特徴として、GitHubと連携したシンプルなデプロイ機能や、Basic認証、プレビュー機能など、Web制作の痒いところに手が届くサービスになっています。 前提事前にAWSのアカウントを作成してください。 https://aws.amazon.com/jp/ Nuxt.jsのプロジェクトをホスティングしていきます。あらかじめ、GitHubにプロジェクトをプッシュしておいてください。Nuxt.jsの記事はこちらでも書いています。よかったら一読してください。 Nuxt.jsとmicroCMSで採用ペー
フロントエンドでシステム開発を2年半続けてハマったことから得た教訓3つ | フューチャー技術ブログ
こんにちは。フューチャー 3 年目の柏木です。 はじめにReact、Next.js を触り始めて２年半ほど経ちました。 これまでによくつまずいたポイントから、自分なりのノウハウを言語化してみます。 想定する読者 React、Redux（、Next.js）を初めて触る人 システム開発の中で初めてフロントエンドを担当することになった人 開発で使用している技術要素 Node.js（10.5.0） Express（4.16.3） Next.js（5.1.0） React.js（16.4.1） Redux（3.7.2） ノウハウたち次の1~4について順番に説明していきます フロントで持つべきデータの形とデータベースに登録するデータの形は必ずしもイコールではない React の各ライフサイクルで適切な処理を行う 更新を React が正しく検知してくれるよう、値はコピーしてまるっと置き換える （おまけ
Flawwwless uiはシンプルなReact.jsのコンポーネントライブラリです。シンプルで扱いやすいように設計されている印象でした。 用意されたUIコンポーネントはよく使われるものでモーダルウィンドウやテーブル、ボタン、メニューやレイアウトなどです。開発者の方が開発スピードを上げるために自作したものだそうでこのたびOSSとして公開した、という事みたいです。 覚えておいて損はないかなぁと思います。ライセンスはMIT。 Flawwwless ui
こんにちは。クレイの浅海です。最近の休日は3歳児とマイクラをしています。 さて、業務ではここ1年ぐらい、DocBaseのフロントエンドのフレームワークをBackbone.jsからReact.jsに変更する作業をしていました。 完全に作り直しです。2万行を超えるBackboneのコードとお別れをしました。バイバイバックボーン。 詳細 → DocBaseのフロントエンド改修をどのように進めたか Reactで実装する上で苦労した点 DocBaseにはReactとマッチしない機能もいくつかあり、Reactで実装する上で苦労しました。その一つが、メモの表示です。「メモ」というのは、DocBaseの投稿の単位です。メモは例えばこのような投稿 メモの内容は、ユーザが投稿したmarkdownをサーバでHTMLに変換しデータベースに保存、それを表示時にサーバから受け取ったHTMLをReactが表示することに
フリーランスタイプ別おすすめ エージェントを今すぐ見る フリーランス(個人事業主)として独立・開業したら、案件や取引先の開拓・交渉・契約は基本的に自分一人で行う事になります。 しかしながら、会社員(サラリーマン)時代にこのような交渉ごとを行って来なかったエンジニアやデザイナーは苦手としているスキルかと思います。 最初は仕事欲しさに安請け合いをしてしまう事も出てくるかもしれません。もしそう感じているフリーエンジニアやデザイナーさんでしたら、無理して自分で不向きな営業をして案件を取ってくる必要はありません！ Webディレクターも、事業会社の自社サービスやアプリ運営をされている部署、もしくはプロデューサーとの分業がしっかりされていた環境でしたら営業は未経験だと思います。 しかし今や、副業や兼業で稼働している人を含めると、日本には462万人のフリーランスがいると試算されています（※内閣官房日本経済
JavaScript文字列の作成、検索、置換、その他の操作について学ぼう！初心者向け完全ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScript文字列について学習します。 JavaScriptでの文字列の作成、検索、置換、それらその他の操作について初学者のうちに知っておくべき必要のあるすべてを網羅してもらう事を目的とした記事となります。 プリミティブ 文字列でのメソッドとプロパティ 文字列の作成 オブジェクト 文字列の比較 パディング文字列 文字列内の検索 文字列内の文字を置換する 文字列の分割(配列に変換) 長い文字列と改行 特殊文字 テンプレートリテラル タグ付きテンプレートリテラル HTMLテンプレートリテラル 最後に JavaScriptには、基本的に2つの種類の文字列があります。 それらは文字列プリミティブと文字列オブジェクトです。 文字列プリミティブは不変であり、文字列オブジェクトは可変であることが、これらの種類の主な違いの1つです。 JavaScriptには、他にもさまざまなデータ型が存在し
My top React techtalks of 2019
Are you curious to know what happened in 2019 in the React world, that you should know about? I watch a lot of dev conference talks. They’re a great way to learn new things and stay up-to-date in my career as a developer. In 2019, there were 23 React conferences—with ~500 talks (~180 hours)—and I covered all of them, on Hero35. The following talks are the ones that I enjoyed the most, due to their
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としてアサインされ、得意先の営業から設計、開発、リリース、保守と上から下まで一通り経験しました。毎日、スーツをきて満員電車に揺られながら死んだように終電で帰宅という生活を送っていました。 ある休日、自分でサービスを何かサービス作ってみたいと思い立ち、色々調べた結果、毎日必死で頑張っ
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
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に対して最新ではなくサポートがされていないので、ダウングレードをしたい場合です。 既存の
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
久しぶりにReduxを使ったら使い方をすっかり忘れていました。 改めて勉強しなおしたのでメモしておきたいと思います。 Reduxとは Reduxのメリット 3つの原則 1. 真実の出所は1つ（Single source of truth） 2. stateは読み込み専用（State is read-only） 3. 変化は純粋（副作用のない）関数で作られる（Changes are made with pure functions） Reduxの要素 Action Action creator Reducer combineReducers Store Storeの作成方法 Reactと使う コンテナコンポーネントとプレゼンテーショナルコンポーネントとに分ける プレゼンテーショナルコンポーネントについて コンテナコンポーネントについて mapStateToProps mapDispatchT
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が必要ですよ！」という答えを得るでしょう。全くその通りです。今年を見ていく前に、以前を振り返ってみまし
概要 Gatsbyは、React.jsを使ったStatic Site Generator(SSG、静的サイトジェネレーター)で、とても早いウェブサイトを作れる技術です。静的なサイトだけでなく、CSRやSSRサイトも作れますが、この記事では静的サイトに集中しておきたいと思います。Gatsbyが使用するGraphQLについても扱います。 Google Lighthouse Score 学生時代には取れなかったオール100点 完成品はこちら コードはこちら 対象読者 Gatsbyがどう動くか知りたい方 Reactの基本的知識がある方 ブログをScratchで作りたい方 目標 Gatsbyの構造を知ることによって、色んなライブラリーを応用できるようになる 注意事項 完成品の基本的構造にふれるだけなので、上記の例と全く同じものが作られる記事ではありません。 Gatsbyのことがよくわかってて、開発時
この記事は次の日本語訳です（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 チュートリアル Reactのチュートリアル React Official Tutorial - 公式 Using React in Visual Studio Code - ReactをVSCodeで使う Scrimba - Learn React for free interactively - Scr
はじめに 2016年に.NET Coreが誕生し、Windowsのプラットフォーム依存がなくなりました。以前書いた記事に対するコメントで「C#？Visual Studio要るんでしょ？」、「開発を支えるツールがあるの？」など、C#がWindows以外で動くことは知っているけど、実用に耐えるのか？を疑問に思っている人が多いと感じました。私が個人サービスを開発して得た経験や知見を通じてVisualStudioがなくても充分に開発出来るということを知ってもらえたら嬉しいです。ハンズオン形式でご紹介しますので、よろしければ作成したリポジトリをご覧ください。 事前準備 .NET Coreを利用するためには.NET SDKと呼ばれる.NETアプリケーションに必要な一連のライブラリとツールが必要です。以下のURLからダウンロードしてください。 環境変数の設定 エラーの原因を探るためにstackoverf
お疲れ様です。 MDグループの志村（@naokiur）です。 エンジニアブログ初投稿です。よろしくお願い致します。 入社して2年、私服OKな弊社ですが、 個人的な好みで、ほとんどスーツで出社しています。 フロントエンドにVue.js、 バックエンドにDjango REST Frameworkを利用し、 業務アプリケーション開発に従事しております。 この度、 リリース後、フロントエンド側のバージョンアップがあったとき、 ユーザーにどうやってお知らせするのか？ の解決策を1つ、 構築したので、その話を記載させて頂きます。 前提 Angular, React, Vue.jsなど、様々なフレームワークを用いて作成される、 シングルページアプリケーション（SPA）。 そのSPAと、バックエンドにREST APIを用いたオーソドックスなシステムの動きとして、 以下のような流れがあると認識しております。
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
Microsoftは米国時間2019年8月21日、Webアプリケーション開発を高速化するVisual Studio Codeの拡張機能「Web Template Studio(以下、WebTS)」が大きく進化したことを公式ブログを通じてアピールした。なお、WebTSのソースコードはGitHubで公開している。 新たなWebTSはコミュニティからのフィードバックに基づいて、AngularやVue.js、Flaskといったフレームワークを新たに追加。バックエンドフレームワークはFlaskを加えて、Node.jsとFlaskいずれかを選択できる。Webアプリケーション開発時のウィザードも再設計し、テンプレートの見直しや、クラウドホスティング用にApp Serviceを追加した。 新たにフロントフレームワークとしてReact.js、Vue.js、Angular、バックエンドフレームワークとしてFl
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
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 - Wikipedia
React (リアクト) は、Meta（旧Facebook）とコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリである[3]。React.jsまたはReactJSの名称でも知られている。 Reactはシングルページアプリケーションやモバイルアプリケーションの開発におけるベースとして使用することができる。複雑なReactアプリケーションでは通常、状態管理・ルーティング・APIとの対話のための追加のライブラリが必要となる[4]。 歴史[編集] ReactはFacebookのソフトウェアエンジニアであるJordan Walkeによって開発された。PHP向けのHTMLコンポーネントフレームワークであるXHP（英語版）の影響を受けている[5]。2011年にFacebookのニュースフィード上で最初に使用され、2012年にはInstagramでも使用される
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)。これにより、クライアントサイドの
一応フリーランスなので、自分のできることを整理するためにまとめた。 （文章でまとめるの難しい...） ソフトウェア開発 スクラム開発に関する基本的な知識がある スクラム開発の経験がある スクラムマスターの経験がある Ruby・Rails 1人で仕様の調整を行い、実装できる コードレビューを通して、若手エンジニアにRailsを教えられる OSSにプルリクを投げられる RailsのIssue/PRを読んでいる（＝最新機能をある程度知っている） 勉強会に参加したり、登壇したことがある JavaScript ES2015の基本的な文法を知っている jQueryを使った経験がある React.jsでステートレスを意識してコンポーネントを書ける Puppeteerを使ったE2Eテストを書いた経験がある CSS Bootstrap v3 の基本的な知識がある BEMの基本的な知識がある 他サイト、周りの
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、新井康太と申します。東京大学大学院の修士1年で、普段は音色を直感的に可視化する研究などを行っています。私はフロントエンド領域の開発が好きで、今回のLINEの夏インターンでは、フロントエンド開発センター (UIT) Frontend-Dev9チームでフロントエンド開発の業務に携わらせて頂きました。主に任せて頂いた業務は、LINEバイト (https://baito.line.me/) のWebからの流入を強化する、といった内容で、具体的には、サイトマップや構造化データの整備、ページのパフォーマンス向上など、様々な観点からWebサービスとしての品質向上に取り組みました。 このブログでは、こういった施策全般を"Web最適
React and TypeScript are two awesome technologies used by a lot of developers these days. Knowing how to do things can get tricky, and sometimes it’s hard to find the right answer. Not to worry. We’ve put together the best practices along with examples to clarify any doubts you may have. Let’s dive in! How React and TypeScript Work Together Before we begin, let’s revisit how React and TypeScript w
2019年1月30日、株式会社Re:Buildが主催するイベント「【Nuxt.js/Vue.js】スタートアップ企業導入事例」が開催されました。近年注目を集めるNuxt.jsやVue.jsを実際の開発現場でどのように活用しているのか、スタートアップ4社が集い、自社の取り組みを語ります。プレゼンテーション「TABETEのフロントエンドをNuxt.jsでリプレイスする話」に登壇したのは、株式会社コークッキングの榊原徹哉氏。 フロントエンドをVue.jsでリプレイスする 榊原徹哉氏（以下、榊原）：最初に自己紹介になりますが。私は榊原徹哉といいます。好きな言語やフレームワークはVue.jsとか、Rubyが好きです。好きなものはガジェットです。例えば、indiegogoでおもしろいガジェットを漁ったりとか、家をスマートハウス化したりしています。最近の趣味はInstagramで、会社のInstagra
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Preactで始める軽量コンポーネント指向開発 | 第1回 Preactの特徴
Amplify Consoleで楽々ホスティング - Basic認証からドメイン設定まで解説します
オープンソースのシンプルなReact.jsコンポーネントライブラリ・「Flawwwless ui」
Reactで生HTMLを自由自在に加工する
徹底比較！評判の良いフリーランスエージェントおすすめ18社2024
『SIerからWeb系への転身』にはSES企業を使え｜Kazuma Masutani
The state of web development on mobile
React.jsは難しいのか？Redux代替にEventEmitterを使用して難易度を下げる
ReactAgent - The open-source React.js LLM Agent
React + Redux の基本的な使い方 - KDE BLOG
GatsbyでGoogle Lighthouseで満点を取るブログを一から作る - Qiita
Awesome React - Reactのオススメ記事・ライブラリ・ツール まとめ - - Qiita
「C#？Visual Studio要るんでしょ？」からの脱却 - Qiita
Vue.jsで作ったSPAだけどアプリケーションの更新をお知らせしたい！｜ハンズラボ株式会社
MS、Webアプリケーション開発の「Web Template Studio 2.0」リリース
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
Next.jsってそもそもなんで必要なんだっけ - Qiita
持っている技術の棚卸し 2019年 - アジャイルSEの憂鬱
【インターンレポート】LINEバイトのWeb最適化
React with TypeScript: Best Practices — SitePoint
Ruby製サービスのフロントエンドをVue.jsでリプレイスした理由