Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note
Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） Svelteは何が良いのか？ Vue.js やReactと違って仮想DOMがありません。ビルド時に純粋なJavaScriptにコンパイルして表示します。つまりSvelteはコンパイラーです。 そもそも仮想DOMのメリットとして、アプリ全体を再レンダリングせず、変更箇所（実際のDOMと仮想DOMの差分）もしくは Contextでトリガーされたとき を検知して、局所的にレンダリングすることで高速化を図っています。 Svelteの公式ブログ
Gatsby.jsのカレンダー | Advent Calendar 2019 - Qiita
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
本当に倒すべきだったのは jQuery ではなくテンプレートエンジンだった - fsubal
そうはっきり言ったほうが良かった。いや言わなくても伝わる現場は良かったんだけど、伝わらないままごく一部だけをコンポーネントに移行、それ以外はただ生 DOM API に変えて終わり（あるいは他は jQuery のまま）みたいな「モダン化」で済ます余地を与えたのは発信の失敗だった……という10年代の振り返り。 テンプレートエンジンはなぜ倒された方が（…といって悪ければ、変わったほうが）良いのかは端的に指摘できて、それは初回レンダリングしか考慮してないからだということになる。 Web の UI には状態変化がつきもの（になったのは実は最近の話）だが、テンプレートエンジンは1回目のレンダリングだけを担当し、変化した後の2回目以降の見え方は JavaScript が担当するというパラダイムを構成する。
リクルートがB2Bのスマホアプリ開発でReact Nativeを採用した理由
リクルートがB2Bのスマホアプリ開発でReact Nativeを採用した理由：Webフロントエンドエンジニアだけでスマホアプリ開発（1） リクルートテクノロジーズが開発している、B2Bのスマホアプリ『Airシフト メッセージ用アプリ』。Webフロントエンドエンジニアだけで行っている開発の裏側を明かす連載。初回は、React Nativeを採用した背景などについて。 こんにちは、リクルートテクノロジーズで『Airシフト』のフロントエンドの開発を担当している辻です。これから、連載で、『Airシフト メッセージ用アプリ』を開発した背景、さまざまな側面で工夫した点などを紹介していく予定です。楽しみにしていただけると幸いです。 『Airシフト』とは 『Airシフト』は、シフト管理サービスです。シフト表の作成はもちろん、スタッフとのやりとりや細かな調整業務をラクにするための機能があります。直感的に操作
React Native ～JavaScriptによるiOS／Androidアプリ開発の実践
2020年5月30日紙版発売 髙木健介，ユタマこたろう，仁田脇理史 著 A5判／688ページ 定価4,378円（本体3,980円＋税10%） ISBN 978-4-297-11391-9 ただいま弊社在庫はございません。 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 「iOS/Androidの2つのアプリをもっと効率良く開発したい」 「ハイブリッドアプリだと，速度やUIがネイティブより劣ってしまいがち」 こんな課題は，React Nativeを使えば解決できます。 React Nativeは，iOS/Androidの両方のアプリをたった1つのスキルセットで開発できるJavaScriptライブラリです。本書は，Re
React.jsに少し慣れたヤツがNext.jsに入門してみた
Nuxt.jsを覚えるかーって入門記事を書いた直後、Next.jsというアプリケーションフレームワークにたどり着きました。 Next.jsというのはReactを使ったサーバーサイドレンダリングやらいろいろしてくれるものです。 Nuxt.jsのReact版みたいなもんでしょうか。 とりえあずどっちも入門してみてしっくりくる方をメインにしようと思います。 Vueの方がいい！という人はNuxt.jsの方をオススメします。 こっちはReactに慣れてしまったので今更Vue覚えるとかちょっと……って人用ですね。 とりあえずNuxt.jsと同じくしてNode.jsは既に導入済み前提で進行していきます。 まだNode.jsを導入していない方は下記の記事からNode.jsをインストールしてください。 【プログラミング入門の入門】Node.jsとかいうチートアイテム https://naokeyzmt.co
【書評】「初めてのGraphQL」を読んで、サーバーレスアプリケーションのための新しい武器を手に入れるのだ | DevelopersIO
【書評】「初めてのGraphQL」を読んで、サーバーレスアプリケーションのための新しい武器を手に入れるのだ 2020年11月12日追記： Apollo Client V3 がリリースされ、大幅に内容がかわっています。本書のサンプル記述はV2ですので、利用法が異なる可能性があります。ご注意ください。 apollo-client/CHANGELOG.md at main · apollographql/apollo-client きっかけは サーバーレスアプリケーションの実装で 本格的に AWS AppSync を使いたいと考えたところでした。Amplify + AppSync なチュートリアルやサンプルもたくさんありますが、要素技術を習得してから使い始めたいと考えました。私が執着している考えのひとつに、 サービスやライブラリがどこまでの責任をカバーしてくれるのかを把握してから使う があります
GW引き篭もりチャレンジ：React＋Electronでアプリを作ってみた総括 - hylom's
‐ programming, open source, os, and a handful of tips 5連休も最終日となりましたが、あっという間でしたね。ということで本日は5日間分のReactアプリ作成レポートをまとめておりました。普段の仕事と変わらないことをやっていたような気もしますが、何もできない連休だったので仕方がないとも言えます。 GW引き篭もりチャレンジ：Reactでアプリを作ってみる（1日目） Reactでアプリを作ってみる（2日目） - PDFからのサムネイル生成 Reactでアプリを作ってみる（3日目） - コンテンツの動的な表示 Reactでアプリを作ってみる（4日目） - Electronを使ったアプリ化 Reactでアプリを作ってみる（5日目） - ダブルクリックでファイルを開く Reactのフル機能に触ったわけではないですが、さすがによくできているなと感じまし
コードで理解するRedux(React使用) - Qiita
対象読者 Reactの書き方がある程度はわかってる人 Reduxの概念とか言われてもわからない、コードでくれって人 私（備忘録） Reduxとは fluxの考え方にもとづいて作られたフレームワーク React専用ではないが、Reactと連携させることでより高いパフォーマンスを得られる 【参考】fluxとは facebookが提唱したアーキテクチャ（ソフトウェア設計の思想・考え方） データの流れを一方通行にしたもの Reduxの特徴 Reduxの3原則 １．Single source of truth １つのアプリケーションが持つstateは１つのみ stateをオブジェクトツリー構造で管理する ２．State is read-only stateを直接変更することはできない 変更したいときはActionをdispatchで渡したときのみ これにより、stateの変更に関わる部分が限定化され
Create React Appで作成したReactアプリにReact Native for Webを導入する | DevelopersIO
Create React Appは、コマンド１つでReactアプリケーションの雛形を作成することができる、Facebook製の環境構築ツールです。新しくアプリを作成する際に使用されている方も多いのではないかと思います。 React Native for Webは、iOS/Androidアプリ作成向けのライブラリであるReact Nativeと同じ名称のコンポーネントを使ってWebアプリケーションの画面を作成することができるライブラリです。使用していてReactに比べてより効率的に画面の作成ができると感じています。 当記事ではCreate React Appを使用して作成したReactアプリにReact Native for Webを導入する方法についてご紹介します。 Create React Appを使ってアプリを作成する 以下のコマンドを実行します。今回はTypeScriptを導入したい
React Native for Web で Flexbox をデフォルトにする | DevelopersIO
React Native に慣れていると React Native for Web のデフォルトが Flexbox でないことに違和感を覚えるでしょう。書き味を同じようにする設定を紹介します。 なお、 React Native for Web の環境を作る際は次の記事を参考にしてください。 https://dev.classmethod.jp/articles/introduce-react-native-for-web/ 追記 公式ドキュメントにやり方が載っていることを教えてもらいました。 HTML ファイルに直でスタイル指定する方法ですね。どの手法ともマッチしそうです。 @janus_wel 公式ドキュメントでわかりづらい場所に書いてあるのが悪いのですが、Guides > Client-sideにも該当の問題についての設定方法が言及されていますhttps://t.co/oNXhGIs7
最新版TypeScript+webpack 5の環境構築まとめ(React, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
Getting Started – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 新しいクイックスタートガイドでは最新の React がライブサンプル付きで学べます。 このページは React のドキュメント、および関連する資料の概要となります。 React はユーザインターフェースを作成する為の JavaScript のライブラリです。ここのホームページ、またはこのチュートリアルから React がどういうものかを学びましょう。 React を試す React を学ぶ 最新の情報を追いたい人へ バージョン管理されたドキュメント 足りないものがある？ React を試す React は当初より、既存のプロジェクトに徐々に追加していけるようなデザインとなっています。たくさん React を使うのでも、少しだけ使うのでも構いません。触りだ
SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜Webエンジニアのキャリアを考える！
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
「サンプルコードで作りながら学ぶReact Native実践入門」の著者が語る！React Nativeの魅力とこれだけは知っておきたいポイント！ - FLEXY（フレキシー）
本記事は2020年4月にインタビューを実施し、公開された内容です。 スナップマート株式会社の取締役CTO星直史です。 今年、2020年にReact Nativeの著書、『サンプルコードで作りながら学ぶReact Native実践入門』を出版しました。 本記事では、React Nativeを触ってみたいというWebエンジニアの方向けに、React Nativeの概要や知っておきたいポイントを説明します。ぜひ参考にしてみてください。 1. React Nativeとは React NativeはFacebookが開発したJavaScriptのフレームワークです。名前の通り、Reactを利用して開発を行います。 React Nativeの最大の特徴はクロスプラットフォーム開発ができるということです。一つのソースコードから複数のアプリケーションを生成できます。iOSとAndroidが提供するネイテ
120億PVの巨大サービス「LINE NEWS」をTypeScript化した話
2020年3月18日に行われたイベント「UIT meetup vol.8 online『We Are TypeScripters!』」に、LINE株式会社のフロントエンドエンジニアであるAkinori Inoue氏が登壇しました。セッション内容は「LINE NEWSをTypeScript化したい！」。「LINE NEWS」のTypeScript化にあたって実際に行ったことやそこから得た知見を共有しました。講演資料はこちら LINE NEWSをTypeScript化 Akinori Inoue氏（以下、Inoue）：ご紹介に預かりました井上と申します。「LINE NEWSをTypeScript化したい！」ということで、発表していきたいと思います。よろしくお願いします。 僕自身の紹介なんですけど、去年の2019年の4月にLINEに新卒で入社して、フロントエンドエンジニアとしてUIT室に所属いた
React でページ内の目的の箇所まで自動スクロールさせる | DevelopersIO
「React で作ったページ内を自動スクロールさせたい」とたまに質問を受けるのでまとめました。 やりたいこと React で作成したページに一覧が表示されているときに、一覧の最後までスクロールさせたい。 または目的の箇所までスクロールさせたい。 環境 React 16.13.1 TypeScript コードと説明 CodePen 上の動くサンプルコード スクロールして表示したい箇所に React の Element をつくる (div など) React.createRef() で ref を作り、作った Element に ref をセット ref.current.scrollIntoView() で Element までスクロール // <List /> の中身は CodePen のサンプルコード参照 const ListPage: React.FC = () => { // 表示する
Gatsby.js と AWS Amplify を使って爆速でブログサイトをデプロイする | DevelopersIO
概要 CX事業本部の佐藤です。 Gatsby.js という React ベースの静的サイトジェネレータがあります。 それを AWS Amplify でデプロイして爆速でブログサイトをデプロイできましたので、手順を記事にしたいと思います。 Gatsby.js とは https://www.gatsbyjs.org/ React のフレームワークの一種で、静的サイトジェネレータです。静的サイトジェネレータとは、 ブログの記事やWebページなどをあらかじめビルド時に生成しておき、デプロイ後はそれを表示するだけにすることで、 Webサイトが高速に動作するようにした技術です。 Gatsby.js を使うことで、Wordpress などの CMS や Markdown ファイル、DB などからデータを取得して、 それを事前にビルドしてWebページに変換してデプロイすることが可能です。 Gatsby.j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
