こんにちはフロントエンドエンジニアの峯です。 デザインシステムやUIガイドラインを作成する場合は、デザイナーと共同してコンポーネントを整理し、しっかりとルールを定義することができます。 しかし、プロジェクトによってはデザインシステムやUIガイドラインを必要としないケースも存在します。基本的にコードは運用されることを前提としているため、そのようなデザインシステムを作成しない場合でも、運用性・変更可用性を考慮して開発する必要があります。 今回は、このようなプロジェクトでも、デザインデータに最低限含めてあるとエンジニアとしてデザイン意図を最低限受け取ることができ、開発過程で大変助かることを3つ紹介したいと思います。 どうか、怠惰なフロントエンドエンジニアのわがままを聞いていただけると幸いです。。 カラーコード一覧があるフレームワークを活用した開発が中心となり、色の指定を利用箇所それぞれで指定する

こんにちはアジケでフロントエンドエンジニアをしているの峯です。 今回は、デザイン会社のエンジニアとして、サービスのUXを最大化させるためにエンジニアとして行っている4つを紹介します。以下のような悩みを抱えている方の参考になれば幸いです。 組織にフロントエンドメンバーがいない（少ない） UXをサービスのUIに落とし込めていない 事業背景・UXのキャッチアップと理解アジケはUXデザイン会社として事業の上流から参画することが多いです。新規事業であれば、事前調査、既存サービスであれば本質的な課題を見つけつところから参画します。 デザイン会社のエンジニアとして特徴的だと言えるのが、エンジニアの参画タイミングです。描いたUXを最大限UIに反映するために早いタイミングでエンジニアがプロジェクトに参画しています。これは、開発を担当するエンジニアが事業背景やUXを理解していることが重要だと感じているためです

