フロントエンドに関する記事とニュース
-
2019/07/10大規模Webサービスの改善に向けたR＆Dの取り組み――SPAのボイラープレート開発とFastlyの活用
本連載ではリクルートテクノロジーズにおける大規模Webサービスの改善についてお伝えしてきました。最終回となる本稿では前回までの話とは異なり、今後のリクルートのWebフロントエンド技術について紹介します。具体的には、Single Page Applicationのボイラープレート開発と、Fastlyなどに代表されるCDN導入に焦点を当てた内容をお送りします。
-
2019/06/24Webフロントエンドのレガシーコードを改善するには？ 一筋縄ではいかないモダナイズ
タウンワークはオープンから10年以上が経過しており、JavaScript、CSS、HTMLを含め、フロントエンドの老朽化が課題となっているのは連載の第1回でお伝えした通りです。過去のA/Bテストの名残や、暫定対応と思われるコードが継ぎ足された結果、似たようなコードが残っていることも多く、フロントエンドのエンハンスの際に手戻りを多く誘発することが問題視されていました。本稿ではこうした問題に対し、この1年で取り組んできた改善内容を紹介します。派手な内容はないですが、レガシーコードに現実的に対峙し改...
-
2019/03/29CSSを軽量化し、ページ表示速度を改善せよ！ レガシーWebフロントエンドのパフォーマンスチューニング
2018年の7月から実施されたGoogleの検索ロジックの変更（Google Speed Update）により、ページ表示速度がサイト検索順位に影響するようになりました。今回紹介する取り組みは、Google Speed Updateに備え、タウンワークにおいて、できる限りのパフォーマンス改善を行う目的で実施したものです。本稿には、煌びやかなWebの新技術の話は一切登場しません。むしろ、連綿と受け継がれてきた「秘伝のタレ」に立ち向かう泥臭い話です。この取り組みで行ったアプローチは、不要なものを削...
-
2019/02/2210年以上稼働し続ける大規模Webアプリケーション、どうやって改善する？
リクルートには有名なアプリケーションや、これから作られる新規アプリケーションが大小合わせて数百存在し、中にはタウンワークのように10年以上運用されてるアプリケーションもあります。リクルートテクノロジーズではこれらのサービスのパフォーマンスやメンテナンス性の向上に取り組んでいます。本連載では、タウンワークで行った「パフォーマンス改善の取り組み」と「Webのフロントエンドにおけるモダナイズの取り組み」を2回に分けて紹介し、最後に未来の話として「これから利用するフロントエンドの技術」について解説しま...
-
2019/02/14デザインとエンジニアリングの融合がもたらす効果とは？【Cookpad Product Kitchen #1 with Takram】
2018年12月6日、クックパッド株式会社にて、サービス開発の手法や考え方について知見や学びを共有する勉強会「Cookpad Product Kitchen」が開催された。記念すべき第1回は、Takramのリードデザインエンジニア 神原啓介氏と、クックパッドの新規サービス開発部 UXエンジニア 出口貴也氏が登壇。デザインとエンジニアリングの融合がもたらす効果について語った。
-
2019/02/12SPAの保守開発を効率化――画面遷移理解を支援する
社会人エンジニア向けの教育プログラム「トップエスイー」から、エンジニアの皆さんに対して有用な情報をお届けするコーナーです。Webブラウザ上で稼働するアプリケーションでは、一度のダウンロードで複数のページ要素を持つ構成をとることができ、こうした実装手法は「SPA（シングルページアプリケーション）」と呼ばれます。ページ遷移が素早く行え、ユーザーにダウンロード待ちをさせることなく利用できることから、UXの改善にも効力があります。しかしながら、実際のページ遷移はコード内に潜み、どんなページ遷移をするか...
-
2018/08/21Reduxで作成したロジックをJestでテストする
Reactアプリ開発の基礎を解説してきた本連載。前回までは、Reduxの概念や実装について学んできました。今回は、ReducerやActionCreatorのロジックの品質を担保する上で有用なユニットテストの方法を覚えることを目的とします。
-
2018/05/18ASP.NET Core 2.0アプリケーションをデプロイしてみよう
本連載ではここまで、ASP.NET Core 2.0やEntity Framework Core 2.0を使ったアプリケーションの開発方法について説明し、PC上でアプリケーションを実行して確認してきました。最終回となる今回は、作成したアプリケーションをサーバにデプロイしてインターネット上に公開する方法について紹介します。
-
2018/04/24Entity Framework Core 2.0の新機能を使おう
Entity Frameworkは.NET環境で使用することのできるデータベースアクセスのフレームワークです。そのEntity Frameworkのクロスプラットーム版であるEntity Framework Coreの最新バージョンである2.0が、ASP.NET Core 2.0と同じタイミングでリリースとなりました。今回は、前回に引き続いてEntity Framework Core 2.0を使ったアプリケーションを作成していきます。実際にEntity Frameworkを使ってデータベースア...
-
2018/04/06本当に「優れたUX」を目指そう～AI技術やA/Bテストでフロントエンドを改善し続ける方法
本連載ではクラウドネイティブなWebアプリを手軽に、短時間で作りたい方を対象に、Webアプリ開発の最新事情をひも解きつつ、最適な開発ツール「K5 Playground」の概要と活用法を紹介してきました。前回は、K5 Playgroundでプロトタイピングを高速に行う技術を紹介しました。最終回となる今回は、プロトタイプを発展させていきます。はじめに課題をAI技術などで改善します。その後、「優れたUX」とは何かに触れながら、A/BテストによってUXを継続的に改善する手法を解説します。
-
2018/03/30Webアプリは会話するスピードで開発しよう～ReactやBFFで高速にプロトタイピングする技術
ここまで、K5 PlaygroundはアイデアをスピーディーにWebアプリの形にするツールであることを紹介してきました。アイデアをアプリに落としこむ際は、プロトタイピングの段階でエンジニアがアイデアを持ち帰って開発し、再度集まって動作を確認することが多いと思います。一見効率的なこの手法ですが、エンジニアの負担が大きくイメージとのかい離も発生し、モチベーションにも悪影響を与えかねません。これを改善する試みが「雑談開発」という、ユーザーやチームで雑談しながらリアルタイムに開発する手法です。アプリを...
-
2018/03/22ASP.NET Core 2.0からデータベースアクセスをしよう
Entity Frameworkは.NET環境で使用することのできるデータベースアクセスのフレームワークです。そのEntity Frameworkのクロスプラットーム版であるEntity Framework Coreの最新バージョンである2.0が、ASP.NET Core 2.0と同じタイミングでリリースされました。今回と次回にわたって、ASP.NET Core 2.0からデータベースアクセスするアプリケーションを作成していきます。その過程でEntity Framework Core 2.0の...
-
2018/02/2360分でLINEチャットボットアプリを作ろう～K5 Playgroundのテンプレートで本格アプリ開発
開発ツール「K5 Playground」を活用した、最新のWebアプリ開発を紹介する本連載。前回は、実際にK5 Playgroundを使ってGoogle Map×世界遺産／Instagramアプリを開発し、アイデア次第で多様なアプリを開発できることを理解しました。今回は「チャットボット」アプリを作成しましょう。チャットボットは、さまざまな分野で普及し、開発現場でも作業を効率化する「ChatOps」と呼ばれる概念が登場しています。人気の高いチャットボットアプリですが、一から開発するのは大変なので...
-
2018/02/16Google Map×世界遺産／Instagramアプリを作ろう～K5 Playgroundのテンプレートで本格アプリ開発
第2回では、K5 Playgroundの基本機能や使い方、どのようなアプリを作成できるかを見てきました。第3回、第4回では、実際にK5 Playgroundを使ってアプリ開発を体験してみましょう。第3回では、同じMapテンプレートを利用して作成する2種類のアプリを題材に、K5 Playgroundでは一見複雑なアプリも手軽に開発できること、および同じSPAであってもBFFのロジックを変えることで異なるアプリが作成できることを理解します。1つ目はMapテンプレートをそのまま使用し、Google ...
-
2018/02/09Webブラウザで「SPA＋BFF」アプリを30分で作成！ スピーディな開発の味方「K5 Playground」を使ってみよう
本連載ではクラウドネイティブなWebアプリを手軽に、短時間で作りたい方を対象に、Webアプリ開発の最新事情と最適なツールを紹介します。第1回では、フロントエンドの重要性やWebアプリのアーキテクチャの変遷を見てきました。第2回となる本記事では、前半でSPA＋BFFアプリを手軽に開発できる無償サービス「K5 Playground」の使い方を解説し、後半ではアプリ開発のレシピ集「K5 Showcase」を参考に、K5 Playgroundの活用ポイントを紹介します。
-
2018/01/31Railsアプリケーションにおけるフロントエンド環境のモダン化
freeeの価値基準の一つである、ユーザーにとって「本質的（マジ）で価値ある」ものを届けるということ。本連載ではそれに向かって、日々挑戦を続ける開発現場の事例をお伝えします。本記事では、freeeでのフロントエンド環境の改善への取り組みである、Ruby on Railsアプリケーションにおけるフロントエンド環境のモダン化について紹介します。Rails5.0以前の標準的なフロントエンドのビルド基盤であるSprocketsアセットパイプラインがもたらした問題について解説するとともに、その仕組みに依...
-
2018/01/23ASP.NET Core 2.0でSPAテンプレートを使おう【後編】
前回はASP.NET CoreとSPA（Single Page Application）フレームワークを組み合わせたアプリケーションでSSR（サーバサイドレンダリング）を行うための仕組みについてサーバ側の構成を中心に説明しました。今回はクライアント側の構成について説明し、実際にページを追加する手順についても紹介します。
-
2018/01/17トレンドは優れたUXとSPA・BFF！ 急成長企業の最新フロントエンド開発を体験しよう
FacebookやNetflixなど、著名なサービスを提供し成功を収めている企業は、最新のフロントエンド開発技術をいち早く取り入れ、優れたUX（User Experience）を実現しています。加えて昨今では、ビジネスニーズにすばやく対応できるクラウドネイティブな開発が求められます。技術が激しく移り変わるフロントエンド分野で、最先端の開発はどのように実現できるでしょうか。富士通のWebアプリ開発ツール「K5 Playground」の開発チームによる本連載では、Reactなどを使ったモダンなアー...
-
2018/01/15ASP.NET Core 2.0でSPAテンプレートを使おう【前編】
ASP.NET CoreではView層にSPA（Single Page Application）を実現するJavaScriptフレームワークを使い、Webアプリケーションを作成することもできます。さらに、SPAの問題点を解消するサーバサイドレンダリングの仕組みも提供しています。今回は最新バージョンのASP.NET Core 2.0を使って、SPA対応のアプリケーションの実装方法と仕組みを確認していきます。
-
2017/12/18Seleniumで挑む、SPAのE2Eテスト自動化
Webアプリケーションのフロントエンドを作る上で話題になりがちなSPA（Single Page Application）ですが、SPAのE2E（End-to-End）テストについて話題になることはあまりないと思います。筆者は、仕事でSPAのSeleniumテストを書いたことがあり、Seleniumで通常のWebアプリとあまり変わらずテストできる一方、気をつけるべき特徴もあると感じました。第6回の今回は、筆者の経験を元に、実際の業務でSPAのSeleniumテストを書く上での知見を紹介します。 ...
