Reactの描画処理が速い理由

Reactの描画処理では仮想DOMの採用にはじまり、高速化するために工夫がこらされている。

工夫の方向としては"処理が重いリアルなDOMの操作を極力抑える"というものでる。

まずはリアルDOMの処理内容を知り、そこからどういった点で仮想DOMの方が速いのか比較する。

 

続きを読む

初めてのNode.js

JavaScriptを書いているとNode.jsがよく話に出てくるが1度も書いたことがなかったので簡単なサンプルを作った。

github.com

 

Node.jsとは

GoogleChromeJavaScriptエンジンV8からスクリプト環境を取り出したもの。

サーバーに関する便利なAPI(ファイル読み書き・圧縮・HTTPサーバー)を備え,

2009年にサーバーサイドで動くJavaScriptとして注目を集めた。

それまでサーバーはPHP,Javaが主流だったのでNode.jsであればフロントとサーバーを同じ言語で書けるという魅力が大きかった。

 

Node.jsの魅力

・フロント・サーバーでの言語の統一

・ライブラリが簡単に使える

 パッケージマネージャーnpmのおかげで手軽にライブラリのインストール、依存関係の問題解消を行ってくれる

・大量アクセスに強い

 ノンブロッキングI/0を採用し、C10K問題 (クライアント1万台接続問題)を解決できる

 

もっと詳しく書いてる記事

Node.js を5分で大雑把に理解する

Dart/FlutterハンズオンでNews閲覧アプリ作ってきた

5月13日にヒカリエで開催されたDart/Flutter入門者向けハンズオンに参加してきました。


イベントの概要は以下の通りです。

・講義: DartとFlutterについて概要を掴む
・開発: シンプルなニュース閲覧アプリを実際に作成する

 

講義のまとめと開発を実際にしてみた個人的な感想をまとめてみました。

講義

Dart

2011年にGoogle社によって開発されたWeb向けのオブジェクト指向プログラミング言語
JavaScriptの代替え目的で開発されているため書き口はJavaScriptJavaと似ているがJavaScriptができないことやパフォーマンスに注力して開発が進められている。

クライアントサイドとサーバサイドの両方で使用することができるので、Web・アプリ・サーバーを全部Dartで記述できる。
それどころかまだ公にはされていないがデスクトップアプリもDartでかけるような構想が描かれているらしい。

動的型付けと静的型付け論争が起こる昨今、Dartでは動的片付けと静的型付けを変数ごとに任意選択する事ができる共存の道を提供している。

コンパイラに工夫があり、開発中は中間コードをコンパイルするJITコンパイル*、リリースでは事前に行われるネィティブコードに最適化してコンパイルするAOTコンパイル*を使い分けている。

*1 JITコンパイル

*2 AOTコンパイル

Dartの構文については公式サイトが手厚く情報を載せてくれている。

Language Tour | Dart

 

Flutter

クロスプラットフォームでアプリを開発するための開発フレームワーク
UIはGPUを利用して描画する独自のWigetシステムを採用している。
WigetシステムはReactにインスパイアされており、UIは木構造的に組まれ、stateで状態管理を行う。
ホットリロード機能と差分ビルドで快適に開発ができる。

ネィティブの機能を使うには公式から提供されているプラグインを使用する。

GitHub - flutter/plugins: Plugins for Flutter, including FlutterFire, maintained by the Flutter team

開発環境: IntelliJ, Visual Code Studio, Android Studio
パッケージ管理システム: Pub package manager

 

開発

素晴らしくまとめられた資料をもとに各自ドキュメントを読み進めながらもくもくしました。

docs.google.com

 

学習できる内容は下記の5点です。

  • Flutterプロジェクトの作成
  • 基本的なレイアウトシステム
  • 基本的なインタラクション
  • HTTP通信
  • プラグイン、パッケージの利用

 

そして完成形はこちらです。

 

 こちらの資料の作成及び本日の講師の方はこちら

twitter.com

DartやFlutterに興味がある方は是非フォローしておいた方が良いと思います。

 

感想

業務ではReact Nativeを開発しているので大筋では類似点がいくつもあり、勘所を掴んでサクサク進めることができました。

個人的にUIの組み方はだいぶ異なる印象を受けました。
React NativeではJSXによるViewの構造がタグ見たままなので把握がしやすいなと思う反面、そのタグ自体がイケてないよね。という人もいました。
私は構造の把握とスタイルが分離できる点に可読性の高さを感じています。

魅力的だったのはAndroid StudioAndroid端末だけでなくiOSシミュレーターも起動できるので、Xcodeを起動せずにAndroid Studioだけで両端末確認できるのが画面の領域的にもパソコンの処理能力的にも便利だなという点です。

現在React Nativeでけっこう大きな規模のアプリを開発していて、やはりプロパティを大量に受け取る画面、Viewが大量にrender()される画面では動作がもっさりすることが見受けられます。

もし、JavaScriptよりもDartでは堅牢にコードを書くことができ、描画のパフォーマンスもあきらかに良いとしたら、Flutterでの書き換えを検討してもよいのかもしれません。

