あらためてReactとVueを比較してみる〔2020年最新版〕 ｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ
どーもじゃけぇ(@bb_ja_k)です。 フリーランスとして普段はフロントエンドメインで仕事してます。 ３大モダンフロントエンド フレームワーク/ライブラリ と言えば React、Vue、Angular ですね。 「まずはどれか習得しようかなぁ」と考えている人の多くはReactかVueの選択で悩むのではないでしょうか。 フロントエンドは本当に技術の革新が早いので、ReactとVueの比較記事を見ても割と古い情報での比較が散見されます。 ReactはHooksの登場で大きく変わりましたし、VueもComposition APIを含むメジャーバージョンアップであるVue3も控えています。 正直これから勉強を始める人は何がなんだかって感じだと思いますし、せっかくだったらなるべく無駄にならないほうをやりたいなーと思うことでしょう。(自分もモダンフロントエンドを勉強し始めた時めっちゃ調べました←)
React Native for Web + TypeScript + Firebase + PWAを調べたのでまとめておく - gibachan's blog
動機 きっかけはこの記事。ちょっと前にこれを読んで、 「モバイルネイティブアプリに慣れた開発者が、React Native for Webを利用することで手軽にWebアプリ開発できないか？」と思ってたので調べてみました。 iOSについて言えばSwiftUI登場後、宣言的にUIを構築するということが自然となり、Webアプリの各種FW（Reactなど）との距離感が縮まっていること。前述の記事にあるように、ネイティブ開発で馴染みのあるコンポーネントをReact Nativeを経由してWebの世界に持っていけるなら、Webアプリ開発の敷居が下げられるんじゃないかと思って調べてみました。 先に結論 React Native for Webを使って簡単なTODOアプリを作ってみました。 一応Firebase Hostingに置いてPWAとしてモバイルにインストールするところまで試しました。 githu
Fluent UI - Microsoft社製のReact向けUIコンポーネント
HTML5で高度なWebアプリケーションの開発が行えるようになっています。そういったサービスを開発する場合、大事なのはUIです。従来のWebっぽさを残すと、ユーザビリティが低くなりがちです。なるべくネイティブ風なUI/UXを意識しましょう。 もしWindows向けのサービスを開発しているならばFluent UIを使ってみましょう。Microsoft社が開発しているUIフレームワークになります。 Fluent UIの使い方 スクリーンショット多めで紹介します。まずはカレンダーコンポーネント。 カラーピッカー。 アイコン付きのピッカー。 アイコンとリスト。 アイコン。下に小さなステータス表示も。 メニュー。 ツールチップ。 サイドパネル。 モーダル。 アイコン。 Fluent UIはMicrosoftのWeb体験に合わせたUIコンポーネントとなっています。Fluent UIを使うことで、Azu
【書評】2020年にReact Nativeを始めるときの決定版的技術書が出ます！ - フロントエンドの地獄
「React Native ~JavaScriptによるiOS/Androidアプリ開発の実践」の書評になります。 PDF版はこちらで先行発売開始していて、 gihyo.jp 紙の本は2020/5/20から販売の予定です。 React Native ~JavaScriptによるiOS/Androidアプリ開発の実践 作者:髙木 健介,ユタマこたろう,仁田脇 理史発売日: 2020/05/30メディア: 単行本（ソフトカバー） 買おうと思っていた本の献本を頂き、いち早く読ませていだだいたのでせっかくなのでブログにします！ どんな本？ React Nativeの基本・具体的なアプリ開発はもちろん、React Nativeで の開発に必要な TypeScript・React も1冊で解説。登場時からReactNativeを追い続けた著者陣が、 現場実践をふまえて伝授します。 という紹介文にふさわ
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践 | Gihyo Digital Publishing … 技術評論社の電子書籍
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践 著者 髙木健介，ユタマこたろう，仁田脇理史 著 発売日 2020年4月27日 更新日 2020年4月27日
React: React Bootstrapでタブのカラーを変える ー useState()とuseEffect()を使って - Qiita
React: React Bootstrapでタブのカラーを変える ー useState()とuseEffect()を使ってJavaScriptReactreact-bootstrapECMAScript2015 React Bootstrapは、Bootstrapのスタイルが適用されたコンポーネントをReactアプリケーションに組み込めるライブラリです。この3月24日に正規バージョンv1.0.0がリリースされました。Bootstrapのみでは<div>などにやたらとクラスを詰め込んだDOM要素があふれます。それに対して、Reactのコンポーネントですっきりと組み立てられるのが利点です。 Bootstrap「Jumbotron」のコード例 <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class=
ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
ReactでLIFFアプリケーションをつくる 〜その１ VSCode+Docker+Reactの環境構築する〜 - Qiita
{ // see. Customizing IntelliSense // The contents described below have been copied // https://code.visualstudio.com/docs/editor/intellisense#_customizing-intellisense // from here // Controls if quick suggestions should show up while typing "editor.quickSuggestions": { "other": true, "comments": false, "strings": false }, // Controls whether suggestions should be accepted on commit characters. Fo
Reactカスタムフック入門 ! (ドラッグでDOMを動かすカスタムフックを作る) - Qiita
カスタムフック入門 ！ この記事の内容 前半 : Hooksの紹介 後半 : 以下のような、ドラッグでDOMを動かすカスタムフックの解説 Hooks!! Hooksとは？ Hooksとは、Reactに最近追加されたAPI群です。 Hooksを使えば、関数型コンポーネントでも従来のクラス型コンポーネントとほぼ同等(筆者は困ったことないです)の処理ができるようになります。 というか、より簡潔にコードが書けるしめちゃくちゃ使いやすいので、正直もうクラス型には戻れないです。 Good bye, クラス型コンポーネント。 クラス型は勉強しなくていい？ クラス型も勉強した方がいいです。 なぜなら、既存のコードの大多数はクラス型で書かれているから。 他人のコードを参考にしたり、ソースコードを読む時に必要になるでしょう。 Hooksのメリットは「いい感じの疎結合さ」 Hooksを使った関数型コンポーネント
ガワネイティブアプリ(Creator)を、React Nativeで置き換えてみての一年間戦いの記録 - BASEプロダクトチームブログ
Native Application Groupの大木です。BASEでは、購入者向けのショッピングアプリ「BASE」、「BASEライブ」、ショップオーナー向けのショップ運営管理アプリ「BASE Creator」の3つのスマホアプリをリリースしております。今回は、その中の一つBASE Creatorを、React Nativeで置き換え、リリースしてみての話を、お伝え出来ればと思います。 課題と動機 https://help.thebase.in/hc/ja/articles/206417201-BASE-Creator-とはなんですか- BASE Creatorは、基本的にはWebViewで画面を表示するいわゆるガワネイティブアプリというものです。Webアプリとの違いは何処にあるかといいますと、商品が売れたり、購入者からメッセージが届くと、Push通知でお知らせ出来る機能があるところです。
SPAの知識ゼロの状態から、React＋Reduxの開発環境構築までにやったこと - Qiita
Webアプリケーションを開発する際に、「今ならSPA（Single Page Application）っしょ」となり、フレームワークの選定からやらせてもらう機会があったので、そのときにやったことを共有します。 前提 本記事作成時の筆者のスキル Webアプリケーションは作ったことがあるが、言語はJava SPA is 何？ Javascriptはかじった程度の知識 フレームワークの選定 Googleトレンドや、実績からSPAのフレームワークを以下に絞りました。 React AngularJS Vue.js その時人気だったReactにしておけばいいだろと、Reactにしました。 ※近年、Vue.jsが勢力を伸ばしてきているらしいです。 React + α Reactは様々なライブラリと組み合わせるのが普通のようです。 npm installでどんどんライブラリを追加していくことになりますが、
React Componentの実装ルールを決めてみた - Money Forward Developers Blog
こんにちは。 経費精算サービス「マネーフォワード クラウド経費」の開発チームでフロントエンドエンジニアをしている坂本です。 クラウド経費ではJSのライブラリとしてReactを採用しているのですが、最近クラウド経費で React Component を実装する際のルールをまとめたので、その話を書こうと思います。 なぜルールをまとめようと思ったのか Componentの分割ルールとしてAtomic Design、スタイルの管理としてstyled-components、GraphQL用のライブラリとしてApollo Clientを導入し実装を進めています。 昨年の10月までは挙げた３つとも使用していなかったので、試行錯誤しながら進めています。 チームメンバーの各々が試行錯誤しながら実装を進めていくので、最近はチーム内で認識の齟齬や持っている情報に差が出るようになりました。 そこで一旦現状を整理し
サーバーサイドレンダリングしないReact SPAのSEO - 橋本商会
普通にwebpackと@babel/preset-envで"last 2 versions", "Safari 10"をターゲットにしてビルドしているだけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
useRef / React Hooks - React入門
useEffect / React Hooks – React入門