TypeScript

こんにちは kintone のフロントエンド刷新プロジェクトでフロントエンドエンジニアをしている Nokogiri です 現在 kintone ではフロントエンドのレガシーコードの刷新に取り組んでいます。 このプロジェクトでグローバルスコープの JS オブジェクト（以降グローバルオブジェクトと呼びます）と向き合ってきた過程について紹介したいと思います。 同じようなグローバルオブジェクトの取り扱いに困っている人の助けになれば幸いです。 kintone フロントエンド刷新プロジェクト（フロリア）とは kintone の画面初期表示用データ取得方法の現状 kintone のフロントエンドのデータ取得…

こんにちは！フロントエンドの世界は常に進化していて、新しい技術やツールが次々と現れるよね。そんな中、テストフレームワークの選択は、ウェブエンジニアの旅路における重要な決断だ。今回は、JavaScript/TypeScriptの開発において、新たな可能性を秘めたテストライブラリ「Vitest」をご紹介するよ。 Jestに似ているけど、さらにいくつかの特長を備えたVitest。この記事では、Vitestの導入から基本的な使い方、さらには発展的な機能までを掘り下げていくよ。これからVitestの航海に出る君たちに、少しでも役立つ情報を提供できればと思ってる。 本記事は、Next.jsとの連携やVit…

配列からランダムに n 個の要素を取り出したい要件を実装したのでメモ 要件 配列からランダムに n 個の要素を取り出す 取り出す要素に被りがないこと 方針 配列をシャッフルする .slide(0, n) で要素を取り出す Math.random() * array.index のような形で配列の index をランダムに作り取り出す方法も考えられるが、既に取り出した要素の判定が面倒なのと Math.random() は比較的偏るので要素をシャッフルした配列を作成し先頭から n 個取り出す方針とした ランダムな index を生成する方法 1つだけ取り出すのであればこちらが簡単 const ra…

API から取得したデータが string | undefined のリストだったので filter で typeof === 'string' のものだけにしたのだけフィルター後の配列の型がうまく行かなかったのでメモ 問題: 型情報がフィルタリングされない const data = ['星宮いちご', '霧矢あおい', undefined, '紫吹蘭', undefined]; const res = data.filter((item) => typeof item === 'string'); // res: (string | undefined)[] console.log(res)…

Amplify ドキュメント https://docs.amplify.aws/start/q/integration/next/ https://docs.amplify.aws/cli/ ■15. 投稿ページの下準備 uuidというのを利用するので、インストール yarn add uuid pages/create-post.jsを作成。 まずは、第一段階目のコーディング。 import { withAuthenticator } from "@aws-amplify/ui-react"; import { useState, useRef, React } from "react"; i…

Amplify ドキュメント https://docs.amplify.aws/start/q/integration/next/ https://docs.amplify.aws/cli/ ■0. AWSのセットアップ アカウントだけは先に作っておくこと。それ以外は何もしなくても大丈夫。I AMユーザーの管理者権限も一応念のために先にあると良いが、このプロジェクトのセットアップには必要ない。 ■1. Amplify CLIのインストール ローカル端末にAmplify CLIのインストール 【mac】sudo npm install -g @aws-amplify/cli 【windows →…

■スプレッド演算子 スプレッド演算子(...)は、配列の全ての値を一括で「展開」できる、という機能である。 push()について復習。配列やオブジェクトは「参照型」。値そのものではなく、値への参照を持っている。参照先のアドレスが変わらなければ、メモリの中身である配列やオブジェクトの中身を変更することができる。 よって、以下の例で、push()を使って、activeHobbiesに配列を追加するとしたら、 const hobbies = ["Spotrs", "Viking", "Razicon"]; const activeHobbies = ["Hiking"]; activeHobbies…

システムからスプレッドシートを操作する機会があったので、今回はスプレッドシートを操作するAPI 「Google Sheets API」 を紹介したいと思います。サンプルコードはTypeScriptです。 ドキュメント Googleから日本語ドキュメントが公開されています。 https://developers.google.com/sheets/api/guides/concepts?hl=ja 認証／認可 APIを利用するために認証まわりの準備が必要です。 こちらもGoogleから日本語ドキュメントが公開されています。 https://developers.google.com/worksp…

現在当社ではフロントエンドを担当をしております。 株式会社iimon 山根大生です！ 今回はtsconfig.jsonとESについて記事を書かせて頂きます。長文となりますがよろしければご覧ください。 背景）業務でtsconfig.jsonを修正する機会があったため（現バージョンtarget:ES5ではPromise.allSetteledが使えないが、使いたかったため）。 目的）最新のES(JavaScript の標準化が行われていてその基本となる仕様)の仕様について知り、効率の良い開発と本番でどのバージョンを適用させるかを選定するための参考にする 目次 tsconfig.jsonとは omp…

業務系のWEBアプリケーションを開発していると、和暦を扱う機会が意外と多い。 そこまで難しいプログラムでもないのだが、この課題を解決するための OSS は世の中にあるはず、と思い探索したところ、 @smarthr/wareki に遭遇した。 SmartHR のニュースリリースでもあるように「H28.9.1」が「平成28年9月1日」に変換されるようなライブラリでわかりやすい。 smarthr.jp コードをダウンロードしてざっと眺める。元号は明治〜令和までカバーしていた。 慶応以前は対応していないようなので、このあたりは使う側の要件を満たさないようであれば、自分で実装したほうが手っ取り早いかもし…

