Fusic Tech Blog

Fusicエンジニアによる技術ブログ

#javascript

2023/12/06
Fusicフロントエンド座談会 from 雅 2023/12/1

みなさんこんにちは、フロントエンドチーム「雅」の香月です。\ 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。\ 今回でなんと第十一回となりました! みんなで技術情報をシェアしてキャッチアップしようと始めたこの座談会ですが、毎回楽しい会で今回も開催しております。 過去の記事はこちら *...

Fusicフロントエンド座談会 from 雅 2023/12/1
2023/10/31
Fusicフロントエンド座談会 from 雅 2023/10/26

みなさんこんにちは、フロントエンドチーム「雅」の浦田です。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。 今回でなんと第十回となりました! みんなで技術情報をシェアしてキャッチアップしようと始めたこの座談会ですが、毎回楽しい会で十回も続いてしまいました。 過去の記事はこち...

Fusicフロントエンド座談会 from 雅 2023/10/26
2023/10/04
JAXA Earth APIをAstroで動かして衛星データを可視化してみる

## はじめに JAXAさんが提供している「JAXA Earth API」を試しに使ってみました。 JAXA Earth APIとは[公式サイト](https://data.earth.jaxa.jp/ja/)によると > 地球観測データは衛星やセンサー、配信システムごとに仕様が異なり、データを横断的に活用するためには専門的な知識を要します。 そこでJAXAが保有する複数の衛星データをAPI...

JAXA Earth APIをAstroで動かして衛星データを可視化してみる
2023/09/29
Fusicフロントエンド座談会 from 雅 2023/09/28

