noteでの大きくなりすぎたNuxt.jsのアプリケーションを分割する取り組みについて

結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。 ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。 JavaScriptフレームワークの簡易比較有名かつドキュメントが日本語化されており、入門書もでているJavaScriptフレームワークにはAngular、React、Vueがあります。 で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。 ・ Angularは、HTMLとJavaScript(TypeScript)を分割してかきます。 ・ Reactは、JavaScriptの中にHTMLを書きます。
この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。 まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。 シェアだけで見るとAngularとAngularJS(Angular系の1.x系)の合計値はVueよりも高いですが、「今後はもう採用したくない」と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは
こんにちは, Mackerel 開発チーム アプリケーションエンジニアの id:susisu です. 現在 Mackerel では, Web コンソール画面の開発に使用しているフレームワークを, これまで使用してきた AngularJS から React へ移行することを中心とした, フロントエンド開発の刷新プロジェクトを行っています. このプロジェクトの立ち上げについては以前 Hatena Engineer Seminar で発表しましたが, そこでは時間の都合もあり, 技術的側面についてはあまり深く掘り下げることは出来ませんでした. ということでこの記事では, より技術的な面にフォーカスしてプロジェクトの内容をご紹介できればと思います. "React化" プロジェクトについて Mackerel の開発は 2014 年ごろから始まりましたが, フロントエンドのフレームワークとしては当初か
Vue.js, React, Angularといった各種のSPAフレームワークがどんな企業で使われているのか知りたくて、「SPA 事例」や「SPA 採用例」といったキーワードでググったけどめぼしい情報が出てこなかったので調べてまとめました。 ソース made with XXXを参考に、独断と偏見により有名な企業を5つずつ選出しました。FacebookがReact, GoogleがAngularを使っているのは自明なので除外しています。 Vue.js https://madewithvuejs.com/ React https://madewithreactjs.com/ Angular https://www.madewithangular.com/
Angular 7正式版リリース。バーチャルスクロール、ドラッグ&ドロップのサポートなど、6カ月ぶりのメジャーバージョンアップ JavaScriptフレームワーク「Angular」の最新版「Angular 7」正式版がが10月19日にリリースされました。 Angularは2017年4月に登場したAngular 4から、半年ごとにメジャーバージョンアップが行われるリリースサイクルを採用しています。Angular 7はこのリリースサイクルに従って、2018年5月に登場したAngular 6に続くメジャーバージョンとなります。 Angular 7では、これまでのバージョンアップに引き続き動作速度の向上が計られているほか、TypeScript 3.1対応とRxJS 6.3対応、Node 8のサポートに加えてNode 10もサポートされるようになりました。 そしてAngular 7での大きな新機能は
タイトルのとおり、AngularのGoogle Developers Expertsになりました! https://developers.google.com/experts/people/suguru-inatomi Angular GDEは世界では82人目になるようですが、日本では僕が初めてです。やったぜ! github.com まだ高専生だったころ、2013年にGDGのGoogle I/O 報告会九州会場に参加して、そこではじめてGDEを知りました。 それからずっとGDEに憧れていたので、5年越しにひとつ夢が叶いました。大好きなAngularでGDEになれて本当に嬉しいです。 プログラムの進行をサポートしてくれたGoogleのえーじさんやたくおさん、面接に協力してくれたGDEのFilipさんとAngular TeamのStephenには大感謝です。 Angular GDEはWeb G
2018年9月5日、第70回となる「HTML5とか勉強会」が開催されました。今回のテーマは「開発環境」。 Webフロントエンドの開発環境をテーマに、エディタプラクティスやService Workerを開発ツールとして使うアプローチ、長期運用されたサービスのリニューアル方針など、登壇者たちがその知見を語ります。プレゼンテーション「noteのフロントエンド刷新中の開発環境」に登場したのは、fukuiretu氏。「明確なコーディング規約がない」「コンポーネントの設計ルールがない」という2つの課題を解決するために行った開発環境の刷新の裏側ついて語ります。講演資料はこちら noteにおけるフロントエンド開発環境の刷新fukuiretu氏(以下、fukuiretu):では、『フロントエンド刷新中のnoteの開発環境について』というタイトルでお話しさせていただきます。よろしくお願いします。 (会場拍手
ビズリーチで「HRMOS(ハーモス)採用管理」のフロントエンドエンジニアをしています、浅井です。 前編では「AngularJSのリプレースにAngularを選んだ話」についてお話しました。 今回は、長期的にサービスを発展させていくことを念頭に置き、アプリケーションの規模もチームメンバーの人数が増えていってもスムーズに開発・メンテナンスしていくために、AngularでWebアプリケーションを再構築していく中で盛り込んだことをご紹介したいと思います。 AngularJS時代の課題 せっかくAngularに移行するからには、「AngularJS時代からの負債は引き継ぎたくない、メンテナンスしやすい仕組みにしておきたい」というのがチームメンバー全員の想いとしてありました。 まずは、AngularJS時代に実装・運用フェーズで感じていた課題を洗い出したところ、 ページ単位で 似たようなUIが別々に
そしてAngular開発チームは1日に数回、Angularのアップデートされたコードをリポジトリにプッシュしており、そのコードは必ずこの600種類以上のアプリケーションのテストをパスする必要があるとのこと。 そのため、もしもAngularのコードに互換性のないものが含まれていた場合、サービスの管理者からはコードのロールバック要求が出されるだろうと、Angular Framework LeadのMisko Hevery氏は説明します。 Ivyの重要なコンセプトが「ローカリティ」 Ivyの重要なコンセプトが「ローカリティ」です。ローカリティによる具体的なメリットは、例えばテンプレートを1つ変更した場合、現在は全体をコンパイルする必要がありますが、Ivyではそのファイルだけをコンパイルし直せばよい、というもの。 これによって、例えばnpmは事前コンパイル(AOT)されたコードの状態で提供可能にな
Angular 2から6までの主要な進化をまとめた記事を読みたい。— Masahiko Sakakibara (@rdlabo) 2018年4月20日 逆にIonicの変遷が知りたいですね 最近Stencilも出てきたしその辺の絡みとか俯瞰的に見てみたいです— lacolaco (@laco2net) 2018年4月20日 rdlaboさんがしっかりGW明けにIonicの記事書いてくれたので、僕もAngularのv2からv6まで、3年弱の変遷についてまとめます。 Ionic 2 から 4 への、この2年間の進化を振り返る 前Angular v2時代 Angular v2 オフラインコンパイル AngularJSへの .component 逆輸入 Animation API Language Service Angular CLIとスタイルガイド SystemJSからwebpackへ For
Capture, share, & collaborate on knowledge internally. JavaScript UI frameworks and libraries work in cycles. Every six months or so, a new one pops up, claiming that it has revolutionized UI development. Thousands of developers adopt it into their new projects, blog posts are written, Stack Overflow questions are asked and answered, and then a newer (and even more revolutionary) framework pops up
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2017年ももう終わりなので、自分用のメモも兼ねて今年触った技術をざっとメモしてみる。 フロントエンドに対しては大凡モダンなものを使っているけれど、他についてはその限りではないので、自分が古いと感じるものについては来年以降移行したいもの、手をつけたいものもあわせてまとめる。 ちなみに今年のGitHubで見えるだけのアクティビティとしてはこんな感じ。そこそこコードは書いた。 技術の分類 とりあえず以下でカテゴライズしておく。そこそこその他はありそう。 Webフロントエンド Webバックエンド その他Node周り インフラ / ミドルウェア
はじめに この記事は下記の勉強会での発表資料になります 自己紹介 株式会社オプト シニアエンジニア @sisisin GitHub Twitter フロントエンドマン(Angular,AngularJS中心) Scalaも少々 最近はスクラムマスターやってます 先日、Safari11にてIntelligent Tracking Prevention(以下ITP)という機能がリリースされました ITP機能はユーザーのプライバシー保護のためにCookie利用に制限をかける機能で、これにより弊社の広告の効果測定サービスのユーザー行動の計測部分にも影響が出ました 最前線で使われるリアルなJSフレームワーク事情! という題目とはちょっと逸れてしまいますが、その問題について元々どのように計測を行っていたか、そこでどういうケースで問題になったか、最終的にどのようにその問題を解決したかを説明しようと思いま
Kaizen Platform入社前は何してたの?プログラミングを始めたのは高専生時代で、きっかけはMinecraftのMOD(改造パッチ)を作るために覚えたJavaでした。当時はまだMOD開発に関する日本語のドキュメントがほぼ皆無で、ソースコードを読んだり海外のフォーラムに潜ったりして集めたノウハウを日本のフォーラムに投稿する、というのを繰り返していました。今にして思えばあれが初めての開発者コミュニティへのコントリビューションで、今の自分の原点のような気がします。 2015年に高専の専攻科を修了したあと、株式会社トップゲートに入社しました。トップゲートでは主にGoogle App Engine/Goでのバックエンドの開発やAngularJS/TypeScriptでのフロントエンドの開発をやっていました。 同時期くらいから勉強会やイベントでの登壇、執筆などの活動を行うようになり、Webフロ
[レベル: 上級] React や Angular などの JavaScript フレームワークを利用したサイトでは、プリレンダリングしたページを配信することを勧める。 Google の John Mueller(ジョン・ミューラー)氏は、英語版のウェブマスター向けオフィスアワーでこのようにコメントしました。 プリレンダリングで高速表示 プリレンダリング (Prerendering) は、コンテンツの大部分を JavaScript で生成するページで利用されます(正しく言えば、JS に限りませんがここでは深入りしません)。 プリレンダリングでは、ブラウザに JavaScript を実行させてページをレンダリングさせるのではなく、サーバー側であらかじめレンダリングした“静的な”HTMLをブラウザに配信します。 ※補足: この記事で言う「プリレンダリング」は「サーバー サイド レンダリング (
日本では「プログラマー35歳(40歳)定年説」が存在しますが、アメリカでも同じように、いつまでも「イチ開発者」として生涯を過ごすのは困難と見なされています。40歳を超えたプログラマーはやがて「管理職」になることを促されるのですが、マネージャーになることを拒否して「生涯現役開発者」を貫いている40代~60代のソフトウェア開発者にインタビューが行われています。 Software Developers After 40, 50 and 60 Who Hate Being A Manager https://belitsoft.com/php-development-services/top-software-developers-after-40-50-and-60#2 ◆45歳でシニア・ソフトウェアエンジニアのロブ・フレッッチャーさん 得意分野:ウェブ開発、テスト駆動開発、アジャイルソフトウェ
Onsen UI Advent Calendar の12/9の記事です。 Onsen UIは、モバイルアプリのネイティブライクなUIをHTML + CSS + JavaScriptで簡単に構築することを目的としたUIライブラリです(UIフレームワークともたまに呼ばれます)。 ↓みたいなネイティブなモバイルアプリっぽい画面をサクッと作ることができます。 私は数年前から開発メンバーとしてOnsen UIの設計開発を行っています。この記事では、Onsen UIに求められるUIライブラリとしての要件とそれを解決するためにどのようなアーキテクチャを取っているのかについて解説します。 特定のフレームワークに依存しない jQuery UIやReactの上に乗っかっているUIライブラリなどのように特定のフレームワークの仕組みを使って実装されたUIライブラリというのはたくさんありますが、ある特定のフレームワ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く