こんにちは。LayerX バクラク事業部 バクラク申請・経費精算チーム エンジニアの @tatane です。 最近10万円超えのヘッドホンを買ってしまい、しばらく離れていたオーディオ沼にまた片足を突っ込んでしまいました。 この記事は LayerXテックアドカレ2023 21日目の記事です。前回は @serima が「LayerXの発信の"のびしろ"とCasual Nightのウラガワの話」を書いてくれました。次回は同じチームの @upamune が「エラーログ祭り改善の話」を書いてくれる予定なのでご期待ください！ 今回はバクラク事業部で進めている Vue3 移行の話をご紹介します。 バクラクの…

どうも、レコメンド商品のシステム開発をしている野川と申します。 私は、2021年にモノタロウに新卒入社し、2022年5月からレコメンド商品の開発に関わり始めました。 モノタロウのレコメンド商品は、下の図の①～④の流れでクライアントサイドで表示しています。大部分の処理はJavaScriptで構成しており、UIもそのHTML部分をjQuery(JavaScript)で作成しています。 図：レコメンド商品表の流れ 入社当時私は、ソフトウェアエンジニアとして、「可読性の低いコードは駆逐するべきだ」「読みやすいコードだけが正義である」「理解しやすいシステムだけが皆を幸せにする」と心の底から考えていました…

はじめに こんにちは！ソフトウェアエンジニアの種岡です。 私たちのチームでは、TypeScriptを使用して開発を行っており、Prettierというコードフォーマッターを利用し、チーム内でコーディングスタイル統一に大変重宝しています。 そんなフォーマッター界隈で、Rust製で爆速で動作すると噂のdprintが良いということで試してみたところ、驚くべきことが起きました！ Prettierでは、コードフォーマッティングに 7.69秒 かかっていたのですが dprintを使うことでわずか 0.47秒 で完了するようになりました🚀🚀🚀 なんと、 10倍以上速い とういう結果に！ コードフォーマットは、…

目次 React TypeScriptでのPlaywrightを使用したスクリーンショットの撮影方法 ステップ1: Playwrightのインストール ステップ2: テストファイルの作成 ステップ3: テストの実行 追加オプション React TypeScriptでのPlaywrightを使用したスクリーンショットの撮影方法 この記事では、React TypeScriptプロジェクトでPlaywrightを使用してスクリーンショットを撮影する方法を紹介します。 ステップ1: Playwrightのインストール プロジェクトにPlaywrightをインストールするには、次のコマンドを実行します。…

はじめに NRI で主にフロントエンドやバックエンドにおける開発標準化や技術支援の業務を担当している酒井です。先日マイクロフロントエンドについて調査する機会があり、qiankun を用いてアプリケーションを実装しました。本記事ではその内容を紹介しますが、一記事に全て載せると膨大になってしまうため、後日 Part.2、Part.3と続編記事を公開予定です。 最近はマイクロフロントエンドという言葉も一般的になってきましたが、本記事で マイクロフロントエンドとは何か 実務に活かせそうか など使うにあたり気になる点をお伝えできればと思います。 マイクロフロントエンドとは マイクロフロントエンドを一言で…

概要 TestView を用いた MVVM (Model-View-ViewModel) パターン実装の続きに取り組む。 概要と事の経緯については、 0. Figma 奮闘記と JavaScript との邂逅を参照のこと。 0. Figma 奮闘記と JavaScript との邂逅 1. 最低限の環境構築とアニメーション 2. TypeScript の環境構築 3. 命盤用の盤面の作成 4. JEST と MVVM の導入 5. TestView の実装1 6. TestView の実装2 概要 View イベント: 宮の選択 テスト 実装 View イベント: 宮のマウスオーバー テスト T…

よわよわエンジニアが知ったことのメモ日記です ことの発端 Next.jsを使っていて、画面を右と左に２分割して使いたい。 当然ながらCSSで頑張れば実装は可能だと思うが、Reactのコンポーネントライブラリで簡単に作れるものがないか探したいというのが発端。 結構あるあるのユースケースだし幾らでも記事でてくるだろうと思っていたら、案外日本語の使ってみた系のページが少なかったので、机上調査をまとめておく。 一部動作確認した時の環境は以下の通り +-- @types/node@20.9.4 +-- @types/react-dom@18.2.17 +-- @types/react@18.2.38 +…

Introduction Reactは現在、最も人気のあるJavaScriptライブラリの一つです。 Reactを学ぶことで、モダンなウェブアプリケーションを開発するための基礎を身につけることができます。 しかし、Reactの学習過程は初心者にとっては少し厳しい場合もあります。 そこで、Next.jsが登場します。Next.jsはReactのフレームワークであり、React初心者にとっては学びやすい環境を提供してくれます。 本記事では、React初心者がNext.jsから学ぶ理由について探っていきます。 学習のしやすさ Reactを学ぶためには、JavaScriptの基礎知識とReactの概念…