本記事は、身の回りの困りごとを楽しく解決！ by Works Human Intelligence Advent Calendar 2022の13日目の記事です。 はじめに エンジニアの私「個人開発したアプリのデザインがイマイチで世に出す勇気がなくて困っとる」 デザイナーの知人「どれどれ。あー確かに。いい意味でエンジニアらしさ出てますな♪」 私「『いい意味で』を先頭に付ければ何いっても許される説！！」 知人「デザイン作るときは既存にあるアプリやサービスのUIを参考にするといいですよ」 私「具体的には何を参考にすればエンジニアでもいい感じにデザイン作れそうですか？」 知人「それでは自分が参考にしているデザイン系のサイトをいくつか紹介していきます」 てことで、今回はエンジニア向けの個人開発やアイディア探しで役立つサイトをまとめていきます。 「ポートフォリオのアイディアが思いつかない」「開発した

この記事は、Money Forward Engineering 2 Advent Calendar 2022の20日目の投稿です。 21日目の記事は、Taiga KIYOKAWAさんによる『react-i18next で日本語の改行箇所を制御したい時は、設定で wbr タグを使えるようにしよう』でした。 本日は、マネーフォワードに入社して3ヶ月目の私が、「コンポーネントを高品質に保つためのStorybook運用」というテーマで、記事を書いていきます👊 背景 私が開発に携わっているプロジェクトでは、マネーフォワードクラウドにある複数のプロダクトを横断して利用される機能を開発しており、その機能をマイクロフロントエンドとしてプロダクト側に提供しています。 より詳しく知りたい方は、Money Forward Engineering 1 Advent Calendar 2022の14日目に投稿され

SPA（シングルページアプリケーション）をつくる場合、そうでない場合とくらべると、バックエンドで対応してたことをフロントエンドで考えなくてはいけなかったり、非同期通信や非同期遷移などの処理を考える必要もでてきます。 ビルド環境の構築、UI の実装、マイクロインタラクションの追求などなどフロントエンドで考えることがどんどんと増えてきています。そのうえで SPA となると上記の対応により、フロントエンドで考えることが山のように増え、忘れてしまいがちなことが私はよくあります。まあ、そんなに SPA の制作経験がないからというのもありますが。 そのような忘れがちな工程の内容と、私がよく使用する環境として Nuxt.js（執筆時の時点でのバージョンは 2.8.1）での対応方法を中心に述べていきます。 1. エラーページ 初期表示に必要な API を叩いても正常に返えらない場合や、ルーティング対象外の

はじめに# デザインパターンにでてくる Factory Method と Abstract Factory. なんだか, いつになっても違いが分からない… というわけで一旦整理してみることにした. 能書き# まずは, 一般的な説明をネットからひろう. Factory の原則# 生成と実装を分離することで, プログラムはシンプルになる. 生成パラメータの指定方法をシンプルに 生成後の管理をシンプルに 生成するオブジェクトの指定方法をシンプルに 特定のケースで特定のオブジェクトを生成するのは手続き思考的. 2 つをわけて考えることで設計に集中. 動作方法 生成,管理方法 Factory Method# オブジェクトの生成を行う時のインタフェースを規定して, インスタンス化するクラスを決定するのはサブクラスに任せる. factoryMethod の中でオブジェクトの生成をすることで, 生成を生成

はじめに 本投稿はJava言語で学ぶデザインパターン入門のデザインパターンをまとめた記事です。今回はFactory Methodパターンになります。 まとめ一覧はこちら Factory Methodパターン Factory Methodとは インスタンスの作り方をスーパークラスで定め、具体的な処理をサブクラスで行うパターンをFactory Methodパターンと呼びます。 オブジェクトの生成と具体的な処理を分離することで、より柔軟にオブジェクトを利用することができます。 Template Methodパターンをオブジェクト生成の場面に適応させたデザインパターンと言えますね。 簡単に言えば、オブジェクト生成を容易にするデザインパターンです。 FactoryパターンとFactory Methodパターン FactoryパターンとFactory Methodパターンでは以下の違いがあります Fa