みなさんこんにちは、フロントエンドチーム「雅」の山西です。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。 今回で第九回となります。 過去の記事はこちら * [第一回](https://tech.fusic.co.jp/posts/2023-03-10-frontend-...

Fusicフロントエンド座談会 from 雅 2023/09/28
2023/09/12
Fusicフロントエンド座談会 from 雅 2023/09/08

みなさんこんにちは、フロントエンドチーム「雅」の山西です。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。 今回で第八回となります。 過去の記事はこちら * [第一回](https://tech.fusic.co.jp/posts/2023-03-10-frontend-...

Fusicフロントエンド座談会 from 雅 2023/09/08
2023/08/26
Fusicフロントエンド座談会 from 雅 2023/08/24

みなさんこんにちは、フロントエンドチーム「雅」のです。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。 今回で第七回となります。 過去の記事はこちら * [第一回](https://tech.fusic.co.jp/posts/2023-03-10-frontend-di...

Fusicフロントエンド座談会 from 雅 2023/08/24
2023/08/03
Fusicフロントエンド座談会 from 雅 2023/07/28

みなさんこんにちは、フロントエンドチーム「雅」の浦田です。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。 前回から少し間が空いてしまって話すネタが溜まっていたので、今回の第五回は内容多めです。 そしてチームメンバーも倍の6人に増え、いつにも増してワイワイと楽しい会でした! ...

Fusicフロントエンド座談会 from 雅 2023/07/28
2023/06/12
Fusicフロントエンド座談会 from 雅 2023/06/09

みなさんこんにちは、フロントエンドチーム「雅」のです。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。 今回は「Fusicフロントエンド座談会」第五回の様子をお届けします。 過去の記事はこちら * [第一回](https://tech.fusic.co.jp/posts/...

Fusicフロントエンド座談会 from 雅 2023/06/09
2023/04/28
Fusicフロントエンド座談会 from 雅 2023/04/28

みなさんこんにちは、フロントエンドチーム「雅」の浦田です。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。 今回は「Fusicフロントエンド座談会」第四回の様子をお届けします。 過去の記事はこちら * [第一回](https://tech.fusic.co.jp/post...

Fusicフロントエンド座談会 from 雅 2023/04/28
2023/04/17
Fusicフロントエンド座談会 from 雅 2023/04/14

みなさんこんにちは、フロントエンドチーム「雅」の山西です。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。 今回は「Fusicフロントエンド座談会」第3回様子をお届けします。 過去の記事はこちら * 第一回: https://tech.fusic.co.jp/posts/20...

Fusicフロントエンド座談会 from 雅 2023/04/14
2023/03/27
Fusicフロントエンド座談会 from 雅 2023/03/24

こんにちは、フロントエンドチーム「雅」夛田です。 今回は「Fusicフロントエンド座談会」第2回の様子をお届けします。 前回の記事はこちら https://tech.fusic.co.jp/posts/2023-03-10-frontend-discussion-from-miyabi-2023-03-10/ ## TL;DR - ChatGPT-4が話題 - FigJamでテーブルが使えるよ...

Fusicフロントエンド座談会 from 雅 2023/03/24
2023/03/10
Fusicフロントエンド座談会 from 雅 2023/03/10

みなさんこんにちは、フロントエンドチーム「雅」の浦田です。 今日から「Fusicフロントエンド座談会」としてチーム内で気になった記事や技術情報を共有、ちょっとだけ深ぼりして話す会を定期的に行っていこうと思います。 チーム雅が普段どんなことを話しているかやどんな技術に興味を持っているのか知ってもらうためにも、テックブログに議事録を公開しました。 ## TL;DR * ライブラリ選定にNode...

Fusicフロントエンド座談会 from 雅 2023/03/10
2022/06/10
React Native Gesture Handlerで画像のズームやドラッグができるビュワーを作る

## はじめに React Nativeでピンチイン、ピンチアウトでズームできたり、ドラッグで移動できる画像表示ライブラリは色々ありますが、カスタマイズが必要になってくると既存のライブラリでは厳しい場合があります。 そこでReact Native Gesture Handler(以下RNGH)だけで画像ビュワーを作ってみようと思います。 ## 動作イメージ ![React Native G...

React Native Gesture Handlerで画像のズームやドラッグができるビュワーを作る
2022/04/20
Laravel + Vue.jsで開発した社内コミュニケーション円滑化システムの技術スタックを公開します

こんにちは!サラです。 新人研修で社内コミュニケーション円滑化システム「Doggy」を作ったので、社外発信したいと思います。 ![doggy homepage](/uploads/doggy-home-blurred.png "doggy homepage") ## 目次 * [背景](#背景) * [システム](#システム) * [技術スタック](#技術スタック) * [システム構成]...

Laravel + Vue.jsで開発した社内コミュニケーション円滑化システムの技術スタックを公開します
2021/09/09
Node.js16 で Sleep 機能がサポートされたらしい

## はじめに こんにちは、最近は TypeScript を触ることが多くなってきた夛田です。 今回は、Node.js16 からサポートされた Sleep 機能について書いてみようと思います。 Node.js16 は 2021/10/26 より LTS となりますので、そろそろ新機能をしっかり追っておきたいところですね。 参考: https://nodejs.org/ja/about/rele...

Node.js16 で Sleep 機能がサポートされたらしい
2021/06/29
next-localization で Pluralization を行う際は、辞書キーの配置に気をつけよう

## 時間がない人向け3行説明 - next-localization っていう Next.js 用のi18nがある - Pluralizationという、「単数形・複数形」をいい感じに切り替えれる機能がある - Pluralizationを行う際は、キーを辞書の最上位層に置かないと機能しない ## next-localization - [これです](https://github.com/St...

next-localization で Pluralization を行う際は、辞書キーの配置に気をつけよう
2021/06/20
Reactでテキストのオートリンクとemojiレンダリングを両立する方法

こんにちは。岡嵜です。 Reactを使っていて地味に悩んだ問題を先日無事解決できたので、Tipsとしてまとめます。 ## やりたいこと Reactコンポーネントにてテキストのオートリンクとemojiのレンダリングを両立させたいです。 ![](/uploads/react-autolink-emoji-example.png) GitHubを始め、世の中のtoDeveloper向けサービス...

Reactでテキストのオートリンクとemojiレンダリングを両立する方法
2020/11/02
vue-js-modalで簡単にmodalを実装する

# はじめに フロントエンド開発をする際にmodalは非常に便利で、よく使うと思います。 vue.jsでは僕は2つの実装方法を見つけました。 1. transitionを使った実装 2. vue-js-modalを使った実装 前者は、パッケージを必要とせず、後者はnpm installして利用します どちらがいいかは、正直好みによるかなと言う印象です。 今回は個人的に簡単だと思うvue-j...

vue-js-modalで簡単にmodalを実装する
2019/12/06
eslint-plugin-graphql でGraphQLクエリのバリデーションを行う

GraphQLのクライアントアプリを開発する際に、サーバー側へ投げているクエリが定義されているスキーマに対して正しいものなのかチェックする必要がでてきます。 そんな時にESLintのプラグインである [eslint-plugin-graphql](https://github.com/apollographql/eslint-plugin-graphql) を使うとエディタやCIテスト時...

eslint-plugin-graphql でGraphQLクエリのバリデーションを行う
2019/12/06
Alexaでポ○モン風ゲームをつくった話

この記事は [Fusic その 2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/fusic-2) 6 日目の記事です。 先日会社の開発合宿がありました。 今度、Alexa Skill Builderを受験する予定だったので、今回はAlexaスキルを作ることに。 **せっかくなら、これまで作ったことのないものをつくり...

Alexaでポ○モン風ゲームをつくった話
2019/11/05
React Native + Expo + TypeScriptで作るモバイルアプリ (Part2 - React Navigation編)

[前回](https://tech.fusic.co.jp/posts/2019-10-30-react-native-expo-typescript-native-base/) はNativeBaseを利用して見た目部分を作りました。 今回はその続きで[React Navigation](https://reactnavigation.org/) を導入して画面間の移動を実現します。 #...

React Native + Expo + TypeScriptで作るモバイルアプリ (Part2 - React Navigation編)
2019/10/30
React Native + Expo + TypeScriptで作るモバイルアプリ (Part1 - NativeBase編)

React Nativeの開発サポートツールであるExpoを使ってモバイルアプリを作っていこうと思います。 まずはExpo CLIを使ってプロジェクトを作成、見た目をいい感じにしてくれる[NativeBase](https://nativebase.io/) を導入するところまで書きたいと思います。 ## 環境 * Node.js v10.15.0 * Expo CLI v3.3.0 ##...

React Native + Expo + TypeScriptで作るモバイルアプリ (Part1 - NativeBase編)
2019/10/27
Apollo Serverを使ったGraphQLクエリのテスト

GraphQLは単一リクエストで複数リソースを取得できたり、APIに型付けされ、スキーマベースでサーバーとクライアント間の疎通がしやすくなるなどとても強力な技術です。 しかし開発時の課題の一つとして出てくるのが、「クライアント側から投げているクエリはサーバーで定義されているスキーマに対して正しいのか?」ということです。 クエリ作成時には正しかったものでも、開発が進みスキーマが変...

Apollo Serverを使ったGraphQLクエリのテスト
2019/08/24
Nuxt.js + GraphQL + Ruby on Railsで作るToDoアプリチュートリアル(後編)

Nuxt.jsとGrashQLとRuby on RailsでToDoアプリを作るためのチュートリアルです。 前編・後編を終えるとこのようなToDoアプリが完成する予定です。 ![](/uploads/nuxt-rails-graphql-todoapp.gif) **本記事はチュートリアルの【後編】です。試してみたいという人は先に[【前編】](https://tech.fusic.co.j...

Nuxt.js + GraphQL + Ruby on Railsで作るToDoアプリチュートリアル(後編)
2019/08/22
Nuxt.js + GraphQL + Ruby on Railsで作るToDoアプリチュートリアル(前編)

Nuxt.jsとGrashQLとRuby on RailsでToDoアプリを作るためのチュートリアルです。 前編・後編を終えるとこのようなToDoアプリが完成する予定です。 ![](/uploads/nuxt-rails-graphql-todoapp.gif) ソースコードは以下に公開しています。 ...

Nuxt.js + GraphQL + Ruby on Railsで作るToDoアプリチュートリアル(前編)