【デザインファイルを属人化させないFigma活用・コラボ方法】 - Qiita
前提情報 開発環境はスクラム、2週間のスプリントですが、デザインに関しては、レビュー、仕様変更、デザイン修正、サクッと実装、リリース！、ユーザーの声を聞きサクッと修正のようなイメージで基本的に超高速に小回りきかせて、顧客への価値提供は担保しつつ、スピードと顧客の体験重視な対応をしています。そこに前述の9時間の時差と1万キロの距離が加わるので、それ相応の工夫が必要なのは必然かと思います。 これらの前提からFigmaのデザインファイルで実現しなければいけないことは主に4点あって： 1. 最新マスターデザインの場所を明白にする プロジェクト内の構成 以上。 超絶にシンプルですね。単純にこのファイル: Master Design Files の中に、自分が担当しているプロダクトの最新マスターデザインを全部入れています。ルールは”このファイル内で常にデザイン更新する”です。 ファイル内のページ構成
私の職場、子育てや家庭、副業など、ワークライフバランス的に働きやすいんです。 - Qiita
こちらは、クラウドワークス Advent Calendar 2022の16日目の記事です。1 TL;DR クラウドワークスは働きやすいぞ 制度と文化のおかげだと思ってる から紹介させて ワークライフバランスどうですか。充実してますか。 コロナ禍もそろそろ3年。あっという間に世の中は変わっていきましたね。 各社リモートワークをやったりやめたり。皆さん最近どうですか。 Twitterアンケートの結果、「今の職場、子育てや家庭、副業など、ワークライフバランス的に働きづらい」と感じている方が 36.4% でした。 私は幸いにも「働きやすい」に投票する環境にいます。 副業も家事も通院も趣味も人との交際も、不自由なく過ごしています。 弊社クラウドワークスでは、そんなコロナ禍の前から「ハタカク！」2という多様な働き方を体現するための新人事制度を導入していました。 2.新人事制度「ハタカク！」について 開
Figma Tokensの導入 デザイナーと協力して一貫性のあるUI実装を実現する - Qiita
この記事は Goodpatch Advent Calendar 2021 の12日目です。 今回はFigmaのPluginであるFigma Tokensを使ってみて実感した恩恵や、実際にどのように利用したかを書いていきます。 はじめに フロントエンジニアの責務の一つとしてUI実装（UIの実現）があります。 UI実装はFigmaなどのデザインファイルを設計書として実装していきます。しかしながら、デザイナーも人間なのでデザインファイルにミスがあることもあります。また、デザイナーとエンジニアが並走してプロジェクトを進めていく場合はデザインファイルの変更がたびたび起こることもあり、都度デザイナーとコミュニケーションをとりながらコードを修正しなければなりません。 このような状況を考えると、UI実現の責務をフロントエンドエンジニアだけが受け持つのは荷が重く、クオリティ低下につながる危険性があるのではな
エンジニアに優しいデザイナーにもなりたい！ - Qiita
はじめに こんにちは！@Ayako-tus です。 大学入学時からフロントエンドの学習、途中からデザインをかじって案件に取り組んでいる大学３年生です。 某ベンチャー企業でHPの制作やReactを使ったWebサービスの開発をしてきましたが、Figmaを触り始めてからデザインに興味を持ち始めました。 この記事ではフロントエンド開発とデザインを１つの案件で両方担った時に思ったこととかを記そうと思います。 間違った考え方などがあれば、気軽に教えていただけると幸いです。 #フロントエンドとデザインを両方担当してた時に大変だったこと どこまで必要なんだ？ 私はfigmaでデザインを作った後、storybookとchromaticでUIを実装し、Reactでサービスの実装をしていました。 デザイナーとフロントエンドエンジニアを別の方が担当していればstorybookで動きが想定通りかなど確認してもらう必
Engineering Manager 不要論 - Qiita
はーい、メリークリスマス！ すでに良い子のところにはプレゼントが配達済みなナウ25日で、サンタさんが寝室に戻る足音を聞きながら、私からのプレゼントは堂々と遅配なTO☆SHI☆NO☆SE、みなさまいかがお過ごしですか。 Engineering Manager（以下EM）の不要論という、クソデカ主語の飛ばし記事を書こうとして、遅刻してたんじゃ世話ないですが、こちらの記事は Engineering Manager Advent Calendar 2021 の24日目の記事になります！遅れてごめんなさい！ EMって要るの？要らないの？（自己紹介） まずはお前誰だよってことで自己紹介させていただきますが、今年の4月からキャディ株式会社でエンジニアリングマネージャーをしております @hiraiva です。 元々うっかりCTOをさせていただいていたうっかり八兵衛なこともあって、現職入社後こんなインタビュ
プログラマーとエンジニアリングマネージャと経営の交差点から - Qiita
古川です。本籍の会社ではシニアソフトウェアエンジニアとグループマネージャの兼任、ニジボックスではデベロップメント室というところの室長をやっています。 今日は宣伝に近いのですが、以下のようなイベントをやるので、その触りとしてどういう話をしたいかをここに書こうと思っています。 ビジネス&クリエイティブ 持続的な組織の成長とは？ チーム構築とビジネスグロースの両立を考える シニアソフトウェアエンジニア その名の通りエンジニアの中でシニアロールです。以下のようなことをやっています。 便利ライブラリ作り 設計の技術的な相談に乗る エンジニアコミュニティを社内に立ち上げて勉強会開く グループマネージャ マネージャの中でも私のやっていることはいわゆるエンジニアリングマネージャです。エキスパートなメンバーが多いので、彼らメンバーのキャリアの相談に乗ったり、誰と誰を組ませてお互いを成長させるか考えたりしてい
2021年のTypeScript環境構築で絶対入れるべき「better-typescript-lib」の紹介 - Qiita
こんにちは。この記事は筆者が開発した「better-typescript-lib」を宣伝する記事です。これは、導入するだけでTypeScriptプログラムがより型安全になるという素晴らしいライブラリです。あくまで型定義なので、導入してもランタイムの挙動は何も変わらず、バンドルサイズなどへの影響もありません。 better-typescript-libの導入法 ここに記載されているのはv1 (TypeScript 4.0 〜 4.4向け）のインストール方法です。v2 （TypeScript 4.5〜）ではインストール方法が変わり、最初のnpm installのみで良くなります。詳しくは次の記事をご覧ください。
クリーンなReactプロジェクトの21のベストプラクティス - Qiita
コード品質向上のための実践的アドバイス Photo by Diana Polekhina on Unsplash. はじめに Reactは、構成の方法について特に決まりがありません。まさにこれが理由で、プロジェクトをクリーンで保守可能な状態に保つことは、私たちの責任なのです。 今日は、Reactアプリケーションの状態を改善するために従うべきベストプラクティスについて説明します。これらのルールは広く受け入れられているため、この知識を持つことは必須です。 すべてコードで示します。さあ始めましょう！ 1. JSXの省略形を使用する ブール変数の受け渡しには、JSXの省略形を使うようにしましょう。例えば、Navbarコンポーネントのタイトルの可視性を制御するとします。 悪い例
「つみたてNISAは米国インデックスファンド放置で良い」は本当か？ - Qiita
こんにちは、最近になってつみたてNISAを始めた今年2年目の社会人です。つみたてNISAは運用益が非課税、半自動的に積立運用可能、途中で取り崩し可能と様々なメリットがあり、非常に有益な制度です。そんなつみたてNISAを活用する上でよく耳にするのは「信託報酬が安くてパフォーマンスの高い米国インデックスファンド一択！一時的に暴落しても戻るから気にするな！」という話です。確かに2000年のITバブル崩壊、2008年のリーマンショックという暴落を経験しながらも、S&P500といった代表的な米国インデックスの直近20年のパフォーマンスは素晴らしいです。 しかし、本当に米国インデックスファンドを積立・放置するだけでいいんでしょうか？頭を使わずに、というのは言い過ぎかもしれませんが放置しているだけで資産が殖えるなんて美味い話、不安を感じるのも確かです。そこで過去に米国インデックスファンドを積立・放置して
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
Spotifyの開発文化とスクラムの比較 - Qiita
背景・前提 ※この記事は、社内で『ユニコーン企業のひみつ』を薦めるために書いた記事の転載です。mediumに書いていましたが、テックの話でもあるのでQiitaにも書きます。 「ユニコーン企業は書籍に書かれているようなアジャイルなんてやってない」の記事を読み、『ユニコーン企業のひみつ』という本が気になり、読んだ。 エンタープライズ企業の開発手法（アジャイル）と、Spotifyなどのユニコーン企業（※この本の独自定義なので注意）の開発手法や文化を比較するような内容だ。しかし、実際には上記のブログタイトルはややミスリードで、アジャイルと全く異なるわけではなく、実際には次のような内容である。 （本の中では明言されていないが）アジャイルソフトウェア開発宣言にあるような価値観は踏襲しているので、アジャイルの発展型の一つだと思う。「チームや開発者に権限を！」というモチベーションで、XPに近い雰囲気がある
それでも私がTailwind CSSではなく、CSS Modulesを推す理由 - Qiita
*2021 6/11追記 『でもクラス名考えるのめんどくさい』問題についての私の見解を大幅加筆しました。 *本記事はピュアなCSSについてのある程度の知識があり、Tailwind CSSの採用について考えている層を対象読者としています。ピュアCSSの知識が乏しく、最適なCSSフレームワークを探している読者は対象としていません。 色々書き比べた結果Tailwind CSSにしたという話 こちらの記事がバズっていた(6/9現在 over 200likes)為、読ませて頂きました。 これまで主観的な印象と薄い議論で賛否が分かれていたTailwind CSSについてこれまでのcssの技術の変遷を踏まえて技術的にかなり踏み込まれた考察の上で選定の理由が書かれており、Tailwind CSSアンチ派の私にとっても非常に勉強になる記事でありました。リスペクト。 その上で、こちらの記事では私が『それでもC
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
明日から使えたり使えなかったりするFigmaの豆知識20選 - Qiita
毎回このウィンドウを開いて1つずつ入力するよりも、この入力の方が少し早くなります。 ちなみに、角丸はこの書式で複数の値を指定しても受け付けてくれません。 widthやheightに0.001と入力すると幅や高さが0になる 正確に言うと0.006より小さければ0になり、0.006以上なら0.01になります。 親Frameの幅や高さを0にしてClip contentのチェックを外すと、地味に使い勝手が良いときがあります。 例えば、Auto layoutだけど枠からはみ出したような表現も出来るようになります。 ※何を寝ぼけているのかカンマの位置が間違っています。記事の本筋とは関係ない場所なので目を瞑ってください……。 画像に書き出さずともpngとしてコピーできる 要素を選択した上で⇧ + ⌘ + Cを押すと、pngとしてコピーできます。 Figma上で貼り付けるのはもちろん、Slackにも持って
Rails API + React でマッチングアプリを作ってみた - Qiita
概要 タイトル通り。バックエンドにRails（API）、フロントエンドにReactを採用したマッチングアプリ的なものを作ってみたのでアウトプットしておきます。 完成イメージ 割とそれっぽい雰囲気になってます。 使用技術 バックエンド Ruby3 Rails6（APIモード） MySQL8 Docker フロントエンド React TypeScript Material-UI 今回はバックエンドのみDockerで環境構築していきます。 実装の流れ だいぶ長旅になるので、これからどういった流れで作業を進めていくのかザックリ整理しておきます。 環境構築 Rails（$ rails new） React（$ create react-app） 認証機能を作成 gem「devise_token_auth」などを使用 マッチング機能を作成 中間テーブルなどを活用 バックエンドとフロントエンドを分離して
３週間でAWS認定ソリューションアーキテクト-アソシエイト-とったので、勉強法などまとめてみる - Qiita
はじめに こんにちは。nari(fukubaka0825)と申します。 今回は、およそ3週間くらいで掲題の資格を取得しましたので、その経緯と勉強法などをまとめてみたいと思います。(勉強時間でいうと40時間くらい) ３週間でAWS認定ソリューションアーキテクト-アソシエイト-とったので、勉強法などまとめてみる｜Wano Group Developers Blog (こちらであげたものと同じ内容です） ※こちらは2019年3月13日受験時点での内容となります。ご了承ください。 前提 AWS業務未経験 自学でもほぼ未着手(EC2たてたことあるくらい) きっかけ そもそも業務で使いまくっている用語が分からなすぎる 私は、もともとSIの人間で、メインフレームの保守をしているレガシーな部署から、 転職してGoとAWSでの開発をするチームに2月からjoinしたところなんですが(寒暖差で風邪ひきそう) 「
クラウドエンジニア(AWS)ロードマップ2021 - Qiita
お知らせ 2022年初頭に本記事を元にしたAWS書籍が技術評論社より全国出版決定いたしました。 関係者各位のご協力に深く感謝いたします。 タイトル：AWSエンジニア入門講座――学習ロードマップで体系的に学ぶ 本書籍出版までの制作プロセス、チーム執筆の方法論などをまとめました チームで技術書を出版して学べた共同執筆メソッド はじめに インフラ初学者がAWSを用いた設計・構築レベルに到達するため、学習の全体像をロードマップ図にまとめました。 背景 パブリッククラウド全盛期においてAWSは全エンジニアにとって「常識」となりました。 しかしながら、情報過多によってAWS学習に必要な情報がネット上のノイズに埋もれてしまい、初学者の直感による判断が誤った学習に行き着くこともあります。 このロードマップはAWS学習の全体像を俯瞰でき、パブリッククラウドを用いた設計・構築レベルに到達するまで導く体系的なス
Promiseについて0から勉強してみた - Qiita
ES6を使う機会がありそうで、Promiseについて全然知らなかったので、実際に書きながら勉強してみたときのメモ。 なお、以下を参考にさせて頂きました。 0から勉強する時でもとても分かりやすかったです。 JavaScript Promiseの本 環境 Node.js v4.2.2 Promiseとは 非同期処理を操作できる 非同期処理の成功時(resolve)、失敗時(reject)の処理を明示的に書くことが出来る 非同期処理を平行・直列に実行させることが出来る とりあえずやってみる とりあえず、参考にさせて頂いたサイトのコードを書いてみました。 function asyncFunction() { // Promiseオブジェクトを返却する.処理成功時にはresolveが呼ばれる return new Promise(function (resolve, reject) { setTim
【実例あり】ABテストとは？最適なUIを分析して導き出してみよう - Qiita
日々改修しているサイトや個人サービスなどで、ここをこう変更すればユーザーがもっと使いやすくなるのでは？と考えたことはないでしょうか。 しかし大きなサイトであるほど簡単には変えられず悩む事になります。変えたとしてもそれで良くなるとは限りません。 今回はそういった案が毎日上がる弊社、ユーザー数620万人以上のサービス『DLsite』にて実際に実施されている 『ABテスト』 について、どういったものなのかを雰囲気だけでも知っていただけるよう解説していきます。 📗 ABテストとは ウェブサイトにおけるABテストとは、サイト内の一部分を比較したパーツ「A」と「B」のどちらがよりユーザビリティの観点から優れているかを分析する手法です。 A, Bだけでなく、A, B, C, Dなどの数パターンのUIを比較してどのUIが一番優れているかを実際にユーザーに使って頂き、最もクリックしてもらいやすいなどのUI
【TypeScript】React.VFCとは何ぞや - Qiita
はじめに ReactにHooksが導入され、最近ではFunction Componentを採用することがほとんどになってきたように思います。 Function Componentを定義するための型としてReact.FCが提供されているのですが、いくらかのデメリット（というより使う必要のなさ）があり、敢えて使っていないプロジェクトも数多く存在しています。 そんな中、デメリットを少し解消したReact.VFCが生み出されていたため共有します。 React.FCとは 先述したとおりFunction Componentを定義するための型で、以下のように使用します。 interface Props { hoge: string; } const Component: React.FC<Props> = (props) => { return ( <div> <p>{props.hoge}</p> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
