はじめに この記事はLipersInSlums Advent Calendar 2024 「スラムで年収をあげる〜だが僅かばかりの友の他は、皆、スラム民を嘲った。資格取得で年収アップに挑むなどと〜」の大遅刻組の記事である。シモンは泣いていい。 筆者がプログラミングを初めた頃はインターネットの検索技術は発達しておらず、良質なコンテンツにたどり着くには一苦労だった。そのため、何か新しいことを学ぶのに最初に手を取るのは技術書であった。 今では検索技術は高度に発達し、必要な情報は検索すればたちまち手に入る用になった。しかしながらそれらの断片的な知識群を体系化し、習得するのは未だ難しい。体系的に知識を習得する上で技術書は未だ最も有力な候補となる。 この記事では主にジュニア(?)エンジニア向けに、読むとプログラミングに必要な比較的陳腐化しにくい様々な知識が体系的に身に付いて役に立つお得な技術書を簡単に

この記事は「RUNTEQ Advent Calendar 2024」23日目の記事になります。 はじめに プログラミングスクールRUNTEQでエンジニア兼講師をしているいっぺい（@ippei_111）と申します。 いきなりですが個人開発を行う時にアプリケーションのUIを考えるのに悩んだ経験はありませんか？ エンジニアあるあるかもしれませんが、個人開発をする際に機能の実装はできるが、デザインの部分でどうしたら良いのか迷ってしまい、手が止まってしまうことがあると思います。 本来機能開発に時間をかけたいが、デザインに凝りすぎてしまい、余計な工数と時間がかかってしまうことも多々あると思います。 また、デザインに関する知識と経験がないエンジニアがデザインを考えると、「なんかダサいデザイン」「使いづらいUI」になってしまうのもエンジニアあるあるかと思います。 本記事では、デザインに不慣れなエンジニアで

LAPRASのエンジニア組織ではフロントエンド専任のエンジニアはいません。皆プロジェクト単位でバックエンドもフロントエンドも（ときにインフラも）触りながら開発しています。 ただそれだけだと個別領域の技術的負債の解消が進みにくいので、フロントエンドに関心のある有志のエンジニアがフロントエンド改善委員会という会を結成し、週1回1時間集まり改善活動を行っています。今回はその委員会メンバーで行ってきた改善活動を紹介します。 🐉 今年行ったフロントエンドの改善活動 時系列、規模は順不同で紹介します。 JestからVitestへの移行 LAPRASのテストは開発当初からJestでした。ただ、JestはES Modulesのサポートやパフォーマンスの問題があり、今年Vitestに移行しました。 結果CIのフロントエンドテスト実行時間が約1/3になり、リリースのリードタイムの短縮にも繋がりました。ES

こんにちは。決済プロダクトでQAエンジニアをしているrenです。freee QA Advent Calendar2024の23日目です。 今回は、決済プロダクト開発にテストアーキテクチャを設計した事例について紹介します。 テストアーキテクチャとは テストアーキテクチャによって解決したい課題 テストアーキテクチャ設計のステップ 1. この振る舞いを担保するためには、どのようなテストが必要だろうか？という問いを立てる 2. 抽象化して考えるための概念を学ぶ 3. テストアーキテクチャを描き、議論する テストアーキテクチャ設計のインパクト 実装改善に関する気づき テストの構造とソフトウェアの構造に関する気づき 自分たちのテスト活動の課題に関する気づき チーム開発の支援を通じた工数上のインパクト テストアーキテクチャがもたらす価値 今後の展望 [appendix]今回設計したテストアーキテクチャの

Summary: Grids help designers create cohesive layouts, allowing end users to easily scan and use interfaces. A good grid adapts to various screen sizes and orientations, ensuring consistency across platforms. If you’ve been to New York City and have walked the streets, it is easy to figure out how to get from one place to another because of the grid system that the city is built on. Just as the pr

HOME制作UI/UXUI Stackに基づいた状態変化に強いUIを作ろう！ UI Stackに基づいた状態変化に強いUIを作ろう！ こんな思いをしたことはありませんか？ 「ページの読み込みに時間がかかっているけど、画面が真っ白で読み込み中なのかエラーなのかわからない…」 「ブログの記事数が少なくて、ページとしては寂しい…」 「404ページがサイトのデザインと異なっていて、びっくりした…」 ユーザーに不安な気持ちを与えるページを作っていませんか？ ページの構成・デザインを考える時は「UI Stack」を基準に考えるとユーザビリティの高いページを作成できます。 UI Stackとは UI Stackとはアメリカのデザイナー Scott Hurffさんが提唱した、「UIの考慮すべき5つの状態」という考え方です。 出典：How to fix a bad user interface 5つの状態と

