こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向

この記事は エムスリー Advent Calendar 2017 の24日目の記事です。 この記事では、プロダクトマネジメントと新規サービス開発についてお話します。 1. はじめに エムスリー株式会社ではエンジニアリング強化の一環として12/1からCTO+VPoE（Vice President of Engineering）制度に移行し、私、@yamamutekiが初代VPoEを務めることになりました。最近は採用活動などに力を入れていますが、本業はプロダクトマネージャーで、新規サービス開発や既存サービスのテコ入れを担当しています。今回はプロダクトマネジメントと新規サービス開発について簡単にお話できればと思います。本文では、最初に、プロダクトマネジメントと新規サービス開発の関係についてお話し、次に、プロダクトマネジメントを活用した新規サービスの作り方についてお話します。最後に、プロダクトマネ

ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar ヘッドレスChromeでシンプルに自動テストを行う Google Chromeのバージョン59から標準搭載された、ヘッドレスモード（GUIがないモード）。コマンドラインからヘッドレスブラウザを立ち上げることができ、スクリーンショットの撮影を行ったりDOMを出力したりすることができます。自動化の可能性に満ち溢れた機能です。 ヘッドレスChromeの導入については、次の公式ドキュメントが詳しいです。 ヘッドレス Chrome ことはじめ  |  Web  |  Google Developers ドキュメントを読んでいただくと分かると思いますが、様々なことが可能なため指示の記述が少し冗長な面があります。 そこでヘッドレスChromeを用いた自動化処理

こんにちは、 UXデザイナーの @yuh_iw です。 この記事は NTTコミュニケーションズ Advent Calendar 2017 の23日目です。 すべては最高の体験のために 弊社では、ようやく社内にUXデザインという言葉が浸透し始めていますが、 実態はUIと共に語られることが多いです。（実際は違うよ） とはいえ今回はUIを作るために私達がいつも行っていることについて記載します。 どうやってUIを作っていくのがよいか とにもかくにも、ユーザーに対する検証と学習をくり返すことです。 最高のUI=カッコイイUIではありません。アーティスティックなUIでもありません。 UIにはユーザーがいるので、ユーザーが使いやすいと思わなければならないのです。 そのために、使ってくれそうな人に、検証していく必要があります。 検証するためにはいくつか方法がありますが、 本稿ではUIプロトタイピングを行う

まさあき(@masaaakikunsan)です。 最近よく、「Storybookを導入しよう」「Storybookがいい」と言う話は聞きますが、意外となぜ必要なのか、どう使うのか、という記事がみつからなかったので、基本的な使い方をサンプルと共に紹介します。 TL;DR StorybookでUIコンポーネントのカタログを作ることができる カタログのおかげでデザイナーと認識の齟齬が生まれなくなる アドオンを追加するとStorybookがかなり便利アイテムになる Storybookとは ざっくり言うとコンポーネントのカタログです。 コンポーネントライブラリの参照ができ、各コンポーネントの様々な状態の表示などができるものとなります。 また、アプリ外で実行されるため、UIコンポーネントを単独で開発でき、コンポネの再利用、テストの容易性、開発スピードを向上させることができるのが魅力です。

この記事はVue.js アドベントカレンダー #3 24日目の記事です。 みなさん今日はクリスマスイブですね。今年のイブは日曜日ということもあり、一般的には会社は休みですので、恋人と過ごす人、友人と過ごす人、家族と過ごす人と様々ではないでしょうか。私も夜にはホームパーティを控えていたりします。 そんな本日のアドベントカレンダーですが、クリスマスとは全く関係なく、真面目にVuexアプリケーションにおけるv-modelとの付き合い方について考えたいと思います。 VueとVuex間での責務の衝突とジレンマ JavaScriptでそれなりに凝ったWebアプリケーションを開発する時、特にSPAを開発する時は、Fluxパターンもしくはその派生ライブラリを扱うことが非常に多いかと思います。 Vue.jsにおいても、本格的な状態管理についてはVue.js謹製ライブラリであるVuexを利用することができます

フリーランスエンジニア→法人化した人の技術ブログ。フリーランス事情や会社の作り方、経営などについても徒然なるままに書いていきます。主な使用言語はRuby、JavaScript。

これはG*Advent callender 2017の24日の記事です。 昨日23日の記事は mshimomuさん、明日25日の記事は未定です。 完全に一年ぶりの記事です。みなさん、いかがお過しでしたでしょうか。今年Qiitaとかに書いた記事を別にまとめましたが、わたしはReactを良く書いてた一年でした。 本記事のテーマは以下の2つです。 GrailsのWeb APIサーバのCRUDビューをいかに簡単に作るか RESTfulサーバ/任意のサーバに対する強力なダッシュボード・管理コンソール開発用ReactコンポーネントライブラリであるAdmin-On-Restの紹介、使い方 もくじ もくじ 去年までのあらすじと今年の方針 Admin-On-Restとは何か Admin-On-Restのデモ動画 Admin-On-Restの特記すべき点 REST Clientによるデータソースの抽象化 Ad

この記事はトレタ Advent Calendar 2017の19日目の記事です。 HiGH&LOWにハマってから着実にLDH沼に沈みつつある、デザイナーのとりみずの（torimizuno）です。 ちなみにLDHは「💖Love 🌈Dream ✨Happiness」の略称とのことです。 これだけでも覚えて頂けると嬉しいです。 はじめに今年からトレタに入社し、もうすぐ1年になります。 昨年まで受託の会社でデザイナーをしていた私が、事業会社でBtoBサービスの改善に関わるようになりました。 その上で意識が変わった点や、考えていることを振り返りにまとめていきます。 ①ユーザーの性質を理解するトレタは対飲食店のサービスを提供しています。 飲食店の場合、常に働き手が足りなかったり、人事移動もあり、トレタの予約台帳アプリを操作する人が一刻一刻変わります。 そこで大事なのが、”担当者が変わっても理解でき

まずはじめに、僕はAIスケジュール管理アプリを作成しています。全体の設計からAIのアルゴリズム、実装、UIデザインまで全て1人でやっています。一応ある程度の知識はあるつもりです。 その僕が、NewsPicksとかのビジネス系の偉い人たちのAIに対するコメントを読んでいて、「少し捉え方、使い方が間違っているな。期待値と実際のサービスのギャップかな？」とか色々と考えたことをここで書きます。 エンジニア以外の人向けに書きたいと思いますが、実際にAIをサービスに組み込む開発者の方にも参考になればと思います。 *数式やアルゴリズムがどうこうとか書きませんが、サービスの設計やデザインに関しては書きます。 まず、大雑把にAIがサービスに組み込まれる場合にどのような流れになるか説明します。 もちろん一概には言えませんが、大雑把にです。 ⒈ 機能（タスク）を特定する ⒉ 機能（タスク）の過去と現在のデータを