はじめに こちらの記事ではTemplate Methodパターンについて説明します。 抽象クラスとインタフェースの違いについては必ず理解しておく必要があります。 このステップを飛ばしてデザインパターンに入っても、使いこなすことは出来ないと思います。 こちらの記事がとても参考になると思うので、一度目を通して見てください。 テンプレートって？ 日本語でいうと型です。 メールを作成する時もある程度テンプレを作っておく事で、仕事がはかどったりするかと思います。 プログラムでも同じ事が言えます。 Template Methodパターンの概念 処理の共通部分を抽象クラスに抽出し、固有の処理を具象クラスで実装する手法。 もっと簡単にいうと似たような流れの処理を共通化したい時に使えます。 この流れが重要だと思っています。ただ共通化出来る処理を抽象クラスに持っていくのではなく、 テンプレート（型）として、処

何番煎じかわかりませんが TypeScript でのエラーハンドリングについて考えてみたいと思います。 この記事で扱う TypeScript のバージョンは 4.3 です。 エラーを型安全に扱いたい TypeScript を書いていれば誰もが一度はぶつかる問題ではないでしょうか。 TypeScript では catch した例外は any として扱われます。 これは JavaScript の仕様上どんな値でも throw できてしまうため仕方のないことなのですが、せっかく型安全性を手に入れるために TypeScript を使っているのに any をハンドリングしなければならないのは苦痛です。 次のように例外を throw し得る関数 foo() のエラーハンドリングを考えてみます。 e は any なので、プロパティにアクセスしようにも危険性が伴います。 そこで型アノテーションを使用して

この記事はNuco Advent Calendar 2022の13日目の記事です はじめに 私は情報系の学部に通う大学４年生です。大学でプログラミングを学んだことをきっかけに、プログラミングを使用した実際の業務に取り組んでみたいと思いました。そして、株式会社Nucoさんで機会をいただき、現在インターン生として実務に参加させていただいています。 自分のように、プログラミングを学び、「実務の経験が積みたい」「インターンに参加してみたい」という方はたくさんいらっしゃるかと思います。この記事では自分が実際にインターン生として実務に参加し、コードレビューで指摘されたポイントを紹介します。 難易度、頻出度の目安を★の数で示しています。 ・難易度・・・それぞれの項目で指摘されないようなコードを書く難しさ。 ・頻出度・・・それぞれの項目のミスの起きやすさ。 難易度(低→高)、頻出度(高→低)の順番で紹介し

はじめに TypeScriptのエラーハンドリングの方法について、なにか良い方法はないかと探していたら、以下記事を見つけた。 この記事に書かれている方法を取り入れてコードを書いてみたら、個人的にとてもスッキリしたので、布教したい。😭 Result型を使うと例外スローの苦しみから開放される この方法の何が良いのかを説明すると、（といっても、上記記事に書いてある通りなのだが）標準的な「例外をスローさせる」方法だと以下に苦しみを感じていた。 型安全でない（型から例外がスローされるかわからない） 扱いづらい（スローされた例外は、catchして扱わなくてはならない） テストが辛い（Jestで言えば、 toThrow() , toThrowError() 等を使って評価しなくてはならない） これらの苦しみは、Result型を使って「エラーオブジェクトを返す」と全てクリアになる。 Result型の使い

この記事はairCloset Advent Calendarの記事です。 airCloset Advent Calendar 2022 - 12月15日 12月20日にも書く予定です。 エンジニアの他にも、CTO/CPO/PdM/デザイナーなど、様々な社内メンバーが書いた記事がありますので、ぜひご覧になってください。 はじめに 株式会社エアークローゼットでエンジニアをしている三好 @miyomiyo344_ です。 弊社では9割以上の領域でJavaScript(TypeScript)を採用していて、WebのフロントエンドはReactで、バックエンドはNode.jsを用いています。 また、モバイルアプリの開発はiOS、Androidアプリ共に、React Native、Flutterで開発しています。 開発では単体テストの作成が基本マストの運用になっているのですが、個人的にTDDが好きなのと

記事の目的 ふと「そうえいばクロージャって何のために存在するんだっけ？」と思ったので、備忘録がてら簡単にまとめました。 そのうえで、私と同じようにクロージャの必要性がよくわからない人の一助になれればと思い、記事にしました。 この記事で得られること クロージャってなんのためにあるん？を解決できるかも クロージャって何？を少し解決できるかも 結論 クロージャの最大のメリットは、グローバルの汚染を防止し、コードの保守性を高めること。 クロージャとは 関数内で特定の変数を参照し続けることで、関数が状態を持てる仕組みのことです。 JavaScriptはメモリ解放にガベージコレクションを採用しているため、関数内で変数を参照し続ける限りはメモリの状態を保持します。 そのため、変数のデータが初期化されることなく残り続け、あたかも状態を保持しているかのように振る舞います。 const createCount