otanjoubi.jp あなたの誕生日を選択してください。 「誕生花」･「誕生石」･「誕生色」･「誕生星」･「誕生鳥」 「誕生魚」･「誕生酒」･「誕生果」･「誕生木」･「誕生竜」 「誕生日のキャラクター」が検索できます。

design systemSerendie Design Systemは、多様な事業と人々をつなぎ、新たな価値を生み出すための三菱電機によるオープンなデザインシステムです。 コンセプト

株式会社ダイニーでデザインマネージャーをやっている川上です。 ダイニーのデザインチームでは、この師走の時期に一つの意思決定を行いました。それは、マスターファイルの運用をやめたことです。そこに至った経緯について書いていきます。 💡 マスターファイルとは ここで言うマスターファイルとは、各プロダクトごとの全画面のデザインを集約したFigmaファイルを指しています。 マスターファイルを運用していた理由ダイニーでマスターファイルの運用をしていた理由は大きく3つありました。 プロダクトの全画面を一望することで、全体像を俯瞰的に把握し、一貫性を保ちながら車輪の再発明を防ぎやすくなるため。 新規デザインを作成する際に、類似する画面を参照してテンプレートとして活用するため。 デザイナー以外もマスターファイルを参照することで、各プロダクトの画面をヘルプサイトや資料、プレスリリースやマーケティングなどの素材

こんにちは！令和トラベル FrontendエンジニアのFukudaが、App Routerでのフォーム開発ついてご紹介します。ぜひ最後までご覧ください！ フォーム開発において、Next.jsのApp Routerは大きな可能性を広げました。特に、Server Actionsや新しい便利なフックの追加により、フォーム送信や状態管理、バリデーションが格段にシンプルで強力になっています。Pages Routerと比べて何が変わったのか、そしてどのように実装が進化したのか、実例を交えて見ていきましょう。 フォーム開発における新機能 1. Server Actions Server Actionsを使用すると、非制御コンポーネントの利点を活かしつつ、フォーム送信をサーバーサイドで直接処理できます。 // app/form/actions.js 'use server' export async fu

これは SMat Advent Calendar 2024 の12/23分の記事です。 はじめに こんにちは、株式会社エスマット エンジニアの hi6okuni です。 最近Reactでテーブルカラム内にオートコンプリート付きのインプットを設置する機会がありました。 オートコンプリートの検索候補は、localStorageやAPIなど、様々なソースから取得するパターンが考えられます。Reactのライフサイクルにおいて、これらの検索候補を複数コンポーネントで同期し管理する場合、ZustandやContext APIといったグローバルステートを利用することが多いのではないでしょうか？（API経由の場合は、APIクライアントのキャッシュ機能を活用するのが一般的かもしれません） 今回のプロジェクトについても「テーブル内のあるカラムで入力された新規ワードは、他のカラムで即座に検索候補として表示される

よろしくお願いします！エンジニアのideです。 こちらはアドベントカレンダー23日目の記事になります！ 今年は体のあちこちに痛みを感じることが多かったので、来年こそは健康に過ごせる一年になるといいなと願っています。 さて、今回は今年やってきたことを振り返るのもいい機会だなと思い、特に触れる機会が多かったJavaScriptについてまとめてみることにしました。 結果的に基本的な内容が中心となりましたが、改めて理解を深める良いきっかけになったので、これはこれでよしとしています！ それではよろしくお願いいたします！ [目次] テンプレート文字列 スプレッド構文 分割代入 プロパティ名の短縮記法 オプショナルチェーン nullish(??)とfalsy(||)チェック ディープコピー アロー関数 Promise async/await forEachの中でasync/awaitが効かない おわりに

すべての状態をできるだけ減らしたいypresto (プレスト) です。 12月頭に予約してたアドベントカレンダーですが12/23になってしまいました。 LayerXのバクラク事業部では、Webフロントエンド領域もがんばっています！！ ということで一筆。 バクラク事業部のエンジニアは、バックエンド・フロントエンドの垣根なくプロダクト開発を手掛けています。各々に得意領域があり、わたしはフロントエンドの改善やコードレビューなども行っています。 そのコードレビューで、「Vueの watch() を使用せずに computed() でリアクティブに書きたいです」 (Reactで言えば useEffect() を避けたい) と指摘させていただいたときに、理解を深めたいとコメントを頂いたこともあり、フロントエンド開発のコアとも言える、リアクティブ (Reactive) な状態管理の話をまとめようと思いま

Hi, let's have a meeting tomorrow to discuss the project. I've been reviewing the project details and have some ideas I'd like to share. It's crucial that we align on our next steps to ensure the project's success. Please come prepared with any questions or insights you may have. Looking forward to

初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵‍💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界