こんにちは、株式会社POLでエンジニアをしているミズノです。以前弊社の雑談イベントでフロントエンド の取り組みについて話したのですが、そこでお話しした内容を今回は紹介したいと思います。 元々POLのフロントエンド は、よく見るReactのアーキテクチャでした。 React ＋ Reduxプロダクトも徐々に大きくなり、開発者も増えるなかで色々な問題が見えてきました。特に以下のような問題が多く見受けられました。 1.複数人で開発する場合ルールがないと迷いが発生する 2.コード自体の結合度が強く、テストがしづらい 3.修正するときに影響範囲の調査が大変こんな感じで、余計なところで頭悩ませることが多いなと感じていました。そこで迷わず課題に取り組める、そしてプロダクがさらに大きくなった場合にも耐えれる構造を検討し、レイヤードアーキテクチャを試すことにしました。 導入にあたっては、新規のページから導入
Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
お疲れさまです！FE（フロントエンド）チームリーダー 兼 JIRA職人 兼 残業警察の辻です。 チームでjQuery→React/TypeScriptのリプレースプロジェクトを進めています。技術的なチャレンジはもちろん、大規模かつ長期プロジェクトゆえの不安と日々戦っています。 ・このプロジェクトはちゃんと進んでるの？このまま進めていいの？ ・成果が出るまでに時間がかかり、チーム外からは何もやってないように見えてない？ ・残業すれば初期計画スケジュールに間に合うけど、どれくらい頑張ったらいいの？ ・初めてのパターンだけど書き方これであってる？今後もこれに合わせる？ ・リプレース中にもどんどん技術が変わっていってキャッチアップが大変 ・チーム外から突然の依頼があったけど、優先度どうしよう...これらの不安と戦うため、いつでもプロジェクトの状態がわかる状態、いつでもチームに相談できる状態、個人依
まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。 相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏 1.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変わってくるように思います。 そもそもコンポーネントという概念が開発にほぼ必要ない普通のWebサイトなどであれば、多少実装しにくいと思われるかもしれませんが、あまりデザイナー側が気にする事ではないかなとも思います。 ただ、今回はReact.jsやVue.jsなどのフレームワークを使ったWebアプリケーション/サービス、また
フロント学習の最高の教材集 - Qiita
はじめに 今回はフロント学習で重宝できる教材をまとめました。 軽く自己紹介として、自分は新卒でフロントエンジニアとして入社し2022年で2年目になります。 実際に実務を通す中で「この教材のおかげで実装がスムーズにできた」「この教材をやってたおかげで理解ができた」といったような場面が2年の間で多々ありました。 今回紹介する教材は自分自身が実際に使ってよかったものかつ、そのほとんどが無料で学べるor低価格の教材になっています。 「フロントエンドを網羅的に学べかつ実務の基礎作り」という目的で教材を紹介します。 この記事の主な対象者 フロントエンドの学習をこれからしていきたい人 何を学べばよいのかがわからない人 HTMLとCSSはある程度かける人 この記事の目標 フロント学習の指針が立てられる 実務現場でも活用できるスキルを学べる教材を知れる JavaScript ドットインストールのJavaSc
メンタルモデルから紐解く オブジェクト指向的コンポーネント設計 / Mental-Model Component Design
コンポーネント指向の設計にメンタルモデルやドメインモデルのような概念を加える事で、コンポーネントに意味を持たせ、設計や評価を行いやすくする方法をまとめました。 *OOUX / Atomic Design / Domain-Driven Design（ドメイン駆動設計） などから得た知見を集約しています。 さらに詳しい内容はこちらの記事にもまとめています。 UIの設計・評価は、Atomic DesignやOOUXのようなコンポーネント指向で https://medium.com/@tyshgc/ui-component-evaluate-and-design-143917c777bd
Transform a user interface concept into code is a task that can be resolved of different ways. The problem is how you organize your code that make scalable, easy to change and easy to maintain. Now all is more easy in the browser. New techonologies in the client side are appearing and we can create things more easy. So we go to analyze the top libraries and top to manipulate the DOM for creating m
エンジニアとして大切なことは全てインターンで学んだ 〜本日でスマートキャンプを退職します〜 - SMARTCAMP Engineer Blog
こんにちは、スマートキャンプでエンジニアインターンをしている中村ノアです。 ついに今日が最終出社日となりました。 インターンを始めたのは去年の10月からですが、時間の流れの速さに戸惑うばかりです。 インターン中は新規サービスの開発を担当していました。 チームでのプロダクト開発で得られたスキル・経験を改めて振り返ってみようと思います。 あっという間でした...！！！ 自分自身について 成長したスキル Vue.jsを使ったフロントエンド開発スキル Ruby on Rails を使ったサーバサイド開発スキル 共通認識、チーム開発のための行動力 見積もりの勘、どれだけ正確に見積もりを出せるか 開発者のバイアスの自覚、答えはユーザーが持っているということ プロダクトの市場での立ち位置、競合との差別化への意識 ソフトウェア開発と不確実性、持続可能な開発への意識 まとめ 自分自身について まずはざっくり
4月からForSchool事業部の石上です。以前は、主にStudyplusのウェブ版を担当していました。現在ForSchool事業部では、Studyplus for Schoolというプロダクトをエンジニア2人で開発しています。2人ともサーバーサイドとフロントエンドの両方を担当しています。 今回、Studyplus for Schoolのフロントエンド周りに必要なツールを入れるなどして、フロントエンドのコードをふつうに書いていくための下準備をしました。 背景 Studyplus for SchoolはRailsで作られたアプリケーションです。極力Railsのレールに乗るように作られています。 フロントエンドにはWebpacker、Babel、一部にReactをすでに利用していました。 多くの部分にはRailsのビューと、自前のベースJSコンポーネントを継承したコンポーネントが設置されていま
[ニュースメディアWWD JAPAN.comを支えるSPA+Aurora+サーバーレス, サーバーレスの現実と夢と今 にも同様のトピックをまとめました] WordPress + MovableType で運用されていた WWD JAPAN.com というウェブメディアをサーバーレスに置き換えました。 2016 年 1 月からモックアップの開発を始めて、9 月のローンチまでに大部分の古典的リソースを捨て、トラフィックの影響を受けないサーバーレスなアーキテクチャへと刷新できました。 TL;DR AWS を利用したサーバーレスアーキテクチャは以下のような構成になりました。 リクエストを受け付けるのは CloudFront フロントエンドは S3 で HTML/JS/CSS バックエンドは Lambda で Node.js 管理画面専用に EC2 で WordPress( PHP ) 旧構成と新構
Atomic Design を導入してみた話 - Money Forward Developers Blog
こんにちは。 iOSエンジニアの廣瀬です。 以前から感じていた課題に、デザインデータ・UIコンポーネントの管理 がありました。 その解決策として Atomic Design の考え方を取り入れてみました。 今日は、"（しら）ずにお金が（たま）る"自動貯金アプリ『しらたま』（ https://sirata.ma/ ）の開発時に実施した Atomic Designの導入 について紹介します。 デザインデータ・UIコンポーネントの管理 ここでいう デザインデータ・UIコンポーネント とはデザイナーが使っているツール(Sketch)や、フロントエンドとなるiOSアプリのコードレベル(Swift)の話です。 具体的に管理がうまくいっていない状態とは下記のような状態と言えます。 カラーコードやフォント名がコミュニケーションを取るときに飛び交う アプリ全体で 色 や フォント の使い方にコンセプトが無い
こんにちは。UI/UXデザイナーの kotani（こにたん）です。 少し前まで担当していた SALON TOOL （ 以下、サロンツール ）というアプリーケーションのデザインシステムを作った時の話を書きます。 今回はデザインシステムの中でも特に、エンジニアと協力した部分＝コンポーネントの切り分け単位と命名について一緒に試行錯誤したお話です。 サロンツールとはまず、サロンツールがそもそもどんなものなのかという話です。 サロンツールとは、個人集客できるミニモを、店舗で一括管理をしたいサロン様のニーズに応えた無料で使える予約管理システムです。サロンツールは、PCがあればサロンや自宅等どこからでも利用することができます。 画像：https://minimodel.jp/info/salon テキスト：https://minimodel.jp/info/faq#salonサロンツールチームでデザイン
トリバゴのデザイナーたちは、会社のブランディングについて共通の認識を持っていますが、急成長を遂げるトリバゴでは、一貫性に関する問題が深刻化しています。2016年現在、当社には25人以上のデザイナーがいます。私たちには、開発に取り組んでいる製品に適用できる、当社の全体的なブランドを忠実に守るルールが必要です。2015年に、Daniel Riemerとanki delfmannが、この大きな問題に立ち向かうために、Brad Frost氏によるAtomic Designのアイデアを基にパターン・ラボを作り始めました。 2015年の第三四半期には、Christoph ReinartzのチームがIRONMANプロジェクトを開始しました。トリバゴのコアとなるウェブサイト全体の、CSSリファクタリングです。その時、すべてのアセット、色、フォントが、新しく堅実な土台に合うよう変更されました。最高のブランデ
こんにちは、@y_temp4 です。 自分は ALIS という会社で主にフロントエンドまわりの実装を Nuxt.js を用いて行ってきたのですが、今回はそこで得た知見について共有しようと思います👍 内容としては以前 JSer.info 400回記念イベント にて発表した Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) を元に、そこでは話しきれなかった点や、新たに得た知見などについてご紹介します。 Nuxt を選定した理由 実際の開発の話に入る前に、Nuxt の選定理由について触れておきます。 ライブラリ・フレームワークを選定するときにはさまざまな観点がありますが、ALIS が Nuxt を選定した理由は主に以下の2つです。 開発速度を重視したかった 技術選定をする際に候補として React / Next なども挙げられましたが、Vue / Nuxt を
Atomic Designとの
上手な付き合い方 / better-relationship-between-atomic-design - Speaker Deck
Atomic Designとの 上手な付き合い方 / better-relationship-between-atomic-design
デザインシステムについての知見が溜まってきたので、The 12 Factor App のパロディで The 12 Factor Design System というものを考えてみました。 元ネタのThe 12 Factor AppはモダンなWebアプリケーションとしてあるべき姿を12のベストプラクティスにまとめた方法論です。 それを真似て、自身の経験からデザインシステムとしてあるべき姿を12個にまとめてみました。 無理やりなところやコンテキストによるところがあると思いますが、半分ネタ半分本気で作りました。 文章の構成などもあえて真似て書いています。 何かの参考になればと思います。 はじめに デザインシステムは次のようなWebサービスやアプリを作り上げるための方法論です。 宣言的なフォーマットを使い、プロジェクトに新しく加わったメンバーが要する時間とコストを最小化する。 UIパーツの依存関係を
書籍 - やわらかVue.js
2018年に入って、Vue.jsの書籍が日本語で出始めています。 技術書典での同人誌も含めると、もう少し多くなると思います。 ※初心者におすすめ 基礎から学ぶ Vue.js 2018/5/29 C&R研究所 mio (著) 通称猫本。可愛らしいイラストが特徴的 vue-router, vuexについても説明あり サポートページが非常に充実している 輪読会が行われているそうです 猫本以前 ※網羅的でおすすめ Vue.js入門 基礎から実践アプリケーション開発まで 技術評論社 (2018/9/22) 川口 和也 (著), 手島 拓也 (著), 野田 陽平 (著), 喜多 啓介 (著), 片山 真也 (著) Vue.jsコアメンバーのkazupon, katashinをはじめ重厚な執筆陣 jQueryからの移行や、大規模開発時の方針など、実践的な内容が豊富 Vue.jsの仕組みやSSR、Atom
書籍一覧 - 達人出版会
ソフトウェア工学の基礎 30 吉田 則裕, 槇原 絵里奈 近代科学社 3,960円 本書はFOSE主催ワークショップの予稿集（2023年度）。ソフトウェア工学研究の活性化に寄与する情報がまとめられています。 シミュレーションで見るマイクロ波化学 カーボンニュートラルを実現するために 藤井 知, 和田 雄二 近代科学社 2,970円 本書は、化学あるいはほかの分野の開発研究社の方々が、ご自分の化学反応系のマイクロ波技術を導入したいとお考えになったときに、まずはその基本を理解するためにお読みいただきたいと考えて執筆されました。本書がマイクロ波化学を導入するための入門書となれば幸いです。 ゆる～いExcelスキルで業務の自動化をしよう１ シンプルな集計表 にゃーこむ インプレス NextPublishing 1,980円 Microsoft Excelは事務処理に欠かせないソフトウエアです。その
"use client" は Server Component と Client Component の境界につけよう
🌼 はじめに 最近 Next.js の app Router で開発してて、不思議なワーニングに出会いました。 Props must be serializable for components in the "use client" entry file, "handleClick" is invalid. これがなんなのかがすごく気になり、"use client"について色々調べたので共有したいと思います。 1. "use client" は何なのか "use client"は Server Component と Client Component の境界の宣言です。公式ドキュメントにもそう書いてました。 The "use client" directive is a convention to declare a boundary between a Server and Clie
Photo by Matthew Guay僕は2016/8/1にザッパラスに転職してきたのですが、それから毎日欠かさず最低１つ、社内のデザイナー用Slackチャンネルに気になったデザイン系の記事などを共有してきました。 目的としては、 注目されている情報の摂取の仕方解釈の仕方それらを通じたデザイナーのあり方の3つを社内に共有するためで、単にURLをコピペするだけではなく、毎回↓のように何かしらコメントをつけていて、長いものはそれ自体が記事みたいになってしまうこともあります。 ある日の共有※「「デザインできる組織」をつくるためのデザイン情報共有の取り組み」として別記事に共有の目的や方法をまとめてあります。 ということで、2016年を振り返る意味でそのリストを公開しようと思います。 実際に紹介する際は、記事の内容と対話するようなかたちで、補足・肯定・否定など、様々な意図を込め、英語の記事は部分
はじめに みなさま、いかがお過ごしでしょうか。Figma 流行ってきてますね〜。 他にも Framer X や STUDIO 、そして Figma の上位互換かもしれない Phase が盛り上がりを見せています。 導入記事も増えてきているので、具体的な 作成フロー を紹介したいと思います。 作成済みのファイルは探せばいっぱいあるので、Atomic Design ぽいプロセスで、よく使う UI パーツを作るところまでハンズオン形式で書いてみます。 ただし、原理主義的なプロセスや理論 ではなく、誰でも順を追って Figma を使える状態を目指します。 ストラテジストとエンジニア、そしてデザイナの作業が分断されている時点でイノベーティブではありません。 この三者が統合的にデザインできること、すなわち ワークフローそのものを最適化することが目標 です。 Figma と Atomic Design
NFTマーケットプレイス「ユニマ」の技術スタックを紹介します - Mobile Factory Tech Blog
こんにちは。ブロックチェーンチームのソフトウェアエンジニアの id:odan3240 です。 ブロックチェーンチームでは NFT を販売するためのUniqysマーケットプレイス(以下、ユニマ)と、その NFT を販売するための管理画面(以下、管理画面)を開発しています。ユニマはブロックチェーン上の NFT を日本円で売買可能なマーケットプレイスです。 ユニマの開発はブロックチェーンに関するサービスなので、ブロックチェーンに関する技術をゴリゴリに使って開発しているのでは？と考える方がいるかもしれません。しかし実際はそうではなく Web アプリケーションに関する開発は普通の技術スタックで開発しています。もちろん実装するロジックによってはブロックチェーンに関する知識が必要となる場合もありますが、マネージドサービスやフレームワークやツールを活用してコア機能の実装に集中できるように技術スタックを選択
Design Guidelines & Atomic Design ー 社内勉強会を開催しました。 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。デザイナーの上田です。来週はいよいよDesign Systems Virtual Summit 2018が始まりますね。今から楽しみです。 さて、皆さんの会社のデザイン組織には、デザインのカラーやタイポグラフィー、ナビゲーションや情報設計などの共通の方針はありますか？ クラウドワークスでは5年ほど前にTwitter BootstrapをベースにしたUIライブラリを作って運用を始めました。 しかし、私を含むデザイナーの知見不足や組織編成など、様々な事情が重なりプロダクト開発の中で運用されなくなってしまい、サービス全体で部分的に最適化されたスタイルやコンポーネントが乱立するプロダクトになってきてしまっています。 「絶妙なバランスでプロダクトが成り立っている」「ガイドラインなんて無くてもなんとかなってるじゃん！」という視点もある一方で、プロダクトやチームの課題として、ちぐはぐなデザイ
trkwとmiyaokaとmasaakikunsanとnakasujiの4人で、Atomic Design、GraphQL、Tailwind CSS、チームビルディング、成長などについて話しました。 trkwとmiyaokaの2人で、技術書典5、Netlify、originless、STUDIOなどについて話しました。
How did I catch up at Quipper - スタディサプリ Product Team Blog
こんにちは、今年の 7 月に join した Web Developer の @yoshimaru46 です。 今回は、stateとpropsの違いがわからないくらいには React 初心者だった私が2ヶ月前に SPA のプロジェクトに join してキャッチアップする中で感じたことについてお話させて頂きます。 ちなみに言語歴はこんな感じです Java 2 年 Ruby, Rails 1.5 年 JavaScript 数ヶ月 先日の記事 で @ujihisa さんが「僕は Vim 暦 20 年くらいで、まだ初心者です。」と言っていたので、 まだまだ先は果てしないなぁと思います。 どんなプロジェクトだったか 参加したプロジェクトは既存のウェブサイトをフルリニューアルするプロジェクトでした。 規模が大きいうえにリニューアルで、相対的に新しい技術(The App Shell Model, The
こんにちは！はのめぐみです。キッチハイクというサービスでデザイナーをしています。 2019年9月19日に開催された React.js meetup #9 にて、デザインシステムをテーマに登壇しました。トークタイムとパネルディスカッションの2部構成で、私はイベント前半部分のトークを担当させていただきました。この記事は、そのフォローアップを含んだ紹介記事です。 スライド資料は全編公開しています 登壇テーマはデザインシステムを持たない組織の取り組み今回の React.js meetup では「デザインシステム」がイベントテーマでした。デザインシステムを持たない組織として、ふたつのテーマを軸にお話しました。 デザインシステムとは一般的には、ユーザーに一貫した体験を届けるために必要なものをすべて含んだ存在と言われています。 デザインシステムを支えるものは様々です。「原則」「形状」「実装」の3つに分類
2018年9月22日(土)にJSer.info 400回記念イベントを開催しました。 無事JSer.info 400回記念イベントを行うことができました！ JSer.info 400回記念イベント - connpass 2018年9月22日(土)に JSer.info 400回目記念イベントを開催します - JSer.info JSer.info 400回記念イベント - Togetter 今回は「憶測しないで議論しよう」というテーマで開催しました。 このテーマについてはJSer.info 400回記念イベントというスライドでも話をしていますが、参加者全員が何か得られるものがあればいいなというPositive Sumの考え方で設定しました。 参加して何か得られたものがあれば幸いです。 本日はご参加いただきありがとうございました！ Special Thanks 会場: @koba04 サイボ
An Introduction To Object Oriented CSS (OOCSS) — Smashing Magazine
Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site. From a Web developer’s perspective, however, some may argue that speed is king. More and more, I’m starting to favour that stance. In recent years many experi
Yelp Design — Cookbook
Cookbook is Yelp's design system for digital experiences, and follows Brad Frost's Atomic Design methodology. Our system carries through with the food analogy by using ingredients for our styles, recipes for our components, and entrees for complex components.
AbemaTVのデザイナーによるAtomic Designの実践を、導入編、運用編に分けて紹介します。 導入編では、スタイルガイドの作成や、エンジニアさんとのやりとりでどのように粒度を決めたか。運用編ではSketchのシンボル機能を使って、実装のコンポーネント指向に近いSketchファイルの作成方法を紹介します。
既存サービスのデザイン課題発見のためにやっておきたい「Interface Inventory」 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 広告フロントエンド開発部の春野です。今日はデザイナーの立場から、デザインスキルに自信のないエンジニアの方でも取り組むことができる、UIの課題発見方法をテーマに記事を書いていきたいと思います。 PDCAサイクルを回すことで生じる課題 Webサービスやアプリケーションを制作するにあたって、多くのプロダクトはユーザーのニーズに応えるために画面の追加や修正を行い、PDCAサイクルを回していると思います。しかしながら、PDCAサイクルを回していくことにより、デザインの一貫性が失われる可能性があります。ひとつの機能や画面の追加・修正の要件を満たすことを目的とするあまり、ひとつひとつの成果物が良いものであっても、サービス全体を見渡したときにデザ
[スライド付き] AbemaTVの事例から学ぶ、Atomic Designという名のデザイン整理術 | CyberAgent Developers Blog
こんにちは、AID（Ameba innovation Designers）という社内デザインチームに所属している早坂です。突然ですが、みなさんはAtomic Designをちゃんと理解していますか？ 今回はAtomic Designの概念から学ぼうということで、『AbemaTV』エンジニアの五藤さんをお呼びして講義をしていただきました。今回はその内容を共有したいと思います。 ▼当日使用していたスライドはこちら▼ Atomic Designとは「変更しやすいデザイン整理術」 講義の中で、Atomic Designがなぜ必要なのか、『AbemaTV』の具体例を元にお話ししてくださいました。 ・デザインの引き継ぎのタイミングで引き継ぎ先のデザイナーは困っていないか ・デザインの負債を抱えていないか この視点で現状のデザイン開発に問題がないかチェックします。お話を聞くとよくある話ばかりで耳が痛い。
![[スライド付き] AbemaTVの事例から学ぶ、Atomic Designという名のデザイン整理術 | CyberAgent Developers Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6706e0ce72f5676007cfed5b0a29fc4d5ad4382/height=288;version=1;width=512/https%3A%2F%2Fdevelopers.cyberagent.co.jp%2Fblog%2Fwp-content%2Fuploads%2F2018%2F07%2Fatomicdesign_sns.png)
ベストプラクティスを見つけるためのReact Nativeアプリ ソースコードリーディング - KitchHike Tech Blog
良いアプリを作るために、良いコードを読む。 CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0からReact Nativeでアプリ開発を始めました。この記事では、React Nativeアプリ開発のベストプラクティスを見つけるためのソースコード探索手法と、コードリーディングのポイントを紹介します。 良いアプリを作るために、良いコードを読む。 React Nativeアプリのソースコードの探し方 ReactNativeNewsのShowcase, React Native Appsから探す F8 2017 PxView React Docs ( React公式ドキュメント ) から探す react-nativeリポジトリのRNTesterを読む ライブラリのサンプルアプリのコードを読む コードリーディングのポイント ディレクトリ構成 使用している
「Atomic Design」と「Design Systems」〜デザイナーとエンジニアが二人三脚で開発する手法〜 - DMM inside
｜DMM inside
2018.11.3に行われたVue Fes Japanの資料をまとめました。 Vue Fes Japan公式サイト オープニングムービー Vue Fes Japanオープニング キーノート 「Vue 3.0 Updates (Evan You)」 スライド セッション動画 ランチセッション Progressive Repro Frontend (スライド) LINE株式会社 LunchスポンサーLT (スライド) 通常セッション Next-level Vue Animations (Sarah Drasner) スライド セッション動画 Vue.jsとWeb Componentsのこれから (Takanori Oki) スライド セッション動画 Vue Designer: デザイナーと実装の統合 (katashin) スライド セッション動画 Unit testing a Vuex sto
2019年1月31日、React.js meetupが主催するイベント、「React.js meetup #6」が開催されました。ReactにまつわるさまざまなテーマでLTを行う本イベント。様々な知見を持ったエンジニアたちが、自身の経験などをもとに発表を行います。プレゼンテーション「読みやすいコードの書き方のススメ」に登壇したのは、わたなべゆう氏。講演資料はこちら 読みやすいコードの書き方のススメ わたなべゆう氏：こんばんは。わたなべゆうと言います。今日は「読みやすいコードの書き方のススメ」ということで、読みやすいかどうかを気をつけていこうという内容のLTとなっております。 （スライドを指して）こちらが概要で、あとで見ていただければと思います。ちなみに先ほどTwitterのハッシュタグと、connpassの管理ページにもスライドのURLを貼っておいたので、もしよろしければあわせてご覧にな
私たちは最近、デジタルアセットとワークフローを管理し、スピードをアップさせ、製品提供に関する一貫性を維持するためにAtomic Designの考えを導入しました。 この記事では、アトミックな考え方の概略をお伝えし、私たちがどのように適用してきたかをシェアしたいと思います。BEMとGitの力を、少し借りました。 Atomic Designとは？ *すでにこの概念に馴染みがある人は、このパートを飛ばしたくなるでしょう。コーヒーでもいれて、” アトミックなUIキットを作る”から読んでください。* Atomic Designとは、 デザインシステム の構築に用いられてきた方法論です。この概念は 2013年に、Brad Frostによって生み出されました 。Bradはプロセスを表現するために化学とのアナロジーを用いていて、それによると、デザインは単純で再利用可能なパターンに分解できるというのです。
はじめにこの記事はGoodpatch UI Design Advent Calendar 21日目の記事です。 僕が担当しているプロジェクトではWebアプリケーションを開発しているのですが、その開発の中で発生したコンポーネントにまつわる問題とそれを改善するための取り組みについてご紹介します。なお、この記事の中で言う"コンポーネント"はUIを構築するための"UIコンポーネント"を指すのだと思ってください。 デザインと実装の分業によるコンポーネント設計思想のズレ開発初期はデザイナー1人とエンジニア2人の体制でデザイナーがデザインファイルを作成して、エンジニアが実装を担当していました。初期段階では、厳密にAtomic Designなどの設計手法は用いていませんでした。 その頃は人数も少なかったので、コミュニケーションも取りやすくスムーズに進められていたのですが、その後、デザイナーが3人、エンジニ
背景筆者が個人的に仕事を受けはじめた会社のフロントエンドのプロジェクトを立ち上げることになりました。 そこでせっかく新しく作る機会があるならコンポーネントの分割の仕方（コンポーネント設計）を明確に定義したいと思いました。 そもそもなんで分け方を定義したいとなったかというと、後からメンバーがプロジェクトに入ってきたときに、スムーズにプロジェクトに入ってもらうためです。 今まで作ってきたプロジェクトでのコンポーネントの分け方は、「2,3回使う場合はコンポーネントに分ける」 「長くなって見通しが悪いコンポーネントは分ける」など曖昧なところもありますがシンプルなものでした。 ただこの分け方をするとコンポーネント自体が大きくなりがちでした。 今のところプロジェクトに関わる人数も少なく、個々のメンバーのレベルも高いため運用できていますが、人が増えた場合や他のメンバーとなった場合は「苦しいのではないか？
Storybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組み - ZOZO TECH BLOG
こんにちは、FAANS部の田中です。普段は、WebのフロントエンドエンジニアとしてFAANSの開発を行なっています。 FAANSの由来は「Fashion Advisors are Neighbors」で、「ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツール」です。現在正式リリースに向けて、WEARと連携したコーディネート投稿機能やその成果を確認できる機能など開発中です。プラットフォームとしてはWeb、iOS、Androidが存在し、今回取り上げるWebはショップ店長をはじめとした管理者向けツールという立ち位置です。 本記事では、FAANSのWebにおけるStorybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組みを紹介します。 はじめに FAANSのWebはReact、TypeScriptで構成されています。設計に関しては、ロ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンド におけるレイヤードアーキテクチャの導入｜mizno
Atomic Designの考え方と利点・欠点 – wkr.
不安に強い食べログFEチームの働き方｜食べログ フロントエンドエンジニアブログ
Figmaにおけるコンポーネントとバージョンの管理について考える｜Nao Komura｜note
JavaScript tools to build interfaces - Kikobeats
Railsフロントエンド設定をふつうにする - Studyplus Engineering Blog
サーバーレスの実践といくつかの罠、そしてこれから - Qiita
エンジニアとデザイナーがデザインシステムを一緒に作った話｜こにたん
トリバゴがどうやってマテリアル・デザインアプリの堅実な基盤を作っているか | FAworksブログ
Nuxt.js を用いた新規事業開発を半年以上経験して得た知見 - Qiita
The 12 Factor Design System - UGAP Engineer's Blog
2016年にザッパラス社内で共有したデザイン系記事
【初心者向け】Atomic Design っぽい、Figma の使い方 - Qiita
soussune - エンジニアわいわいポッドキャスト「そうっすね」
デザインシステムを持たない組織のこれまでの取り組みとこれからを考える｜はのめぐみ
JSer.info 400回記念イベントを開催しました - JSer.info
デザイナーによるAtomic Designの実践〜導入編・運用編〜
【随時更新】Vue Fes Japan資料まとめ - Qiita
Reactで読みやすいコードを書くための心得
Nordnetにおける、デザインと開発のためのアトミックワークフロー : BEMとGitの力を借りて | POSTD
長く愛されるコンポーネントのための取り組み｜Masaki Osumi｜note
Atomic Design ベースのコンポーネント設計を考えてみた - mya-ake com