フロントエンドに関する記事とニュース
-
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を使ったサンプルも紹介します。
-
2017/06/01マルチカラムも解説、Web用パーツをカスタマイズしたいときに役立つCSSスタイリング入門書
CodeZineの連載「CSSで作るWeb用パーツ」が本になりました。『デザインサンプルで学ぶCSSによる実践スタイリング入門』は、Webデザイナーやフロントエンドエンジニアでなくても「見出しやフォームをカスタマイズしたい」という方、特にHTMLとCSSは少し分かるけれど自分でコーディングできない方におすすめです。
-
2016/12/07JSフレームワークを使ったHTMLテンプレート利用のススメ
前回、Webシステムの運用現場では「HTMLの文言、デザインの修正がすぐにできない」「サーバサイドの技術がわからないとHTMLが修正できない」といった問題が生じていることを紹介しました。そして、それらの問題の原因の一つに、PHPでのSmartyやRubyのERBといったサーバサイドテンプレートがある、これらの問題はクライアントサイドでのHTMLテンプレートを使うと解決しやすくなることを説明しました。もっとも、現在フロントエンドエンジニアがチーム内にいない場合には、具体的にはどのような方法がとれ...
-
2016/10/18開局6か月／900万DL突破の「AbemaTV」、急成長するウェブサービスを支えるフロントエンドエンジニアの舞台裏
開局6か月弱で、900万ダウンロードを達成したインターネットテレビ局の「AbemaTV（アベマティーヴィー）」。ユーザー数の多さはもちろん、動画サービスの特性上、「長時間ユーザーと接する」「処理が重たい」「実用系と異なりエンターテイメント系では、ユーザーがすぐに他サービスに移行してしまう」といった課題を抱えるジャンルにおいて、UI/UXを受け持つフロントエンドの技術にかかる期待や責務は大きい。「Web Initiative Center」という専門部署を立ち上げ、サービスの品質改善を力強くドラ...
-
2016/09/16サーバサイドHTMLテンプレートからの脱却のススメ
PHPのSmartyやフレームワークが提供しているHTMLのViewエンジン（LaravelのBladeなど）、RubyのERBのようなHTMLテンプレートを使ったWebシステムでは、こんな問題に遭遇します。「HTMLのデザインや文言をちょっと変えるくらいすぐにできないものか」「デザインやUIをリッチにしたいが、PHPやRubyなどサーバ側の言語が分からないから直せない」。また、このような課題から、想定より時間がかかり、スケジュールが遅れたり、作業する担当者には、どのようなスキルをもった人（エ...
-
2016/03/09ASP.NET 5に対応したComponentOne Studio for ASP.NET MVCを試してみよう
本連載では、業務アプリケーション開発に適したクロスプラットフォーム対応のUIライブラリ「ComponentOne Studio」について、具体的なサンプルを交えながら、その特長を紹介していきます。ComponentOne Studioは業務アプリケーションを開発するエンジニアをサポートするべく、さまざまな対応を行っています。その中でも現在開発中のASP.NET 5にも早い段階からサポートしており、定期的なアップデートを通じて我々の手元に届けられます。前回では、ComponentOne Stud...
-
2015/10/21ComponentOne Studio for ASP.NET MVCにおけるWeb API連携
本連載では、業務アプリケーション開発に適したクロスプラットフォーム対応のUIライブラリ「ComponentOne Studio」について、具体的なサンプルを交えながら、その特長を紹介していきます。ComponentOne Studioは先日2015J v2がリリースされ、Windows10やVisual Studio 2015への対応が行われました。第3回は2015J v2の簡単な紹介と、注目機能であるWeb APIを中心にサンプルを交えて紹介します。
-
2015/08/24キャリアアップには得意分野以外の知識も必要？ 『絵で見てわかるWebアプリ開発の仕組み』編集者に訊く
翔泳社が8月17日（月）に刊行した『絵で見てわかるWebアプリ開発の仕組み』は、Webアプリ開発の分業化が進み、自分の関わらない作業が理解できなくなっている方に贈る、Webアプリ開発の全体像を把握するための解説書です。企画を立てたりサービス全体を統括したりする一つ上の開発者になるために不可欠な、他領域の知識を身につけておきましょう！
-
2015/08/11ComponentOne Studio for ASP.NET Web Formsで使えるコンポーネント（イベントカレンダー／グリッドビュー編）
本連載では、業務アプリケーション開発に適したクロスプラットフォーム対応のUIライブラリ「ComponentOne Studio」について、具体的なサンプルを交えながら、その特長を紹介していきます。第2回は、前回に続いて、2015J v1で大きく機能追加されたイベントカレンダー、パフォーマンス改善されたグリッドビュー、そしてマップなどのコントロールについて紹介します。
-
2015/07/14ComponentOne Studio for ASP.NET Web Formsで使えるコンポーネント（入力補助／チャート編）
本連載では、業務アプリケーション開発に適したクロスプラットフォーム対応のUIライブラリ「ComponentOne Studio」について、具体的なサンプルを交えながら、その特長を紹介していきます。第1回は、Webアプリケーション向けコンポーネントの概要と、入力およびチャート関連コンポーネントについて解説します。
