Voicyに興味を持ってくれたあなたへチーム別詳細🔗募集中求人
Voicyに興味を持ってくれたあなたへチーム別詳細🔗募集中求人

石井 悠貴 / yuki.ishii

自己紹介

東京生まれ、東京育ちの石井です。社内ではきーくんと呼ばれています。 インターネットでは、komura-cというハンドルネームで活動しています。趣味は、音楽とプログラミング、ボードゲーム、お笑いを見ること、DTMでの作曲、アカペラをすることです。 Voicyでは、Webフロントエンドを中心にエンジニアをしています。

Voicyの好きなところ

あたたかい人が集まるサービスなところ、本気で音声とテクノロジーでワクワクする社会を作ろうとしているところ、社内文化が楽しいところ

好きなVoicyパーソナリティ

カジュアルに話してみる

入社エントリー

書籍

ピックアップコンテンツ

AngularのメタフレームワークAnalogを試す
今回は、AnalogというAngularのメタフレームワークを試してみたので紹介します。 Analogは、Angularのフルスタックメタフレームワークです。 GDEで、NgrxのメンテナーもしているBrandon氏が主に開発しているOSSで、現在は次の機能が提供されています。 Vite-powered AnalogはビルドツールとしてViteを使用しており、テストもVitestを使っているようです。 File-based routing and API routes Next.jsやNuxt.jsのpagesフォルダのようにディレクトリ構成でルーティングが決定する実装になっています。 Hybrid SSR/SSG support (upcoming features) SSRやSSGについてはViteの機能を上手く使おうとしているようで開発予定となっています。 最初に、次のコマンドでプロジェクトを作成します。 次に、プロジェクト名を聞かれるので、任意の名前に設定します。 Project name: analog-sample その後、テンプレートを聞かれるので、「Analog」を選択します。 Select a template: › Analog 最後に、Angularのバージョンを聞かれるので、「angular-v15」を選択します。 Select a variant: › angular-v15 アプリケーションが作成されたら、 package.json を参照すると分かるとおり、普段のAngularアプリケーションのように、npmコマンドを実行できます。 初期化時に生成されるtsconfig.jsonのtargetが ES2022になっており、ES2022のクラスの静的メソッド、static-class-featuresの辺りがSafariでエラーになっていたので、 es2018にします。 tsconfig.jsonを設定する また、自分が試した時は、vitestがtypescriptに上手く認識されていなかったので、"vitest"を追加して回避しました。 加えて、AnalogはStandalone Componentを前提としているため、angular-cliを使う場合は、angular.jsonに次の記述を追加すると ng g c で作成するコンポーネントがデフォルトでStandaloneとなり、作成しやすいです。 src/ ├─
https://zenn.dev/komura_c/articles/455b4a79c6d534
Angular 無限スクロール実装 3選 - voicy tech blog
この記事は Voicyエンジニアによる技術ブログリレー の24日目の記事です。 こんにちは、株式会社VoicyでWebフロントエンジニアをしているきーくん(@komura_c)です。 今回は、Angularでの無限スクロールの実装を3つ紹介します！ 機能の仕様によって色んな実装方法があると思いますが、シンプルな実装を取り上げていきます。 無限スクロールとは、別のページへ遷移しなくてもスクロールダウンによって追加でコンテンツが読み込まれる機能です。 SNSのタイムラインなどが代表的で、コンテンツが多くあるアプリや Webサービスに採用されていることが多いです。 Voicyにおいても、アプリのフォロー中タブや WebのVoicy のトップページに使用されています。 1つ目は、HostlistenerデコレータとDOCUMENTのDIを使う実装です。 この実装はスクロールする要素が、HTML文書の最上位のビューポート(表示領域) Document である場合に使うことが多いと思います。 Hostlistenerデコレータとは、指定したDOMイベントが発生した時に呼び出される関数を設定できるデコレータです。ライブラリを使わないネイティブな JavaScriptに存在する addEventListenerと似た機能が提供されています。 Hostlistenerデコレータの公式ドキュメント DOCUMENTは、DOMの DocumentをAngularで扱うためのDI トークンです。 DOCUMENTの公式ドキュメント 実装は以下の通りです。 sample.component.ts 2つ目は、イベント バインディング とテンプレート変数を使う実装です。 この実装はスクロールする要素が、特定の要素や コンポーネント である場合に使うことが多いと思います。 イベント バインディングとは、Angularにおけるテンプレート(HTML)の要素からのイベントを受け取ることができるものです。標準的なDOMイベントの他にも独自のカスタムイベントを使うこともできます。 イベントバインディングの公式ドキュメント テンプレート変数とは、テンプレートのタグ内にハッシュ記号「#」を使ってテンプレート変数を宣言し、テンプレート内の任意の場所で参照できるものです。 テンプレート変数の公式ドキュメント 実装は以下の通りです。 sample.component.html sample.component.ts 3つ目は、Intersection Observer(とViewChildデコレータ、イベント バインディング)を使う実装です。 この実装はAngularというより、ネイティブな JavaScriptの API であるIntersection Observerが主となります。 Intersection Observer(交差オブザーバー)とは、ターゲット要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供する APIです。 Intersection ObserverのMDNドキュメント このIntersection Observerはスクロール位置によって見た目、スタイル( CSS)を変化させたり、仮想スクロール(コンテンツが多大なスクロール要素に対してパフォーマンスを最適化するもの、 AngularMaterialのCDKからも実装用のAPIが提供されている)を実装したりと様々な使い方ができる API です。 ViewChildデコレータとは、DOM 内の セレクターに一致する最初の要素またはディレクティブを探す APIです。ネイティブな JavaScriptに存在する getElementByIdなどと似た機能が提供されています。また、ViewChildデコレータはディレクティブや子の コンポーネントも参照することができます。 ViewChildデコレータの公式ドキュメント 今回の実装は以下の通りです。 sample-list.component.html sample-list.component.ts sample.component.html 今回は、Angularで無限スクロールを実装する方法を3つ紹介しました。 実際はより実装が複雑になることが多いと思いますが、何か参考になれば嬉しいです。 実装したサンプルは、記事中のコードの表記と若干の相違がありますが、雑に Github 上で公開しています。 興味があれば、ご覧ください。(ついでにstandalone ...
https://tech-blog.voicy.jp/entry/2022/11/24/103519

音声アウトプット

テキストアウトプット

その他アウトプット