「フロントエンド」に関する記事
-
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テストを書く上での知見を紹介します。 ...
-
2017/11/21ASP.NET Core 2.0でRazor Pagesアプリケーションを作ろう
2017年8月14日、「ASP.NET Core 2.0」が公開されました。今回は新たに登場した「Razor Pages」を使ったWebアプリケーションの作成を通してRazor Pagesの構成要素や基本的な実装方法、データバインディングの仕組みについて説明します。
-
2017/10/31「ASP.NET Core 2.0」の変更点とインストール方法を知ろう
2017年8月14日、「ASP.NET Core 2.0」が公開されました。また同時に実行基盤である「.NET Core 2.0」やO/Rマッパーである「Entity Framework Core 2.0」も公開されたことで、ASP.NET Coreもいよいよ実用レベルとなってきました。さらに、「Razor Pages」やSPAテンプレートの充実など、従来のASP.NETにないASP.NET Coreが先行する機能も登場しました。本連載ではそれらのASP.NET Core 2.0の魅力を新機能...
-
2017/10/25DockerでSelenium Gridを構築して複数マシンのブラウザ自動テストを行う
Webアプリケーションは複数のブラウザに対応させる必要がありますが、その際、多種多様なブラウザを一括で管理することができ、一つのテストスクリプトからクロスブラウザテスティングを行うことのできるSelenium Gridが便利です。第4回の今回はコンテナ管理ツールのDockerを利用してSelenium Gridを構築する方法を解説します。後半では、筆者が現在注目しているZaleniumを使ったSelenium Grid構築について紹介します。
-
2017/10/06Groovy製のSeleniumラッパーライブラリ「Geb」で、可読性の高いテストを書いてみよう
今回はSeleniumのラッパーライブラリであるGebの紹介です。Gebは前回のSelenideと同様、Seleniumのラッパーライブラリの一つです。JVM上で動作する動的言語のGroovyで記述されており、Groovyの機能を利用した簡潔な記述が可能です。本記事では、Gebのメリットを簡単に紹介し、サンプルコードを利用しながら、Gebの基本的な記述、最近の動向やベストプラクティスをご紹介していきたいと思います。
-
2017/09/05次々と移り変わる技術のトレンドをつかみ、エンジニアとデザイナーの橋渡し役を務める――フロントエンドエンジニアの面白さとやりがいとは？
Webのフロントエンド分野はトレンドの移り変わりが激しく、スペシャリスト、つまりフロントエンドエンジニアとして生きていくためには、目まぐるしく移り変わる技術をキャッチアップしていかねばならない。第一線で活躍するエンジニアはどのように技術を吸収しているのか。また、フロントエンドエンジニアの役割や醍醐味とは何か。株式会社ディー・エヌ・エーでフロントエンジニアとして活躍する遠藤直樹氏に話を聞いた。
-
2017/08/24Javaで簡単にUIテストを書けるSelenideを使おう～Selenideの概要とテストの保守性を上げるPage Objectパターンの紹介
WebDriverのJavaラッパーであるSelenideは、WebDriverを素で使うよりも容易にかつ記述量を抑えてテストを記述することができます。本記事では、前半でSelenideの概要と特徴について解説し、後半では、日本Seleniumユーザーコミュニティが提供するテスト用サイトを題材に、Selenideを使ったWebアプリケーションテストの書き方について解説します。
-
2017/07/25SeleniumとWebDriverの最新事情～標準化が進み、さらに強力なテストツールへ！ その影でSelenium IDEは……
Webブラウザの自動操作と言えばSelenium、というのが以前にもまして一般に定着してきたように感じられます。一方で、Seleniumの利用形態や実装方法、そもそもSeleniumと呼ばれるものが持っていた意味合いや責務などは、以前のものから徐々に発展し、変わりつつあります。本連載ではSeleniumやその中核技術であるWebDriverにまつわる最新事情をピックアップし、入門から一歩踏み込んだ応用的な部分を中心にご紹介していきます。第1回となります今回は、最新事情の概観です。
-
2017/06/21Google AMP No Standalone対応前に知っておくべきポイント（2017年5月版）
本連載はLINEのフロントエンドエンジニアのチームがWeb開発において注目・活用している技術を紹介します。今回はGoogleのAMP（Accelerated Mobile Pages）対応についてお話します。実際の業務で「No Standalone AMP」実装をおこなう前にエンジニアが認識しておきたい、各種ポイントをまとめた記事となっています。
-
2017/06/12Rails 5.1でReact.js連携アプリを構築してみよう
2017年4月27日に正式リリースされたRuby on Rails 5.1では、フロントエンド回りに大きな変更がありました。新たに採用されたYarnやwebpackなどを用いて、Rails上でReact.js連携アプリを構築する手順を紹介します。また、ReactベースのMaterial-UIを使ったサンプルも紹介します。
