
2025.02.12
職員一人あたり52時間の残業削減に成功 kintone導入がもたらした富士吉田市の自治体DX“変革”ハウツー
リンクをコピー
記事をブックマーク
池田泰延 氏(以下、池田):みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう!
ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こんなところでやっていました。
JavaScriptに関して2年ほど前に『JavaScript コードレシピ集』という本を出しています。この本はまだ役に立つ内容もあるかなと思いますので、もし書店で見かけましたらぜひご購入を検討ください。宣伝でした。
次は、今回の話のいきなり結論から話そうと思います。フロントエンド2020という話なんですが、Webの劇的な変化は少なくなってきたと思っています。(私は)今は制作フローと品質を改善するフェーズにたどり着いたと見ています。私から今日はこれについて、20分話そうと思いますが、なぜこういう結論に至ったのかということを振り返りながら説明していきたいと思います。
今日は「フロントエンドの技術の変遷」ということで、少し歴史を振り返ってみたいと思います。昔はフロントエンド技術というのは移り変わりが激しいということがよく言われていました。確かにそれはあったかなと思います。JSライブラリとかを少し遡ってみると、2010年の頭ぐらいからAngularJSとかBackboneとかKnockoutとか、こういうライブラリが非常に出てきていました。
ただ最近は3大フレームワークと言われていますが、Angular、Vue、Reactというところが主流になっているかなというところで、いろいろ筍のようにたくさん出てきていたツールも、ある程度集約されてきたのかなという印象があります。
これはnpm trendsという、パッケージモジュールのダウンロード数の推移を比較したものですが、この黄色で伸びているところがReactなんです。VueとAngularもそれぞれ伸びていますね。これは全世界で見た数値で、あとはライブラリの構成によってダウンロード数も変わりますが、大まかな傾向としてずっと右肩上がりに上がっているというような状況がわかります。
ビルドシステムについてもこれも変化がありまして、昔だったら2013年ぐらいにGruntと呼ばれるツールがパラダイムシフトのように出てきたわけです。
だけど、今はGruntを使っている人はあまりいなくて、Gulpに移り変わっていたりしています。他にもJavaScriptのほうだと、BrowserifyとかAMDとかいろいろ出てきましたが、今はwebpackが非常に勢力を拡大しています。このwebpackが後のGulpとかでやるような内容まで引き取っているというようなところが現在の状況です。
これをnpm trendsで見ると圧倒的にwebpackが一強の時代になっていると。
昔を遡ってみるとaltJSと言われる、JavaScriptをそのまま書くのではなくてJavaScriptをいったん別の言語で書いてそれをJavaScriptにコンパイルしようという文化があります。古くは2000年代からHaxeがありましたが、その後はCoffeeScriptとTypeScriptと来ていて、この辺は結局TypeScriptが一強の時代になっているというような状況だったりします。
こっちはGoogleトレンドで見たものですが、これもグラフで見るとTypeScriptがずっと伸びているという状況がわかります。
表現系ライブラリはどうかということで、これは昔のFlashのようなインタラクティブコンテンツを作るためのJavaScriptのフレームワークです。これはいくつか2010年代初頭にたくさん出てきていましたが、WebGLとかCanvasを使う系のライブラリですね。これはもう今はThree.jsとかPixiJSに集約されてきたというような状況が見えてきます。
これもGoogleトレンドで見るとこんな感じで、Three.jsがこの界隈では一番強いですが、CreateJSとかPixiJSは、この赤と青のところでラインが入っている。
ここの傾向から見ると、このインタラクションはCanvasとかWebGLを使う系のものは少しずつ下がってきていて、これはライブラリが新しいのが出ているわけではないので、ここから読み取れることとしましてはインタラクションデザインの分野自体が市場が縮小していることを1つ読み取れるのではと思っています。
では次の話にいきましょう。
こういったところを見ると、群雄割拠の時代は終わりを告げ、高度化を目指す時代になってきたように捉えています。これを具体的に示すのにReactの話をしていきましょう。
Reactというのは書き方がどんどん変わってきています。最近だとHooks APIを使ったコードの書き方をしています。昔だとクラスコンポーネントで書いたりとか、もっと昔だと.createClassというメソッドを使ってクラスのような挙動をするとかのコンポーネントの作り方をしていました。
Reactもどんどん書き方が変わってきています。書き方つまりコードの見える部分だけではなくて、内部のアーキテクチャもStack方式というものからFiber方式というものに変わってきています。これは何が変わってきているのかというと、Fiber方式はユーザーインターフェースの操作を阻害しないようなかたちで、Reactの更新処理を分割するみたいなところのアーキテクチャです。
そのパフォーマンスの向上であったりとか、アプリケーションを触ったときに快適に使えるようにみたいな思想があってのアーキテクチャです。これはReactで、そういうより高度な技術に発達してきている。
これは他のライブラリ、例えばVue 3。Vue 3は今年リリースされるものだと思っていますが、まだα版、β版の段階です。このVue 3もComposition APIと呼ばれるReactの関数コンポーネントに近いような書き方を搭載している一方で、パフォーマンスの向上としてより高速に動くとか、より小さなJavaScriptライブラリとして動くとか、そういったいくつかの機能向上が公式サイトからアナウンスされています。
隣のAngular。Angularも2020年の2月、今年の2月にAngular 9が出ましたが、Googleが作っているフルスタックフレームワークですね。これはAngular Ivyと呼ばれるレンダリングエンジンの刷新が行われていて、それがデフォルトになっています。そのIvyというレンダリングエンジンは何なのかというと、より小さなライブラリとして動くし、より早く動くみたいなところのエンジンになります。
ここから読み取れることとしてはReactもVueもAngularも、新しい何かを置き換えるというわけではなくてそのライブラリの中で進化しようとしていることです。そのことが、ここの紹介から読み解けると思います。
では次の話に移っていきます。ちなみに今回ハッシュタグで#icspatchというハッシュタグを付けていますので、ぜひここで聞いて気になった点とかはツイートいただけるとみなさんうれしいです。
次はICSが取り組んでいることを紹介していきます。そういった時代背景の解釈をしている中で、ICSはどう取り組んでいるのかという話をしていきます。ICSが取り組んでいることを今日は3つお話しします。JAMstackアーキテクチャ、UI体験の改善、制作ルールの改善という3つのセクションに分けて説明していきます。
まずはJAMstackアーキテクチャと呼ばれるものを説明します。JAMstackとはWebアプリケーションの新しいアーキテクチャで、フロントエンドの技術で静的HTML文を作って、それを静的にファイルを配信するというものです。シングルページアプリケーションのような挙動をして動かすというものになります。
普通のWebサイトをHTMLとCSSで作って普通に静的サイトをアップするのと何が違うのかというと、シングルページアプリケーションをJavaScriptのエンジンなどよりも高速に動かすアーキテクチャが入っているところが特徴です。他にもGitで自動にビルドするとか、そういう話も入ってきます。こういった特徴のあるJAMstackをICSでは導入しています。
去年からICSではICS MEDIAというオウンドメディアのサイトを運用していますが、このサイト自体がJAMstackの構成でできています。ページ遷移とかもめちゃくちゃ速くなるようにがんばって作っていますね。こういう検索ボックスもwebpackとかを入れると打った瞬間に検索ができるようになっていて、かなり高速なアーキテクチャで作っています。
なぜこれが実現できているのかというとJAMstackの構成で作っているからです。JAMstackで作るとなぜ速くなるのかですが、ちょっと振り返ってみますと、もともとこのブログ形式のかたちを取っているサイトは、もともとはWordPressで運用していました。
これをNuxtとAMPの構成に変更しました。リニューアルしてからだいたい1年経ったので、どういう効果があったのかみたいなところをこのセッションの中で説明していきたいと思っています。
まずはLighthouseのスコアに関して、WordPressのときはよくて80点ぐらいのスコアだったのが、去年(2019年)の7月時点で、このスコアを100点取れるように改善しました。
シングルページアプリケーションとして起動するので、Nuxtの中身はVue.jsですが、シングルページアプリケーションはとてもサイトの高速化に有利です。SPAでルータ遷移といって、シングルページアプリケーションだとそのブラウザでアドレスを変えてページごと切り替えるのではなくて、画面の中のここの部分だけ変わるというのをすり替えられるんですね。
なので普通にWebサイトを閲覧するよりもかなり高速になるというところがあります。
シングルページアプリケーションはJavaScriptで動くので、JavaScriptで作るとSEO的にタグが出ないから不利じゃないかという話がよくありますよね。でも、このNuxtのいいところはソースコードの中身、本文の内容であったりとか、FacebookやTwitterのとかOGPとかそういった情報も静的に書き出すこともできるので、SEO上の弱点はほぼないです。
他にも先ほどお見せしたサイトの中でサイト遷移を高速化する仕組みみたいなものがあって、インスタントクリックというものが入っています。これは何かというと、ページをスクロールしてきたときにリンクがページの中に入ったときに自動的にリンクを先読みするという機能が入っているんです。
これはNuxt側にその機能が入っているので、それを利用しているというのもありますが、Nuxtで管理していないところ、AMPと併用しているところもリンクにマウスオーバーしたらマウスオーバーした瞬間に次のページの情報を読み込むみたいなことをしているので、体感として高速に見えるみたいなところも実装していたりします。
そういった表示速度の高速化する観点でやったところ、これはGoogleアナリティクスの結果の実測値で、改善前と改善後で見たときに左下のところで-75パーセントと書いてありますが、読み込み時間が75パーセント短縮された、だいたい4倍ぐらい速くなったという結果がGoogleアナリティクスから出ているので、確実にサイトのレスポンスはよくなったと思っています。
次はWordPressからJAMstackの構成にしたことでCMS観点でどういうことがあったかを紹介します。原稿管理はすべてマークダウンで管理するようにしました。
WordPressの中はけっこう自由に書けたりするので、今でいうとWordPressのGutenbergで書けますが、原稿ファイルは一元管理がしにくかったり、中身のフォーマットにいろいろ独自性が出てしまったりします。だから、マークダウンで完全に固定化することによって「データポータビリティ」と書きましたが、例えばこのNuxtの構成から別の技術にしたときにもただのマークダウンだから移植しやすいというメリットがあるという構成にできました。
今度はWordPressからJAMstackにしたことで悪くなったことを説明します。ビルド時間がめちゃくちゃ掛かるようになりました。これはNuxtとかを使っている人だとわかると思うんですが、ちょっとしたページを更新しようとしてもだいたい1分から2分ぐらい掛かってしまうというのがあります。
Nuxtだとビルド、スタート、ジェネレートというコマンドを実行して、ICS MEDIAの場合はAWSを使っているので、AWS S3にポンと放り込むのにそれも時間が掛かるので、WordPressで更新ボタンを押してすぐに反映できたことが、JAMstackではできなくなったなというに不便を感じています。
あとは予約公開ができない。これは作ればできるでしょうが、なかなかできないところというので、これが反省点としてあります。
(次回につづく)
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
PR | 2025.02.07
プロジェクトマネージャーは「無理ゲーを攻略するプレイヤー」 仕事を任せられない管理職のためのマネジメントの秘訣
2025.02.06
落合陽一氏や松尾豊氏の研究は社会に届いているか? ひろゆき氏が語るアカデミアの課題と展望
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
2025.02.05
「納得しないと動けない部下」を変える3つのステップとは マネージャーの悩みを解消する会話のテクニック
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.07
なぜ日本企業のDXは世界の先端企業から3周遅れなのか? 『ゼロ秒思考』著者が指摘する経営者に足りない決断
着想から2か月でローンチ!爆速で新規事業を立ち上げる方法
2025.01.21 - 2025.01.21
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
【著者来館】『成果を上げるプレイングマネジャーは「これ」をやらない』出版記念イベント!
2025.01.10 - 2025.01.10