2020/9/30追記 本記事は元々、「SQL記述者全員が理解すべきSELECT文の実行順序のお話」というタイトルで投稿しておりました。 しかし、知見のある方からのコメントと自分でも調べてみた結果、今回紹介している順序はあくまで論理的な処理順序であり、実行順序とは別物ということがわかりました。 誤った知識を布教してしまい申し訳ございません。 2020/9/30のタイミングで、本記事のタイトルを「SQL記述者全員が理解すべきSELECT文の論理的な処理順序のお話」に変更させていただきました。 はじめに 「SQLといえば、エンジニアが扱うスキル」と思われがちですが、最近はマーケターや営業など、非エンジニアの方もSQLを使って、自らデータを抽出し分析する方が増えてきています。 またエンジニアの方でも、ORM任せでなんとなく理解している状態の方もいるのではないでしょうか？ 今回は、そんな方々にこそ

ボタンやリンクの役割 画面上のボタンやリンクの役割は、ユーザーを次のアクションへと導くことです。たとえば「購入する」のようにユーザーに決定行動を促したり、「ガイドラインの詳細」のように別ページへの遷移を促したりします。アクションを起さないことは即ち、ユーザーが次のステップに進まずにページやサービスから離脱することを意味します。そのためボタンやリンクのUXライティングは、通常のテキスト以上に、ユーザーのアクションに結びつきやすいように配慮します。 ボタンやリンクの種類 ボタンやリンクには、状態変更型とページ遷移型があります。状態変更型は、ユーザーがステージの移動を伴う重要な決定を行う際に用います。たとえば「購入する」などです。対してページ遷移型は、より詳細な情報が記載されているページへ遷移する際に用います。たとえば状態変更型とページ遷移型では、ユーザーが次に行うアクションの種類や表示する情報

###目的 Googleアナリティクスを使ってみます。 ユーザー端末で出現しているJavaScriptエラーを収集します。 JavaScriptエラー情報をレポートとして表示します。 ついでに、Googleタグマネージャも使ってみます。 ###お役立ちどころ 端末、環境によってJavaScriptエラーが出たり出なかったりする場合に有効です。 ユーザーの端末で発生しているエラーを収集、その他OSなどの情報も取得できます。 情報を整理して表示されるので、分析に役立ちます。 ##用語の確認 ####Googleアナリティクス 今まで見えなかった情報を見える化します。 いろいろなものにイベントをつけて、情報収集します。 クリック、例外発生、ページの表示などにイベントをくっつけられます。 イベントを通ると情報がGoogleアナリティクスサーバーに送られます。 情報をもとに分析、解析、レポート作成を

こんにちは、フロントエンドエキスパートチームの @mugi_unoです！ kintone では フロントエンドの刷新プロジェクト（通称フロリア）が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に書いています。 テストを書くことに不慣れなメンバーもいるため、日々 Pull Request 上でのレビューやペア・モブ作業を通じて、知見の共有が行われています。今回はフロントエンド刷新のテストを書いてきた中から、筆者が有用だと感じた知見やノウハウを紹介したいと思います。 目次 💡「実はそれ最初からパスしてるかもしれない」 期待する操作で期待する結果になることを厳密に検証する 他のテストケースによって前提条件を担保する 💡「テストコード上のロジッ

ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用

TypeScript のインストール Typescript は開発時にのみ必要なので、–save-dev を付けてインストール。 $ npm init $ npm install --save-dev typescript インストールしたバージョンの確認。 $ npx tsc --version Version 4.2.3 tsc コマンドでトランスパイルを実行 このインストールにより、コマンドライン端末（ターミナル）で「tsc」コマンドが使えるようになっている。このコマンドで TypeScript から JavaScript への変換ができる。 実際に hello.ts という TypeScript で書かれたファイルを以下のように作成し、tsc コマンドを実行してみる。（TypeScript で書かれたファイルの拡張子は .ts） hello.ts const message: st