frontend

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

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

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

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

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

とよく聞くけど

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

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

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

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

続きを読む

Web API実装でasync await, Promiseを理解する

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

みなさま、はじめまして。エクスペリエンスデザインセンター(EXDC)の網野です。

エクスペリエンスデザインセンター(EXDC)はサービスデザイン、UI/UXがメインになりますが、
ここ1年、業務でフロントエンド開発をおこなう機会がありました。

そこで、Web APIとか非同期処理ってよく聞くけどいまいちわからない・・・
async await、Promiseとかソースコードに書いてあるけど、どう使うの・・・?
となっているフロントエンド初心者の方向けにWeb APIの実装方法を説明します。

続きを読む

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

続きを読む

ようこそ!2020年、Webフロントエンドの世界へ

こんにちは、UXデザインセンターのsgi-changです。

ついに2020年。

数字だけ見るとものすごく未来を感じてしまうのは私だけでしょうか。

今回は、とても魅力的なWebのフロントエンドの世界(以下、Webは略)をご紹介したいと思います。

当記事の対象は、

社内でフロントエンドエンジニアが不足している。

いきなりフロントエンドやれと言われた。

サーバーサイドしか知らない。

SPAって何?

モダンWebって何?

どうしていいか分からない。

といった今までフロントエンドとはあまり縁がなかったけど、

急に関わることになった方を対象にしています。

開発を進める上で参考になれば嬉しいです。

続きを読む

WebGL、Three.jsでワクワクしてみた2019、ひとりハッカソン編

(この記事は「CRESCO Advent Calender 2019」12日めの記事です)

こんにちは、UXデザインセンターのsgi-changです。

今年もAdvent Calendarに参加させて頂くことになりました。

ちょうど一年前「WebGL、three.jsでワクワクしてみた」を書いたのですが、

何を書こうかと色々迷った挙句…私の中で最近ますますホットな3DCGの記事が書きたくて、

もうすぐクリスマス、そしてもうすぐ1年も終わるし、

せっかくAdvent Calendarだし、

今年もやっぱりThree.jsでワクワクしてみたいなと思い、

Three.jsでひとりハッカソン(※)に挑戦してみることにしました。
(しつこくてすみません。)

続きを読む

WebGL、three.jsでワクワクしてみた

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

こんにちは、UXデザインセンターのsgi-changです。

2018年もあと少し、気持ちも慌ただしくなってきた師走にちょっとワクワクしてみたいなと思い、

気軽にブラウザで3Dコンピュータグラフィックス(以下3DCG)を実装できる、WebGL、three.jsの記事を書いてみました。

とりあえず、今日はテキストエディタだけあればコピーandペーストで実装できる超簡単3DCGを実装してみます。

WebGL、three.jsとは?

実装の前にざっくりとWebGL、three.jsについて説明します。

続きを読む