React

コンポーネント設計とAtomic Design ~UIデザイナーと開発者との協業を考える~

(引用元: bradfrost.com)
この記事は『CRESCO Advent Calendar 2021』 19日目の記事です。
こんにちは、エクスペリエンスデザインセンターのsgi-changです。

つい最近、アドベントカレンダーを執筆したと思ったら、もう一年が過ぎていて時の流れの早さに驚愕している毎日です。

元々はWebサービスのバックエンドエンジニアでしたが、最近はありがたいことにフロントエンドのお仕事も多くなりReactなどのSingle Page Application(以降、SPA)のフレームワークを使って開発する機会が増えました。

そこで「SPAのフレームワークはコンポーネント指向である。」

とよく聞くけど

「そもそもコンポーネントって何?コンポーネント設計って?コンポーネント指向との違いは?」

とモヤモヤしたことがあったので、コンポーネント設計についてAtomic Designと絡めて記事にしてみました。

ここではコンポーネント設計にAtomic Designをベースに紹介していますが、あくまで設計手法のひとつとして参考になれば嬉しいです。

以下の流れで進めていきたいと思います。

続きを読む

React で Audio Worklet を使いこなしたい

この記事は『CRESCO Advent Calendar 2021』 3日目の記事です。

ずいぶんとマニアックな記事になってしまいました。

突然ですが、皆さんは Web Audio API の Audio Worklet という機能をご存じでしょうか。

Audio Worklet は Web Audio API に定義されていないユーザー任意の音声処理を行う機能になります。

もちろん音声処理そのものは手動で実装する必要があるのですが、Audio Worklet を用いればそういった手動の実装を緩和しつつ、Web Audio APIの機能(Audio Node)の1つとして登録・使用することができ非常に便利です。

この記事では、Audio Worklet が内部でどのような処理を行っているのか、実装例を見ながら紹介していきたいと思います。

続きを読む

React.jsでWeb Audio APIを使ってみる

タイトルの通りです。

ReactアプリにWeb Audio API を導入しようと思ったのですが、意外に苦労したので、忘れないようブログとして残すことにしました。

なのでこの記事をおすすめできるのは、次のような方だと思っています。

  • React の知識そこそこ
  • Web Auido API に対して無知
  • 音声の加工処理には興味ある

ちなみに Web Audio API とはブラウザで音声処理を行うための機能のことです。基本的には再生中の音声をその場で加工する仕組みになっています。ただ単に音声処理したいだけ(再生が不要)の場合、少し扱いが特殊になるので注意しましょう。

続きを読む

React Native Expo CLI で始めるクロスプラットフォーム開発 はじめの一歩編

completed

こんにちは。

エクスペリエンスデザインセンター、略して EXDC の sgi-chang です。

今日は、React Native の Expo CLI で、Web も Android も iOS も、

複数のプラットフォームのアプリも同時に作れちゃう、

夢のようなクロスプラットフォーム開発のはじめの一歩に挑戦したいと思います。

以下の流れで進めていきたいと思います。

  • クロスプラットフォーム開発とは
  • React Native とは
  • Expo CLI とは
  • クロスプラットフォーム開発を体験してみよう

なお、今回の「はじめの一歩編」では、開発環境の構築と、

ひとつのコーディングで We bとモバイル (Android) とでアプリを動かしてみるところまでをやってみます。

(実際の各プラットフォームのビルド展開はまたの機会に…)

続きを読む

React Hooks API をふんだんに使ってみた

この記事は 『CRESCO Advent Calendar 2018』 10 日目の記事です。

こんにちは。スマート・テクノロジー・オフィスの benishouga です。

今回は 10 月下旬ぐらいから React 界隈で少し話題になっている React Hooks API を実験的に自分の作っているアプリに適用してみたのでその紹介をしたいと思います。

React Hooks API とは

React Hooks API とは Facebook が公開している React という UI コンポーネントを作るためのライブラリ に追加予定の新しい API 群で、従来の API 群では状態を保持するコンポーネントを作成するには class を使って実装していたところを単純な function で扱えるようにするものです。

続きを読む