*1:JITコンパイラ(=Just In Time):
アプリケーション実行時のタイミングでコンパイル
実行速度が早く、プラットフォームに依存しないプログラムの配布が可能。

*2:AOTコンパイラ(=AheadOfTime):

アプリケーション実行前に事前にコンパイル

 OSやハードウェアの仕様を正確に把握できるため、ネイティブの機械語を生成することができ、その生成したネィティブコードをプロセッサにあわせて最適化することができる。

スタートアップに入社して2年、しまなみ海道を500kmロングライドするような方向に成長した

2014年創業のスポーツIT企業に、まだ役員含め社員が4人しかいない時点に入社しました。

その時の私はHTMLとCSS、SwiftでUI側のみ(サーバーとかよくわかってなかた)で完結するアプリをつくれる程度のスキルセットでした。

月日は流れ、この5月で入社して2年となりました。
立派な中堅社員です。

スタートアップで2年も働くとものすごく成長します。
そう、それはもうすごい勢いで、私の想定していなかった方向に。。。


www.wantedly.com

ITの技術を物語として捉える

新しいIT技術が生まれる時、そこには必ずニーズが存在します。

その技術が必要とされた背景や、どんな未来を実現するために生まれてきたのかという前後の文脈、いわば物語を知ることは、世の中の動きを知ることに繋がります。

 

デジタルデータ化

私たちの生きる現実世界はヒトとモノで溢れ、それらが相互に関係を持ち、影響を及ぼしあって存在しています。

現実世界は連続的な時間によって構築されるアナログな世界です。
このアナログな世界をモノに組み込まれたセンサーによって データとして捉える仕組みがIoT(Internet of Things)です。

例えば、スマートフォンの位置情報の取得(GPS)設定をONにしておくと、取得された位置情報はインターネット経由で送り出され、下図のように私の活動をデータ化してくれます。

Google mapのタイムライン

f:id:yuri_iOS:20180429002815p:plainf:id:yuri_iOS:20180429002925p:plain

 

アナログな世界の断片を写し撮ったデジタルコピーはインターネットの向こうにあるクラウドコンピューティングの世界に蓄積・構築され、現実世界と瓜二つのデジタルな世界という意味でデジタルツイン(Degital Twin)と呼ばれます。

デジタルツインはアナログの現実世界ではできないこと、時間を遡ったり、地理的距離を一瞬で行き来するといったことができます。

デジタルツインを構築するもう1つ大きな役割を担うのがソーシャルメディアです。

人々はFacebookInstagramなどで写真や自分の居場所、そしてフォローなどの機能ではヒトとヒトの繋がりという情報をネットに送り出しています。

 

最適解の発見

IoTとソーシャルメディアによりネットに送り出される情報は増え続け、膨大な量のデータがクラウドコンピューティングの世界に蓄積されています。
この膨大なデータがビッグデータとよばれるものです。

様々な内容・形式のデータの集合は、単純な統計だけでは意味や規則性を見出すのに限界があります。
そこで人工知能と呼ばれるAI(Artifical Intelligence)がこれを解決する手段として注目を集めるようになりました。
AIは1枚の写真から、「それはどこなのか」「だれが写っているのか」を解釈し、そこから「誰が誰と親しいのか」といった意味を読み取り、最終的には得られた情報から「次にどんな情報を提供すべきか」という判断を行います。

上記の処理を行う上で判断に必要なルールを作るのに機械学習(Machine Learning)が使われます。
またこのルールを考えるために大量のデータから効率よく規則性を見つけるために人間の脳活動を参考にしたアルゴリズムである深層学習(Deep Learning)が開発されました。

これらの技術は、個々人や条件に応じて最適解を見つけ出すことを実現します。

 

変化への対応

ここ数年のIT技術の進化により、ビジネス環境も急速に変化しています。
ビジネスの世界では、この変化に即応することが求められ、それを実現させるために変化や変更に対応できるアジャイル開発という開発手法が以前のウォーターフォールに取って代わりつつあります。

また、開発したアプリケーションをすぐに本番環境で実行するための取り組みとしてDevOps(Development & Operation)が不可欠となりました。

 

まとめ

デジタルツインを構築し、構築された膨大なデータから最適解を導き出し、さらにビジネス環境の変化にあわせて対応する一連の仕組みはサイバーフィジカルシステムと呼びます。
*1

 

サイバーフィジカルシステムが進む中でこれまで人間のできることの一部を機械に置き換えるに止まらず、"ITや機械が全てを行うことを前提にして人間にしかできないことが残ったらそれは人間がやりましょう"という発想に至りました。
この発想の転換はデジタルトランスフォーメーションと呼ばれ、一部を置き換えてきた時と比べ、何割ではなく、何十倍もの成果をあげることが可能です。
デジタルトランスフォーメーションは、既存の常識や既得権益の破壊、新たな価値観や秩序の想像といったデジタルディスラプションを生み出します。

 

図解コレ1枚でわかる最新ITトレンド

 

 

 

 

 

*1:現実世界をデータで捉え、現実世界がITと一体となった社会変革を実現する取り組み