Reactの描画処理が速い理由
Reactの描画処理では仮想DOMの採用にはじまり、高速化するために工夫がこらされている。
工夫の方向としては"処理が重いリアルなDOMの操作を極力抑える"というものでる。
まずはリアルDOMの処理内容を知り、そこからどういった点で仮想DOMの方が速いのか比較する。
続きを読む
初めてのNode.js
JavaScriptを書いているとNode.jsがよく話に出てくるが１度も書いたことがなかったので簡単なサンプルを作った。
Node.jsとは
GoogleのChromeのJavaScriptエンジンV8からスクリプト環境を取り出したもの。
サーバーに関する便利なAPI(ファイル読み書き・圧縮・HTTPサーバー)を備え,
2009年にサーバーサイドで動くJavaScriptとして注目を集めた。
それまでサーバーはPHP,Javaが主流だったのでNode.jsであればフロントとサーバーを同じ言語で書けるという魅力が大きかった。
Node.jsの魅力
・フロント・サーバーでの言語の統一
・ライブラリが簡単に使える
パッケージマネージャーnpmのおかげで手軽にライブラリのインストール、依存関係の問題解消を行ってくれる
・大量アクセスに強い
ノンブロッキングI/0を採用し、C10K問題 (クライアント１万台接続問題)を解決できる
もっと詳しく書いてる記事
Dart/FlutterハンズオンでNews閲覧アプリ作ってきた
5月13日にヒカリエで開催されたDart/Flutter入門者向けハンズオンに参加してきました。
イベントの概要は以下の通りです。
・講義: DartとFlutterについて概要を掴む
・開発: シンプルなニュース閲覧アプリを実際に作成する
講義のまとめと開発を実際にしてみた個人的な感想をまとめてみました。
講義
Dart
2011年にGoogle社によって開発されたWeb向けのオブジェクト指向プログラミング言語。
JavaScriptの代替え目的で開発されているため書き口はJavaScriptやJavaと似ているがJavaScriptができないことやパフォーマンスに注力して開発が進められている。
クライアントサイドとサーバサイドの両方で使用することができるので、Web・アプリ・サーバーを全部Dartで記述できる。
それどころかまだ公にはされていないがデスクトップアプリもDartでかけるような構想が描かれているらしい。
動的型付けと静的型付け論争が起こる昨今、Dartでは動的片付けと静的型付けを変数ごとに任意選択する事ができる共存の道を提供している。
コンパイラに工夫があり、開発中は中間コードをコンパイルするJITコンパイル*、リリースでは事前に行われるネィティブコードに最適化してコンパイルするAOTコンパイル*を使い分けている。
*2 AOTコンパイル
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
開発
素晴らしくまとめられた資料をもとに各自ドキュメントを読み進めながらもくもくしました。
学習できる内容は下記の５点です。
- Flutterプロジェクトの作成
- 基本的なレイアウトシステム
- 基本的なインタラクション
- HTTP通信
- プラグイン、パッケージの利用
そして完成形はこちらです。
今日の成果物！FlutterでNews閲覧アプリ作った∩^ω^∩
— Yuri@b-monエンジニア🥊 (@yuri_htt) 2018年5月13日
レイアウト組むところからプラグインを導入してHTTP通信するところまでできたので楽しかった！ pic.twitter.com/HSawxq37i0
こちらの資料の作成及び本日の講師の方はこちら
DartやFlutterに興味がある方は是非フォローしておいた方が良いと思います。
感想
業務ではReact Nativeを開発しているので大筋では類似点がいくつもあり、勘所を掴んでサクサク進めることができました。
個人的にUIの組み方はだいぶ異なる印象を受けました。
React NativeではJSXによるViewの構造がタグ見たままなので把握がしやすいなと思う反面、そのタグ自体がイケてないよね。という人もいました。
私は構造の把握とスタイルが分離できる点に可読性の高さを感じています。
魅力的だったのはAndroid StudioでAndroid端末だけでなくiOSシミュレーターも起動できるので、Xcodeを起動せずにAndroid Studioだけで両端末確認できるのが画面の領域的にもパソコンの処理能力的にも便利だなという点です。
現在React Nativeでけっこう大きな規模のアプリを開発していて、やはりプロパティを大量に受け取る画面、Viewが大量にrender()される画面では動作がもっさりすることが見受けられます。
もし、JavaScriptよりもDartでは堅牢にコードを書くことができ、描画のパフォーマンスもあきらかに良いとしたら、Flutterでの書き換えを検討してもよいのかもしれません。
スタートアップに入社して２年、しまなみ海道を500kmロングライドするような方向に成長した
2014年創業のスポーツIT企業に、まだ役員含め社員が4人しかいない時点に入社しました。
その時の私はHTMLとCSS、SwiftでUI側のみ(サーバーとかよくわかってなかた)で完結するアプリをつくれる程度のスキルセットでした。
月日は流れ、この5月で入社して2年となりました。
立派な中堅社員です。
スタートアップで2年も働くとものすごく成長します。
そう、それはもうすごい勢いで、私の想定していなかった方向に。。。
ITの技術を物語として捉える
新しいIT技術が生まれる時、そこには必ずニーズが存在します。
その技術が必要とされた背景や、どんな未来を実現するために生まれてきたのかという前後の文脈、いわば物語を知ることは、世の中の動きを知ることに繋がります。
デジタルデータ化
私たちの生きる現実世界はヒトとモノで溢れ、それらが相互に関係を持ち、影響を及ぼしあって存在しています。
現実世界は連続的な時間によって構築されるアナログな世界です。
このアナログな世界をモノに組み込まれたセンサーによって データとして捉える仕組みがIoT(Internet of Things)です。
例えば、スマートフォンの位置情報の取得(GPS)設定をONにしておくと、取得された位置情報はインターネット経由で送り出され、下図のように私の活動をデータ化してくれます。
Google mapのタイムライン
アナログな世界の断片を写し撮ったデジタルコピーはインターネットの向こうにあるクラウドコンピューティングの世界に蓄積・構築され、現実世界と瓜二つのデジタルな世界という意味でデジタルツイン(Degital Twin)と呼ばれます。
デジタルツインはアナログの現実世界ではできないこと、時間を遡ったり、地理的距離を一瞬で行き来するといったことができます。
デジタルツインを構築するもう１つ大きな役割を担うのがソーシャルメディアです。
人々はFacebookやInstagramなどで写真や自分の居場所、そしてフォローなどの機能ではヒトとヒトの繋がりという情報をネットに送り出しています。
最適解の発見
IoTとソーシャルメディアによりネットに送り出される情報は増え続け、膨大な量のデータがクラウドコンピューティングの世界に蓄積されています。
この膨大なデータがビッグデータとよばれるものです。
様々な内容・形式のデータの集合は、単純な統計だけでは意味や規則性を見出すのに限界があります。
そこで人工知能と呼ばれるAI(Artifical Intelligence)がこれを解決する手段として注目を集めるようになりました。
AIは1枚の写真から、「それはどこなのか」「だれが写っているのか」を解釈し、そこから「誰が誰と親しいのか」といった意味を読み取り、最終的には得られた情報から「次にどんな情報を提供すべきか」という判断を行います。
上記の処理を行う上で判断に必要なルールを作るのに機械学習(Machine Learning)が使われます。
またこのルールを考えるために大量のデータから効率よく規則性を見つけるために人間の脳活動を参考にしたアルゴリズムである深層学習(Deep Learning)が開発されました。
これらの技術は、個々人や条件に応じて最適解を見つけ出すことを実現します。
変化への対応
ここ数年のIT技術の進化により、ビジネス環境も急速に変化しています。
ビジネスの世界では、この変化に即応することが求められ、それを実現させるために変化や変更に対応できるアジャイル開発という開発手法が以前のウォーターフォールに取って代わりつつあります。
また、開発したアプリケーションをすぐに本番環境で実行するための取り組みとしてDevOps(Development & Operation)が不可欠となりました。
まとめ
デジタルツインを構築し、構築された膨大なデータから最適解を導き出し、さらにビジネス環境の変化にあわせて対応する一連の仕組みはサイバーフィジカルシステムと呼びます。
*1
サイバーフィジカルシステムが進む中でこれまで人間のできることの一部を機械に置き換えるに止まらず、"ITや機械が全てを行うことを前提にして人間にしかできないことが残ったらそれは人間がやりましょう"という発想に至りました。
この発想の転換はデジタルトランスフォーメーションと呼ばれ、一部を置き換えてきた時と比べ、何割ではなく、何十倍もの成果をあげることが可能です。
デジタルトランスフォーメーションは、既存の常識や既得権益の破壊、新たな価値観や秩序の想像といったデジタルディスラプションを生み出します。
*1:現実世界をデータで捉え、現実世界がITと一体となった社会変革を実現する取り組み
