高尚な理は卑近の所にあり｜Kota Yamaguchi
具体と抽象を読んだ。メモの魔力のメインテーマでもある具体と抽象の往復の元祖と思われる本。人と話が噛み合わないなぁと思った経験がある人は基本的に全員がターゲットになる本だと思う。 例え話の上手い人とは「具体→抽象→具体という往復運動による翻訳」に長けている人のこと。これができる人は基本的に人と話が噛み合わないということがかなり減る。1) 具体の人→2)抽象を得た人→3)具体と抽象を行き来する人と進化していくわけだが、大体1と1、大体のことは1と2の衝突である。 「一を聞いて十を知る」という最大の意義は「同種の集まり」の間での汎用性を高めるという「横方向」の応用に加えて、階層の上のルールや属性が下の階層にも同じように適用できるという点で「縦方向」の応用も意味する例えば「TOEIC点数あげたいから、いい単語帳を教えて欲しい」と言われた時に、単語・リスニング・文法・読解・・・みたいなのが横方向。な
GraphQL入門
はじめに 対象読者 GraphQLについてざっくり学びたい人 公式ドキュメント読むのがしんどい人 Apollo/Relayどっちを使うか迷っている人 GraphQL概論編 RESTful API 代表的なWeb APIである、REST APIについて、簡単にまとめつつ、 GraphQLでできることについて、書いていこうと思います。 RESTful API(REST API)とは、Webシステムを外部から利用するためのプログラムの呼び出し規約(API)の種類の一つで、RESTと呼ばれる設計原則に従って策定されたものです。RESTそのものは適用範囲の広い抽象的なモデルだが、一般的にはRESTの考え方をWeb APIに適用したものをRESTful APIと呼んでいます。 RESTful APIでは、URL/URIですべてのリソースを一意に識別し、クライアントがHTTP（あるいはHTTPS）で要求
子レコードの条件で親レコードを絞り込みたいときはEXISTS句を活用しよう - Qiita
class Parent < ApplicationRecord has_many :children end class Child < ApplicationRecord belongs_to :parent end そして、DBのデータが次のように登録されていたとする。 parent = Namihei child = Sazae child = Katsuo child = Wakame parent = Misae child = Shinnosuke child = Himawari この状況で以下のようなメソッドを作りたい。 require "test_helper" class ParentTest < ActiveSupport::TestCase test "zで検索" do # Sazaeが該当するのでNamiheiが返る parents = Parent.child
React を深く知るための入り口
Reactに対する見方をアップデートする 国内外の優れた開発者の方による React の各論の記事は枚挙にいとまがありません。しかし、React の入門を一通り終えた方に向けの浅く広い総論はあまり見かけません。 React の公式ドキュメントのトップページに掲載されている短い3つの文章があります。この React の本質を表現した文章を掘り下げることが、初学者のステップアップにつながるのではないかと考え、各章に対して注釈を加えました。 React について少し深く知ることで、さらに React を好きになったという方を一人でも多く増やしたい。その思いから本記事を執筆しました。 本記事は React の考え方を知ることで、React に対する見方をアップデートすることを目的としています。 Reactとは何か。それはUIを構築するためのJSライブラリである React公式ドキュメントの一文 R
未経験デザイナーの私が大切にしてきた7つのこと | knowledge / baigie
デザイナーになるには、実務経験が必要と思うかもしれません。でもベイジでは、未経験デザイナーを積極的に採用しています。未経験者を育てる仕組みも整えつつあります。そして私も、未経験でベイジに入社してデザイナーになった一人です。 入社から4年が過ぎ、すっかり先輩デザイナーになりました。同じように未経験で入社してきた後輩に仕事を教えたり、未経験でデザイナーになりたい方と採用面接でお話したりする機会も増えてきました。それと共に、これまでの4年間、未経験デザイナーとして私が何を大切にしてきたか、ということをよく振り返るようになりました。 この記事は、未経験デザイナーとしての私の振り返りを、7つのことにまとめてみたものです。あくまで一個人の考え方という前提で、ご覧いただけると嬉しいです。 1. 自ら手を挙げる 未経験で入社するわけですから、当然最初はほとんど何もできません。しかし、仕事は与えられるもので
Figma プラグインを作る時の Tips
Figma のプラグインを作る時の注意点や生産性を上げる方法についてまとめてみます。 ライブラリ使ってもいいけどバンドルサイズには気をつけよう どうも Figma のプラグインは実行される度にキャッシュは保持してくれず毎回 JS を一から実行しているっぽいのでバンドルサイズが膨らみすぎないように気をつけましょう。 Figmotion みたいな一回動いたら長く使う系では問題にならないですが、何回も繰り返し実行するタイプでは問題になります。 VSCode だとこういったプラグインを入れておくと「あ、これやばそう」と気づくことができます。 Figma 内でも開発者ツールを立ち上げられる ブラウザと一緒で Command + Option + I です。 プラグインのランタイム error とか console.log とかはここに出力されるので絶対に覚えておきましょう。 Command + Op
共創するためのデザイン批評
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
Reactの新しい状態管理ライブラリ「Recoil」とは？ Reduxとの違いを解説 - ICS MEDIA
Reactの開発において、状態管理の方法は注意深く検討する必要があります。状態管理ライブラリ「Redux」が大きい勢力ではありますが（参照：npm trends）、記事『ベストな手法は？ Reactのステート管理方法まとめ』でも紹介した通りさまざまな状態管理の手法が現在でも編み出されています。本記事では状態管理ライブラリ「Recoil」についての概要と簡単な使い方、Reduxとの思想の違いについて解説します。 Reduxによる状態管理の懸念点 Reduxでは状態管理を一か所にまとめられるというメリットがあります。これはメリットのように思えますが、小さな単位の状態管理もReduxに委ねるのか迷いどころです。 また、Reduxは状態更新の作法的な書き方が複雑でした。Redux ToolkitというReduxのアドオンとしてのJSライブラリもありますが、基本的には作法的な書き方はあまり軽減しませ
共通認識を深めるデザインの要素分解
デザインを決める5つの要素誰もが『自分の正しさ』『良さ』といった価値観を抱きながら、目指すゴールに向かって働いています。私にしても「こうありたい」というミッションがあり、それを達成するための活動をしています。 それぞれが良かれと思って活動していたとしても、チームメンバー全員が同じ価値感をもっているとは限りませんし、優先順位も異なります。私たちデザイナーが抱える価値の重さを、他人が同じように感じているわけではありません。私はそれを「デザインの理解が足りない」ではなく、「価値観の重きの置き方が異なっている」と捉えるようにしています。 デザインフィードバックが難しい理由のひとつは、どう考えても正しいと言い切れる成果物が作れない（説明できない）ところ。ひとりが「良い」と評価したデザインが、他の人に尋ねると「そうでもない」と言う場合があります。人によって意見が変わる場合もあれば、タイミングやコンテキ
今だからまとめる、本当に役立ったテレワークグッズ：2020年度末版｜Miki Kobari｜小針 美紀
昨年、自宅のテレワーク環境を公開した関係で、さまざまな人からテレワークグッズの相談を受けるようになりました。 我が家のテレワーク環境 2020年4月の緊急事態宣言時は、様々なテレワークグッズが品薄になりました。しかし、その後在庫も落ち着き。 「各人が快適なテレワークライフおくっているであろう」と思った2021年。 最近、テレワークグッズについてヒアリングを受けました。 聞いてくださったのは、2020年に出産をされた方。 2020年に出産されたとすると、正直、テレワーク環境を整えている場合ではなかっただろうなぁと想像します。 2020年の出生数は87万人。 87万人生まれたとすると、それだけの親御さんがいる。 それらの方全員がテレワークするとは限りませんが、忙しい親御さんに向けて「1年間、私がテレワークを試行した中で、これは絶対必要／人によってはあるといい」といったものをお伝えし、少しでもこ
Storybook First な開発のススメ
Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。 道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。 そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。 つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ
5 Common Mistakes Managers Make, According to Their Workers
Over the past five years, I have conducted several workplace surveys to get to the bottom of what mistakes managers make more frequently than others. The data reveals some obvious patterns that continue to exist even as we have shifted to remote work. My findings are broken down by the five most common themes -- the five biggest mistakes bosses make that disengage their employees.
グーグルの生産性の専門家がアドバイス。在宅勤務で効率的な1日を送るための6つのポイント
Martin Coulter ［原文］ （翻訳・渡邉ユカリ、編集・常盤亜由子） Mar. 05, 2021, 06:00 AM ビジネス 30,598 新型コロナウイルスのパンデミックを機に、ホワイトカラーの働き方は大きく変わった。 しかし、働く人々はそのような状況にも驚くほどうまく適応してきた。IBMが2万5000人を対象に実施した調査では、パンデミック後、成人の54%が仕事の大半を在宅勤務に切り替えることを選ぶと答えている。 その傾向はグーグルでも同様であり、最近の調査ではパンデミック後にフルタイムでのオフィスに戻りたいと考えている社員は10%に満たないことが分かった。 ヨーロッパ、中東、アフリカの各オフィスの1万5000人以上のグーグル社員を対象にした調査では、指定されたオフィスで働きたいのは週1日から4日の間だと、60%の人が回答している。 ホワイトカラーの働き方が2020年以前の
MSW で加速するフロントエンド開発
みなさん、フロントエンド開発時のモックサーバーは何を使っていますか？モックサーバーといっても様々なアプローチがあると思いますが、最近活用している MSW が便利だったので紹介します。MSW（Mock Service Worker）はブラウザリクエストを Service Worker がインターセプトし、任意のレスポンスを返すことが出来るライブラリです。 次の様な Express 風ハンドラーで、モックレスポンスを表現することができます。なんとこのコードがブラウザで動いてしまいます。 import { setupWorker, rest } from "msw"; const worker = setupWorker( rest.get("https://myapi.dev/csr", (req, res, ctx) => { return res( ctx.json({ title: "C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScript
10years in Agile Coach
SASUKE x teenage engineering pocket operators「 #POsession 」 – Media Integration, Inc.