オンプレミスvSphere環境をOracle Cloud VMware Solutionへ移行した際にハマったところ 2023.12.24 コーポレート
![React製のSPAのパフォーマンスチューニング実例](https://cdn-ak-scissors.b.st-hatena.com/image/square/585de3ee88ceb632cca696df3ae327e5411ef9e7/height=288;version=1;width=512/https%3A%2F%2Ftechblog.recruit.co.jp%2Fassets%2Fimage%2Flogo%2Frecruit-logo_thumbnail.png)
日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい
事の発端 始まりはこちらのツイートから。 Usecasesレイヤーを充実させていったらVuex Actionsほとんど使わなくなるな笑 — Andy (@andoshin11) 2018年6月15日 それはどういうことだよ・・・ フロントでどう使うんだ・・・? と疑問に思い、自分なりに検証・実装してみたいと思ったのが事の発端です。 Clean Architectureとは? まず根本の理解がほぼなかったので調べることにしました。 こことか https://qiita.com/koutalou/items/07a4f9cf51a2d13e4cdc こことか https://blog.tai2.net/the_clean_architecture.html こことか https://qiita.com/Tueno@github/items/705360b357c2a00c9532 こことか h
SPA(Single-Page Application) を実現する JavaScript フレームワークの一つです。 Angular, Vue.js とよく比較されます。 Facebook 社によって開発され、Facebook の Web サイトでも利用されています。 2020年4月現在の最新バージョンは 16.13.1 です。 MITライセンスで公開されており、商用利用可能です。 JavaScript の中に直接 HTML/XML を記述する JSX という技術を利用しています。 JavaScript は ES6 の文法である import やアロー関数を取り入れています。 JSX や ES6 文法を、Babel というトランスパイラで ES5 の JavaScript に変換しています。 Chrome, Firefox などで動作します。IE8 で一部機能、IE9 で制限付き、IE1
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
DMMのエンジニアで『React開発 現場の教科書』の著者でもある石橋啓太さんにお声がけ頂いて『ReactとAtomicDesignからみるコンポーネント開発』でお話をさせて頂きました。 テーマは個人的に関心のあった「Atomic Designの代替」を選びました。Atomic Designと言えば、いまや国内外含めてコンポーネント設計をする際に多くの人が参照する概念ですが、すべての環境に適切かと言えばそれはまだ疑問を残す余地があります。 「Atomic Designを採用してみたけどしっくりこなかったので自分たちに合った概念を考えてみた」という個人・組織がいるのはMediumの記事などを通じて知っていたので、そういった事例を集めてみたら面白いんじゃないかなと思ったのがこのテーマを選んだきっかけです。完全に趣味です。 Atomic Designへの疑問 Atomic Designについて知
この記事のゴール S3 CloudFront Route 53 を使ってReact製のSPAを独自ドメインで配信します。 前提条件 以下の条件を満たしている前提で話を進めていきます。 Route 53 で独自ドメインを購入している事 AWS Certificate Managerで独自ドメインの証明書を取得している事(証明書は us-east-1 に作成されている必要があります。) 利用するSPAはサーバーサイドレンダリングが考慮されていない仕様である事 1 に関しては別に Route 53 で購入したドメインでなくても大丈夫なのですが、全ての手続きがAWS上で完結すると楽なので、この記事ではそのようにしています。 2 に関しては現時点ではCloudFrontに設定出来る証明書が us-east-1 に配置されていないと設定出来ない為です。(そのうち他のリージョンの証明書も使えるようになる
背景:React-Reduxが全然わからないのでちゃんと勉強した 開発現場にReact-Reduxを導入しておきながら、チーム全員が「 とりあえず動くと思うから実装しようぜ 」という状態だったので、本腰入れてドキュメント読みました。前回の記事の内容を把握したら一気に見通しが良くなると思ったので、説明します。色々なサイトやドキュメントは明らかに冗長な説明が多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点があれば、まさかりお待ちしております。 Caveats Reduxが理解できていないと、React-Reduxの必要性が理解しにくいため、Reduxがなんなのか不安
はじめに 設計がしっかりしていないまま開発をしてしまうとビジネスロジックとライブラリが密結合となりがちです。 密結合度が高いほど修正が困難となり、継続的な開発の難易度が上がっていきます。(技術的負債) またプロジェクトが大きくなってくると扱うデータ量も多くなり処理速度もデータ量に比例するため、計算量オーダーの影響を受けます。 プロジェクトのそれぞれの機能に対して 1. 再利用可能 2. テストしやすい 3. 機能追加しやすい 4. ビジネスロジックとライブラリ、REST API(+マスターデータ)を分離できる となっていれば継続的な開発がしやすいです。 最近ではクライアントサイドではクリーンアーキテクチャ、Atomic Design、バックエンドではマイクロサービス化という設計方法があります。 この設計が良いと感じているのはビジネスロジックと機能の責務を分離し、 ライブラリとREST AP
JavaScriptフレームワークのおすすめ本まとめ (2018年4月) Webフロントエンドで脱jQueryした先の乗り換え先、モダンなJavaScriptフレームワーク群。浮き沈みが激しいですが2017−2018年現在、Angular/React/Vue.jsが大まかに3強と言われています。FWの選定で色々調べたり本を読んだりしたので、このエントリでは2018年現在日本語で読める本をまとめてみました。4月といいつつその後もちょっと混ざっています。それぞれのフレームワークと関連してモバイルアプリを開発できる仕組み(Ionic, React Native, Weex/Vue Native)の本は含んでいません。 JavaScriptフレームワークのおすすめ本まとめ (2018年4月) Reactの本 短時間で概要を把握したい Reactではじめるフロントエンド開発入門 いまから始めるWeb
Typetalk チームフロントエンドエンジニアの岡藤(@johnykei)です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
前回までで簡単なカウンターアプリがReact Reduxで出来上がっている状態なので、次はデザイン周りの実装をしていきたいと思います。 今回実装するのはMaterial-UIを追加してみたいと思います。 こちらは昔書いた記事のリライト版になりますので、記事の文言等々はご了承ください。 公式サイト material-ui v1のインストール SVGIconを追加する MuiThemeを読みこませる テーマファイルの作成 src/myThemeFile.jsx App.jsxでテーマを読み込む HeaderをAppBarにしてみる Header.jsxにAppBarを追加する JSSスタイルの反映 1.withStylesのimport 2.styleの作成 3.ピュアファンクションだったHeaderをComponentにし、withStylesでラップします。 4.PropTypesの定義追
React × Reduxの連載記事の3回目です。 今回はESLintのJavascriptコードスタイルを設定していきたいと思います。 ESLintを使用してJavascriptのコードスタイルガイドを導入している人は多いと思いますが、その中でもAirbnbのスタイルガイドが人気なので、できるだけ準拠するよう実装していきたいと思います。
1年半前に同じ記事を書いたのですが、バージョンアップによる変更が多く、古い記事ではまともに動かすこともできない記事となってしまったため、React × Reduxの連載記事を1日目から再投稿していこうと思います。 記事の文言等々は過去の記事をリライトしてますので、ご了承ください。 それではReact、Reduxを使用してWebアプリを構築していきたいと思います。 まずはサラのMacに環境構築から、webpackを使用してreact-reduxのsampleが動くところまでやってみたいと思います。 使用プラグイン、ライブラリ等は追々検討するということで。。 react-routerとか、axiosとか、material-uiとか。 基本的に自分メモなので、よくわかってないで書いてる部分もすごいあるので、間違いとかあったらゴメンナサイ。 今の私の環境 React環境構築 HomeBrewのイン
Facebook が開発したUI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート(状態)管理を、ルール(哲学)に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ (*個人的解釈です) もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov
あらすじ Nginx + Node.js + React.js + Mongodb で Web Application の構築手順を説明する必要があるのですが、Dockerfile をドキュメントとして扱う事になりました。 % docker --version Docker version 17.06.2-ce, build cec0b72 % node -v v8.1.0 % create-react-app --version 1.4.0 % mongo --version | head -n 1 MongoDB shell version v3.4.9 準備 一応 Todos アプリのような感じの Web API を backend で用意して React がそのデータを描画する、までの簡単なサンプルアプリを作成しつつ Docker について説明します。 先ずは以下のコマンドを実行し
Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ
はじめに 株式会社あゆたの毛利です。 この記事は、第9回これから始める人のためのNode.js,React.js勉強会用の資料です。 ざっくりまとめただけなので、おかしなところがあったらご指摘ください。 今回のネタのreduxのexampleのtodosのソースコードはこちら 一応公式にも解説があるのですが、英語なのと私自身ソースの流れを見ないといまいち理解ができなかったので、まとめてみました。 exampleはES2015で書かれているので必要に応じてその解説もしていきます。 対象、前提 Javascriptが理解できている。 Reactがなんとなく理解できている。 動かしてみる場合は、node.jsがインストールされていてnpmが使用できる環境がある。 ソースをダウンロードして動かしてみる こちらからダウンロード(もしくはgit clone)してください。 今回読むexampleは、/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く