Hey there! 👋🏼 I'm Mateo Garcia, I co-organize a community in Medellin, Colombia called React Medellin. This year I started a series of posts called 'Coding with Mateo'; My first post was about 6 ways to write a React component. Today I want to share with you what I have researched for a couple of weeks about how rendering works in React. To begin with, I will say that the concept of rendering in
Stimulus、悪くない
Stimulus: A modest JavaScript framework for the HTML you already have. 2020年末にリリースされた Stimulus 2.0 を試して気づいたことをメモしておく。Stimulus は Rails で有名な Basecamp のメンバーによって開発された生 DOM をベースに、できるだけ template に JS を書かずに動的な DOM の生成、変更を実現するためのライブラリである。 昨今流行りの React, Vue, Angular などの VirtualDOM 系のツールとは根本的に考え方が異なり、今からこれを採用するのはやや申し訳ないというか、正直に言うとよいイメージはなかったし、例えばフロントエンドエンジニアとしてスキルアップしたいぜーという人には合わないと思うが、ただ、どうせサーバサイドの開発が必要で、分
Androidも宣言的UI（が当たり前になりそうな）時代に非宣言的UIライブラリでこの先生きのこるには - dely Tech Blog
こんにちは。dely株式会社でAndroidチームのマネージャーをやっているうめもり（Twitter: @kr9ly）です。 この記事は「dely #1 Advent Calendar 2020」の22日目の記事です。 21日目の記事は、kazkobay さんによる「デザイナーからPdMになる時に役に立った本と方法まとめ」でした。エンジニアがPdMになるときにも役に立ちそうな本なので、暇を見つけて読んでみようと思いました。 note.com 「dely #2 Advent Calendar 2020」もありますので、是非そちらもご覧ください。 Jetpack Compose前夜 皆さん、Jetpack Compose使ってますか？直近ですと12/2に1.0.0-alpha08、12/16に1.0.0-alpha09がリリースされ、開発が大分活発なのがうかがえますね。正式版リリースは来年末か
Discussion Threads dev.toではDiscussion Threadsという、議論やコメントが前提の記事を立てることができます。 まあ見てのとおり、大半のスレッドは閑古鳥が鳴いてますが。 最近盛り上がったスレッドとしてはShow off your Workspace、日本でいうところの環境晒しスレがあります。 みんな格好いい環境ばかりで驚きですね。 これはもう私も自分の環境を晒して世界を絶望と混乱の渦に落とし入れなくては。 そんなわけで以下は、dev.toに先日投稿されたDiscussion Threadsのひとつ、Which JavaScript frameworks are worth learning in 2021?のコメントを軽く抜き出してみたものです。 スレ主もI am sure there are no right answersと言っているように、決して
JSer.info #476 - TypeScript 3.8が正式にリリースされました。 Announcing TypeScript 3.8 | TypeScript 型定義だけをインポート/エクスポートできるimport type/export typeの追加、ECMASCript Proposal Stage 3のECMAScript Private Fields、Top-Level awaitのサポートが追加されています。 また、tsconfig.jsonのtargetとmoduleオプションにes2020を追加、watchOptionsで--watch時の挙動の設定の追加、assumeChangesOnlyAffectDirectDependenciesオプションで"Fast and Loose"なインクリメンタルビルドをサポートしています。 現在v7.0.0-alpha.1が公
Stimulus、悪くない
Stimulus: A modest JavaScript framework for the HTML you already have. 2020年末にリリースされた Stimulus 2.0 を試して気づいたことをメモしておく。Stimulus は Rails で有名な Basecamp のメンバーによって開発された生 DOM をベースに、できるだけ template に JS を書かずに動的な DOM の生成、変更を実現するためのライブラリである。 昨今流行りの React, Vue, Angular などの VirtualDOM 系のツールとは根本的に考え方が異なり、今からこれを採用するのはやや申し訳ないというか、正直に言うとよいイメージはなかったし、例えばフロントエンドエンジニアとしてスキルアップしたいぜーという人には合わないと思うが、ただ、どうせサーバサイドの開発が必要で、分
この記事はNext.js Advent Calendar 2019 16日目の記事です。 Qiitaに書くのは久々の @_Ria0130です。 SPAを作っていても Transition を実装したことない方結構いらっしゃるんじゃないでしょうか？ ページ遷移と Transition の組み合わせって結構難しくって、クロスフェードとかをしようとすると遷移前と遷移後の要素をどちらも描画したままスタイルを適応する必要があります。 React など VirtualDOM を扱うライブラリを採用しているとDOMの反映を自動でしてくれて楽な反面、要素のコントロールが自分でできないので少し複雑です。 React で有名な Transition ライブラリだと React Transition Group があるのですが、今回は UIT INSID Eep.29 で紹介されていて気になっていた react
CA.swift #11 ~3年後のアプリ設計を考えよう~ パネルディスカッション文字起こし #ca_swift｜かっくん / iOS Developer
2020年1月30日にAbema Towersで開催されたサイバーエージェントの勉強会CA.swift #11に参加してきました 。トークも面白かったのですが、パネルディスカッションも面白いなと思って文字起こしをしたので公開します。（何か書けないことがあったり公開できない情報や誤りがあればご連絡ください） 文字起こし服部(モデレーター) はい、よろしくお願いします。 AbemaTV所属の服部と申します。AbemaTVでiOSアプリの開発をしていて、もりしの話であった第二世代から第三世代の途中ぐらいまでいました。テーマとして3年後のアプリ設計を考えようというのを大テーマとして話していきます。事前に質問を送って頂いて、みんなが興味あるところをピックアップしてそれをぶつけていこうと思ってます。 軽く下地作りとして、3年後のアプリ設計を考える、難しいお題ですよね、2023年、iOS 16、iPho
ご無沙汰しております。 Hiro_Matsunoです。 ほぼ10ヶ月ぶりかなぁ。 qiitaで投稿するのはということはさておきなぜこのテーマになったかですが。 実は現在C#よりも今年11月からPHPerとして復帰してしまいましたのでこのテーマとさせていただきます。 今回はポエムになってしまいますが許してくださいm(_ _)m。 この投稿はC#アドベンドカレンダー4日目の投稿です。 実は職場には内緒で書いてるのでｗ。 C#を最初はどう思っていたのか 実は好意的に見ていませんでした。 どちらかというと自分はOSS属性の人間でLinux大好き人間だったのでJavaのNull使える版じゃないのとしか見ていませんでした。 仕事で使う機会もなかったのもあってかなかなか触る機会がなかったので食わず嫌い王でしたね。 本当にPHPとjQueryとHTMLで飯を食っていましたので本当に使うということが少なかっ
GitHub - mayu-live/framework: Mayu is a live updating server-side component-based VDOM rendering framework written in Ruby
Mayu is a live updating server side component-based VirtualDOM rendering framework written in Ruby. Everything runs on the server, except for a tiny little runtime that deals with the connection to the server and updates the DOM. It is very early in development and nothing is guaranteed to work. Still trying to figure out how to make a framework that is both easy to use and fun to work with. Some
実は最近まとまった時間ができたので、フロントエンド勘を取り戻すためにも、ずっと気になってたSvelteを触ってみてる。 一通りDocsやTutorialに目を通しきったところで、備忘録も兼ねて記事を書いておこうかと思った次第。 Svelte 3: Rethinking reactivity Svelteは`3`が最新のメジャーバージョンで、これがリリースされたのは2019年の4月のこと。 なんと1年も前の話なのでぜんぜん今さらではあるけど、まだ1年しか経ってないとも取れる・・はず。 モチベーション 冒頭の記事の中にある、Rethinking reactivityっていう公演の動画を見てハッとしたから。 動画の説明文を引用するとこんな具合。 Modern JavaScript frameworks are all about reactivity. Change your applicati
はじめに 皆さん、こんにちは！Webシステム開発エンジニアの蘭です！ 今日はVue.jsについて語りたいと思います。 昔Webシステム開発技術が始まった時、バックエンドではPHPやRubyを使い直接OracleやMySQLの内部のデータベースにSELECT,INSERT,UPDATE,DELETEを実行してた時代でした。 それが今はSaasの時代になり、内部データを直接弄るだけではなく、 フロントバックエンドの合化、外部連携の柔軟性が整ってる便利なREST APIファースト開発が主になり、フロントで「サイト更新の速度」や直感的なリ「アルタイムの更新」がサイト品質に関してもはや欠かせない物になりました。 参考：APIファーストで開発する7つのメリット やりたいこと：【サイト更新速度の向上、直感的なアルタイムの更新】 バックエンドではサーバーに対するリクエストはAPIでプロパティを渡し、 フロ
Core React What is React? React is an open-source frontend JavaScript library which is used for building user interfaces especially for single page applications. It is used for handling view layer for web and mobile apps. React was created by Jordan Walke, a software engineer working for Facebook. React was first deployed on Facebook's News Feed in 2011 and on Instagram in 2012. ⬆ Back to Top What
StencilでかんたんにWeb Componentsを実装する | フロントエンドBlog | ミツエーリンクス
Stencilは、Ionic Frameworkチームが開発したWeb Componentsコンパイラです。 開発環境にTypeScript、JSX、VirtualDOM、データバインディング、非同期レンダリングなどのWeb開発技術を網羅しており、ビルド後はWeb標準に準拠したWeb Componentsのソースコードを生成してくれます。 今回はStencilの導入方法を紹介します。 Stencilのインストール 適当なディレクトリで以下のコマンドを実行しましょう。 npm init stencil そうするとStencilが提供するスターターの選択肢がコマンドラインに表示されます（コマンドを実行するにはnpm v6以上が必要です）。 ? Pick a starter » - Use arrow-keys. Return to submit. ionic-pwa Everything yo
はじめに 本記事は、reactjs-interview-questionsを日本語に翻訳することを目的とします。そのため、筆者自身の意見や知見は扱いません。 reactjs-interview-questionsとは 技術面接などでReactに関して聞かれるであろう質問とその回答がまとめられています。「Reactとは？」というざっくりした質問だけでなく「Reactのデータフローについて」などコアな質問が用意されているため、転職活動をしていない方でも学びになる点が多くあります。 全部で333問の質問とその回答が用意されています。この記事では1〜111の問題を翻訳します。翻訳が不慣れな点がありましても暖かい目で見ていただけると幸いです<_> 1. What is React? React is an open-source front-end JavaScript library that i
Svelte Society Day 2020: Rich Harris: Frequently Asked Questions の要点まとめ - console.lealog();
Svelte Society Day 2020: Rich Harris: Frequently Asked Questions わかりみしかなかった。 リッチ氏、本職はNYTのデザイナーなんですよね・・エンジニアじゃないんですよね・・まじすげーわ・・。 Svelte Society Day 2020 はじめましてRichです SvelteのAuthorです Svelte Societyというコミュニティをやってます 定期的にミートアップやってるよ これが初リモート開催で、願わくば最後のリモート開催になりますように 今日はFAQに答えていきます What is Svelte? UIを作るためのフレームワーク ReactとかVueとかと一緒 ただ大きな違いは、ランタイムではなくコンパイル時に多くの仕事をするところ Write less codeの哲学がある https://svelte.de
[React初心者向け] Component と PureComponentの違いを理解する｜Watablog
今日は、reactのパフォーマンス改善時に使用されるテクニックの一つであるPureComponentを紹介します。PureComponentとComponentの違いをマスターし、shouldComponentUpdateが何をするのかを理解して、パフォーマンスを改善しましょう！ PureComponent vs Component 何が違うのか？ まずはReactの公式ドキュメントを確認してみましょう。 React.PureComponent はReact.Componentと似ています。両者の違いは React.Componentが shouldComponentUpdate() を実装していないことに対し、React.PureComponent は props と state を浅く (shallow) 比較することでそれを実装していることです。 出典：https://ja.reac
![[React初心者向け] Component と PureComponentの違いを理解する｜Watablog](https://cdn-ak-scissors.b.st-hatena.com/image/square/03d80a96f910c1e28a495de886cce7674fec0b72/height=288;version=1;width=512/https%3A%2F%2Fwatablogtravel.com%2Fwp-content%2Fuploads%2F2019%2F08%2Fundraw_react_y7wq.png)
React vs. Svelte
Introduction More and more often we hear about a relatively new web framework to develop user interfaces on web and even for mobile apps, and this is Svelte. I don't want to write just about this technology, its pros and cons, but to compare it with the most famous web framework React, and whether it can be defeated by Svelte. Many developers who are starting to use this technology are very satisf
こんにちは。サービス開発統括部 エンジニアリング部のYuto SAGAWAです。*1 最近、自分が取り組んでいるコンポーネントの実装や作成について紹介します。 概要 Webフロントエンド開発において、利用されているライブラリやフレームワークは数多く存在します。 移り変わりも早く日々進化しているように思えましたが、最近では落ち着いてきたように感じています。 そんなフロントエンド開発ですが、コンポーネントの粒度や変更に強いコンポーネントの実装など コンポーネント作成に関して課題があるように感じています。 本記事では、変更に強いコンポーネントを作れるように、 WebComponents と LitElement の紹介と、それらを使ったコンポーネント作成をしてみたいと思います。 WebComponentsとは WebComponents とは、WebブラウザのAPI群で、下記のような特徴がありま
Dioxus 0.3 - Templates, Hot Reloading, LiveView, and more If you’re new here: Dioxus (dye•ox•us) is a library for building React-like user interface in Rust. Dioxus supports a ton of targets: web, desktop, mobile, TUI, and more. On the web it renders via the DOM and on desktop and mobile you can choose between the WebView DOM, WGPU, or Skia. Dioxus 0.3 is bringing a lot of fantastic new features:
Qrunch初投稿です。Elmのハイライトが効くことがわかったので早速投稿してみました。 Elmはフロントエンドに特化した純粋関数型言語です。特徴として言語とフレームワークが一体化していることが挙げられます。フロントエンドのフレームワークを吟味する上で気になることと言えば、アーキテクチャにおけるViewの表現がどんな記述でどんな特徴を備えていると思います。 Elm以外のフレームワークのView表現 テンプレート(Angular, Vue) 例えば、AngularやVueでは、以下のようなHTML表現をそのままにプログラマブルなルールを属性や文字列の書き方で追加する方法です。この表現は、やはりデザイナやプログラミング初学者などにとっつきやすさという点で選ばれ易いのではないでしょうか。最近よく聞くようになってきたSvelteなどもテンプレートを採用していますね。 <div> <span v-f
Next.jsで開発中のブログサービス(Minimal Blog) まえがき 今回タイトルにしたSSRというのは、Server Side Renderingのイニシャルで、広義にはテンプレートエンジンを用いてサーバーサイドでHTMLを生成する手法も含まれるとは思いますが、以下説明しているSSRはクライアントで組み立てていたVirtualDOMをサーバーサイドで組み立てるアプローチのことを指すという認識でお願いします。 まずSSRは一体何を解決するためにあるのか、そこから考えていこうと思います。 SSRまでの経緯 だいぶ省略しますがページを表示するまでのパターンを考えます。 もっともシンプルなのは、HTMLファイルを直接返すアプローチです。 サーバーはHTMLファイルを返すだけだし、クライアントはHTMLをパースしたら表示するだけです。 CSSを使えばインタラクティブに見せることもできます。
javascriptでhtmlを生成する魔界技術「hyperscript」 - Bye Bye Moore
masquetteは学習コストが低いそうです。 でもね、その前にhyperscriptの学習コストが必要でした。 hyperscriptはJSのスクリプトからHTMLを吐き出す怖さのある技術で、 mercuryというVirtualDOM系フロントエンドフレームワークで採用されているものです。 公式のサンプルはこんな感じ。 var h = require('hyperscript') h('div#page', h('div#header', h('h1.classy', 'h', { style: {'background-color': '#22f'} })), h('div#menu', { style: {'background-color': '#2f2'} }, h('ul', h('li', 'one'), h('li', 'two'), h('li', 'three'))),
Riot.js Advent Calendar 2022 の13日目の記事なります。 ChatGPTはOpenAIが2022年11月にリリースしたチャットボット系のAIです。 このAIによる回答の精度がすごいと大変話題になっていますのでAdvent Calendarの企画としてriot.jsの事を聞いてみたいと思います。 Riot.jsについて聞いてみる うまく全てのキャプチャが取れなかったので、会話の内容をテキストで記載します。 枠内がChatGPTでのやりとりです。 🙁 javascript ライブラリ riot.jsの利点は何ですか? 🤖 Riot.jsは、軽量で柔軟なJavaScriptライブラリです。その主な利点は、次のとおりです。 ・単一ファイルコンポーネント (SFC) のサポートにより、コンポーネントを簡単に作成できます。 ・コンポーネントベースのアプローチにより、アプ
1. はじめに 表題の通りアプリを作ったので記事にしておこうと思います！ 初めてHyperappで開発を始める方は 基本的な考え方を是非こちらでご確認ください。 https://qiita.com/hajime-nohara/items/888aae1c4e553f3cec86 実際にアプリを触りながら読んでもらえると良いと思います。 https://www.sharpen.tokyo/gantt.html 本記事はアプリの実装内容についてザックリ記し、開発環境設定については触れません。 ※ 以降、本記事で紹介するアプリをsharpenと呼びます ※ 発展途上アプリです、ご指摘やアドバイスお願いします😉 1-1. sharpenはどんなアプリ？ シンプルなガントチャートUIをベースにした タスク管理アプリです。 デザイン、UX、共にシンプルを追求。 1-2. 設計思想 ・サンプルと呼べる
データとしてarrayを考え、それをリスト表示します。 map()を用いてarrayの要素を<li>に射影する、が基本方針です。 import * as React from 'react'; const NameList = (props) => { const listItems = props.names.map(name => <li>{name}</li> ); return ( <ul>{listItems}</ul> ); }; export default NameList; import * as React from 'react'; import NameList from './components/NameList'; class App extends React.Component { render() { const names = ['Alice', 'B
React Hooksでぼちぼちコードを書いているのだけれども、今日カスタムフックの実装をしてようやくReact Hooksの勘所が少し理解できたような気がするので、忘れないうちにメモ代わりに書いています。 今実装しているコードで、画面幅に合わせて異なるReact Componentを返したいケースがあって、最初は画面幅をwindow.innerWidthで取得して場合分けするコードをcomponentDidMountに記述して実現していましたが、ロード後に画面サイズを変更した場合にそれが反映されない問題がありました。 基本的にはデバイス毎に異なるコンポーネントをrenderしたり、propsの値を変えたいだけなので、それほど大きな問題にはなっていませんが、 出来ればなんとかして動的な画面サイズの変更に合わせて切り替えられるようにしたいなあと思っていました。 その実現のためにuseMedi
※よく分からんと言われたので非エンジニア向け解説作りました。 前回の続きです。 さて、前回はWebページに動きを付けているのはJavaScriptであり、 ReactはそのJavaScriptをうまく使うための道具(ライブラリ)であることまで説明しました。 とはいえ、React以外にもJavaScriptのライブラリは多くあります。(古くはjQuery,似たような世代ではVueやAngularなど) これからその中でReactを採用するメリットについて説明していきます。 VirtualDOM/JavaScriptと速度問題 まず、Reactの一番の特長である、VirtualDOMについて解説します。 とはいっても、いきなりVirtualDOMという言葉だけ出されても何のことやらとなってしまいますので少し話を戻します。 前回説明したように、現在のリッチなUIを作るのには、JavaScript
この記事はFIXER Advent Calendar 2019 22日目の記事です。 昨日の記事は工藤さんで「WebRTCの仕組みをざっくり理解する」でした。基礎的な説明から実際に実装されたコードまであってとてもわかりやすかったです。 Svelte 昨今よく使われているVirtualDOMを使用したReactやVueのようなJaveScriptライブラリを見かけますが、Svelteはそれらと違い、.svelteという拡張子のファイルからhtml、css、JavaScriptを吐き出してくれるコンパイラとなっています。 VirtualDOMを使用するフレームワークと比べて何がいいの？ VirtualDOMは変更を比較する際に、VirtualDOMの再構成をし前回との差分を見るという手順を踏む必要があります。それではどうしても無駄な比較が多くなってしまいます。しかし、Svelteはビルド時にア
ども。 最近聞こえなくなってきたPWA。 PWAとはスマホでWebアプリとして提供する流れのことです。 昔はすげぇガリガリに書かないと動いてくれなかったんですが。 いまはReactやVueの登場で簡単にかける自体になってきました。 ですが俺とライバルの青島さんは考え方が同じで帰ってVirtualDomなんて使うもんじゃねぇよなって言ってます。 なぜなら非同期通信が下手くそってところですね。 あとはというと地図を書こうとしたらどうしても選択肢がjQuery一択になっちゃうんですよね。 これすげぇめんどい。 このへんをReactとVueが解決してくれたらいくらでもそっちで書きますとも といったところでリンク貼っておきます。 お暇な人は見てやってください。 昔のことなども書いてます。 qiita.com ほんと6・7年前はガリガリに書かないとうまく動いてくれなかったので燃え尽きる人が多かったんで
超初心者向けReact参考書モドキ - Qiita
Reactとはなんぞ？ 業務でReactを扱うことになったので、自身の参考書程度に記しておきます。 ※あくまで自身の確認程度などでとても分かりづらいと思われます。 -------------------記述途中----------------------------------- Reactとは ReactはFaceBook社が開発したJavascript用のフレームワークでありUI開発に優れている 前提条件としてHTML、CSS、Javascriptの知識がなければならない。 Web向けに構築する場合はReactDOMと連携して使用。 Reactの特徴 ・コンポーネント： 〇 画面の各要素をコンポーネントを組み合わせるという形で構築する。 〇 コンポーネントは自分で作成したカスタムタグと考えることができる。 ・JSXで画面要素を記述 〇 コンポーネント内に画面とソースコードを見通しよく記
Facebook社が開発したJavaScriptのライブラリです。 比較対象にされることが多いVue.jsはフレームワークとなります。 フレームワークのほうが大きい枠となるんですが、ライブラリのReactが比較対象になっているのがすごいっぽい。 既存のWEBページにReactの一部を組み込むことが可能です。 VirtualDOMでDOM操作を行うことができる。変更された差分だけを再描画するのでパフォーマンスがあがります。 JSX とは こちらもFacebook社が開発したJavaScript内でHTMLを簡単に記述するための言語となります。 可読性の高い言語なのがうれしい。ただブラウザでは解釈できないので変換する必要があります。 それをトランスパイルと呼んでおり、有名なのがBabelやTypeScriptなどがある。
あっちの世界に行ってこようかな。ちゃうよ。VirtualDOMの世界に再突入する予感。 - 技術メモ兼ADHD闘病記
ども。 またもや懸念材料がどっさりしてますね。 多分またVirtualDOMの世界に行かねばならないようです。 バックエンドはほぼlaravel決まりフロントエンドに踏み出したところ懸念した通りlaravelでblade書いてからvue.jsをインジェクションしろとのお達しが。 と言うことはRIOTで苦しめられたECMAScriptとの再会かなと思いながら調べて行ったらvue3が更なる進化でフルTypeScriptに変わってるじゃないですか💦。 でもいいや。 型推論しっかりしてるしECMAScriptに比べたらワンライナー出来なさそうだし。 ECMAScriptって型推論よりはダイナミックに書いてそれの良し悪しで決まるような感じで書かないと追いつけないけどTypeScriptは型宣言型なので分かり易いしvoidも存在するし更なる可読化ですからね。 良いことづくめなんだから早くMSOffi
Discussion Threads dev.toではDiscussion Threadsという、議論やコメントが前提の記事を立てることができます。 まあ見てのとおり、大半のスレッドは閑古鳥が鳴いてますが。 最近盛り上がったスレッドとしてはShow off your Workspace、日本でいうところの環境晒しスレがあります。 みんな格好いい環境ばかりで驚きですね。 これはもう私も自分の環境を晒して世界を絶望と混乱の渦に落とし入れなくては。 そんなわけで以下は、dev.toに先日投稿されたDiscussion Threadsのひとつ、Which JavaScript frameworks are worth learning in 2021?のコメントを軽く抜き出してみたものです。 スレ主もI am sure there are no right answersと言っているように、決して
Vue.js Created vs Mounted の違いを解説
Vue.jsのCreatedとMounted。どっちを使うのが適切かなど悩むことが多いと思います。 そこで、Vueのライフサイクルでの観点から違いを説明し、 適切な利用シーンを見ることで、大きな違いを解説したいと思います。 結論としては、createdではvirtualDOMにアクセス・変更できないのに対してmountedはすでにvirtualDOMがdataと一緒に描画された後なので、アクセス・変更することが可能になっています。 これだけでは分からないと思うので、ライフサイクルから、どのような違いがなぜ生まれているのか解説します。 Vue.jsのライフサイクルから見るcreatedとmountedの違い 違いを知るには全体のライフサイクルを理解する必要があります。 全体のライフサイクルは図の通りでVue.jsはデータを取得して、virtualDOMをレンダー（描画）し、dataが変わると
はじめに 「React」はFacebookが公開している、ユーザーインタフェース（以下、UI）を効率的に構築することを目的としたJavaScriptライブラリです。 従来の一般的なWebアプリケーションだと、JavaScriptはJQueryなどのライブラリを使ってUIを生成していました。 ところが、従来のJavaScriptのライブラリで書かれたコードはJSのコードが大規模になるにつれてメンテナンスが難しくなるという欠点を持っていました。 それに対してReactは JS内にHTMLタグを埋め込むような記述ができ、「アプリケーションがどのように見えるか」を単純に表現できる データに変更があるときには更新の必要があるコンポーネントだけ更新する コンポーネントという単位でUIを管理することで複雑なUIでもUIを再利用したりテストしやすくする といった特徴を持つことで、複雑なUIを作成するときで
1. はじめに 表題の通りアプリを作ったので記事にしておこうと思います！ 初めてHyperappで開発を始める方は 基本的な考え方を是非こちらでご確認ください。 https://qiita.com/hajime-nohara/items/888aae1c4e553f3cec86 実際にアプリを触りながら読んでもらえると良いと思います。 https://www.sharpen.tokyo/gantt.html 本記事はアプリの実装内容についてザックリ記し、開発環境設定については触れません。 ※ 以降、本記事で紹介するアプリをsharpenと呼びます ※ 発展途上アプリです、ご指摘やアドバイスお願いします😉 1-1. sharpenはどんなアプリ？ シンプルなガントチャートUIをベースにした タスク管理アプリです。 デザイン、UX、共にシンプルを追求。 1-2. 設計思想 ・サンプルと呼べる
静的サイトジェネレーターEleventy 第1回 Eleventyとその特徴 ビルドにより静的サイトを生成するツール、Eleventyの使い方を解説します。まずはほかの静的サイトジェネレーターとどう違うのか、その特徴を整理します。 はじめに 静的サイトジェネレーターは、ビルドによりWebサイトを生成するツールです。単純な静的Webサイトを生成する場合には特に便利ですが、Jamstack構成*での動的なWebサイトを生成するのにも使われます。 *注：Jamstack Jamstackは、サーバーサイドも含めたWeb開発全体のアーキテクチャです。CodeGridでもJamstackを解説したシリーズがありますので、参考にしてください。 一から学ぶJamstack Jamstackというと、Reactを利用したGatsbyや、Vue.jsを利用したNuxtのようなSPA開発のライブラリを利用した
【React】基礎編 ⑶ - Qiita
新しく学んだことをアウトプットしています。 React.Fragment JSXは複数の要素を持つことができないため、 ＜div＞タグで複数の要素を格納するのが一般的でした。 ですが、HTMLで描画した時に、 本来は＜div＞タグが必要ない所にまで要素が付与されてしまうので、意外と困る時がありますよね。 そんな時に、使用するのが、React.Fragmentなのです。 React.Fragmentは＜div＞タグと同じ役割を担っており、 HTMLでは要素としてカウントされないので、使い勝手が良いです。 import React, { Component } from 'react'; class App extends Component { render() { return( // divの替り <React.Fragment> <User name={"Taro"} age={8}/
※この記事の検証環境はElm 0.19.1です。 Elmでランタイムエラーを起こす方法をTwitterで尋ねたところ、すぐに教えてもらえました。Elmコミュニティすごい！ありがとうございます！！ attribute "" ""— 業スーのラップ（みやも） (@miyamo_madoka) 2020年5月29日 確認 以下のコードを書いてみたところちゃんとエラーになりました。 コード div [ attribute "" "" ] [] 出てきたエラー InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name. エラーになった！やった！ なぜランタイムエラーを起こしたくなったのか 以上でこの記事終わりでいいんですが、どうしてランタイムエラーを起こ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Understanding Rendering in React ♻ ⚛️
2021年に学ぶべきJavaScriptフレームワークは何かね？ - Qiita
2020-02-25のJS: TypeScript 3.8 正式リリース、ESLint 7.0.0の変更予定
Next.js で Page Transition を実装する - Qiita
PHPer&HTML5が好きな自分がなぜC#に惚れたのか - Qiita
Svelte 3の仕組みとその手触り - console.lealog();
１０分で基礎がわかるVue.js-入門 - Qiita
300+ React Interview Questions
Reactjs-Interview-Questions（翻訳）1〜111 - Qiita
WebComponentsとLitElementについての話 - techtekt
Dioxus - Reliable Rust apps that run anywhere
JSXやテンプレートではない内部DSLを用いるElmのView表現の魅力 | Qrunch（クランチ）
本当にSSRする必要があるのか考えてみた話 - Qiita
流行りの人工知能ChatGPTにRiot.jsの事を聞いてみた | ウェブゴト
Hyperappでタスク管理アプリを作った - Qiita
React（+TypeScript） 入門 | Listを扱う | TECH PROjin
メディアクエリを扱うReact Hooksのカスタムフックを作った話 - にんにくとたかのつめ
非エンジニアの社長にReactとは何かを説明する② - Qiita
小さくて早い？Svelteとは | cloud.config Tech Blog
久方ぶりにPWAのことについて語ってきました。 - 技術メモ兼ADHD闘病記
Reactの基礎の基礎 #01Reactとは、JSXとは - Qiita
2021年に学ぶべきJavaScriptフレームワークは何かね？ - Qiita
ブラウザだけでできるReact・Reduxチュートリアル - Qiita
Hyperappでタスク管理アプリを作った - Sync from Qiita
静的サイトジェネレーターEleventy | 第1回 Eleventyとその特徴
Elmでランタイムエラーを起こす方法を教えてもらった - 旧gaaamiiのブログ