ログインUIの作成 ログイン画面は、<Authenticator>を利用します。 この時、@aws-amplify/ui-react/styles.cssを読み込ませることで、しっかり用意されたスタイルを当てることができるので必要な場合はこちらをimportしてください。 import { Authenticator } from '@aws-amplify/ui-react' import '@aws-amplify/ui-react/styles.css' const IndexPage = () => { return ( <> <Authenticator> {({ signOut, user}) => ( <main> <p>Hello, {user?.username}</p> <button onClick={signOut}>ログアウト</button> </main> )

2022/07/06随分と久しぶりの更新になります。 最近は少し開発で忙しくしておりましたが、現在少し落ち着いたので、個人開発しました。 Chrome拡張作りました。Zennに記事を投稿しているのですが、ScrapboxのChrome拡張を作成して無事リリースされました！ どれくらいニーズがあるかわかりませんが、時々今週何書いたっけといった振り返りに度々記事を探していたりしたので今回作ってみました。 もしよければ使ってください。

こんにちは。 ajikeでUI/UXデザインを担当しているサイトウです。 特にIT業界ではフルリモートの会社が増えている昨今、Gatherでバーチャルオフィスを作成し使っている会社さんも増えてきている様に感じます。 アジケもその中の１社ですが、今回は、UI/UXデザインカンパニーのアジケならではのバーチャルオフィスの作り方、「UXデザインの５段回モデル」に沿って作ったプロセスをご紹介したいと思います。 UXデザインの5段階モデル◉ デザインプロセス① 戦略：どんなオフィスにしたいかを決める まず、どんなオフィスにしたいのか、どういう状態で仕事をしたいかを明確にし、そもそもバーチャルオフィスを作る目的を明確にします。アジケがGatherを利用し始めたのは、ちょうどフルリモート化が決定した2022年1月。皆がGatherの良さに確信を持ち始めた2月頃、もっとよくするための様々な要望やアイディア

はじめにNext.js アプリケーションのデプロイ先の候補として Vercel が真っ先に挙げられますが、料金などの色々な都合でほかの場所にホスティングしたいこともあると思います。 SSG (Static Site Generation) で利用する場合は、幅広い選択肢がありますが、SSR (Server Side Rendering) と ISR (Incremental Static Regeneration) を使いたい場合の選択肢は、それほど多くありません。 AWSに SSR可能な Next.js アプリケーションをデプロイするメジャーな２つの方法 AWS Amplify と Serverless Next.js Plugin (Component) を紹介します。 サーバーレスなSSRとISRNext.jsのさまざまなレンダリング形態と特徴については、本記事では深掘りしませんが、

ちょっと前にツイッターで見かけた、ゆめみのフロントエンドコーディング試験 フロントエンドコーディング試験 「RESAS API を使用して、都道府県別の総人口推移グラフを表示するSPAを作る」っていうお題 React の勉強をするのにちょうどいい題材だなぁって思ったのでやってみた。課題を公開してるってことは「やってみてもいいよ」ってことかなと思ってるんだけど、もし違ったら GitHub のリポジトリーを private にするので連絡ください 1週間でやらないといけないところを2ヶ月近くやってるし、コミットログも特に何も考えずにポイポイ書いたから、全然だめなんだけど、でも、色々勉強になったので、とてもよかった。楽しかったー！ つくったもの こんな感じ これでおわりにするー pic.twitter.com/K8zhrRUp54— Mitsuyuki Shiiba (@bufferings)

テクニカルライティングの基本を学べます。サイボウズの新入社員向け研修資料です。業務マニュアル、報告書、仕様書、技術解説書などのドキュメントを書く機会がある方向け。 Twitter：https://twitter.com/naoh_nak 2023年度のアップデート版もあります：https://speakerdeck.com/naohiro_nakata/technicalwriting2023

月間10万人が読んでいるCoral Insightsのニュースレターにご登録いただくと、Coral Capitalメンバーによる国内外のスタートアップ業界の最新動向に関するブログや、特別イベントの情報等について、定期的にお送りさせていただきます。ぜひ、ご登録ください！ 誕生からもうすぐ30年、いまだに一部のWindowsユーザーから根強い支持を集めるテキストエディタ「秀丸」をご存じでしょうか。2021年11月には11年ぶりの“メジャーアップデート”が報じられ、話題になりました。 秀丸は多くのプログラマーやライターたちが愛用した、大ヒットソフトウェアです。大手のSIerでも、統合開発環境が一般化する2010年頃までは標準開発ツールとして使われていたことがあるほどでした。 開発者の斉藤秀夫さんは秀丸があまりに売れたため、当時勤めていた富士通を退職して独立。個人開発のプロダクトでありながらも、ピ

GW明け直ぐに仕事モードに持ってけそうにないので、リハビリがてらに執筆しています。 今回初めてChrome拡張を作成しました。最近触り始めたLambdaの学習を兼ねています。 今回作成したChrome拡張について チームでScrapboxを利用しているのですが、週次で作成したページのサマリを取りたいといった時など、自分が作ったページ一覧を取得したい時に使えるChrome拡張になっています。 主な仕様は、Scrapboxページ上で、Chrome拡張ボタンをクリックすると、Slackに直近自分が作成したページ一覧を送信してくれるChrome拡張になります。 ▼アーキテクチャ図 事前準備 Scrapbox APIについて 今回Slackに送信するデータは、自分が作成したScrapboxページを対象にしています。 以下のScrapbox APIを利用します。 プロジェクト内のページ情報 プロジェク

Node.js v18がリリースされました 🎉 nodejs.org この記事では Node.js v18 の主な変更点を抜粋して紹介します！ fetch() がフラグ無しで実行可能に (experimental) HTTP requestTiemout()のデフォルト値の変更 node:test モジュール（テストランナー）の追加 (experimental) V8 アップデートによる新しい JavaScript の API の追加 Array#findLast(), Array#findLastIndex() Intl.supportedValuesOf() その他の改善 Web Streams API のグローバルへの追加、実行時の警告の削除 (experimental) まとめ fetch() がフラグ無しで実行可能に (experimental) github.com Node

こんにちは峯です。 今回は、普段の業務の中で、「部下の成果物が意図したものになっていない」という上司の悩みや、「成果物に対する上司からのフィードバックでやっと認識齟齬に気がつく」という部下の悩みを解消するコミュニケーションの方法を紹介します。 ソース元は、エンジニアリング組織論への招待という書籍で紹介されている、権限委譲のレベルについてです。さらに詳しく知りたい方は、是非書籍をお読みください。 自分の役割、行うべき範囲を本書で紹介されている権限委譲のレベルに当てはめて、上司と部下が共通認識を持ってコミュニケーションをとることで、業務の遂行がよりスムーズになります。 権限委譲コミュニケーションの失敗繰り返しになりますが、みなさんは以下の悩みを持っていませんか？ 「部下の成果物が意図したものになっていない」 「理解しているつもりだったが、上司からのフィードバックで認識齟齬に気がつく」 「上司か

はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ

デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS