Go言語は、並行処理を実現するために並行処理のための独自の仕組みを持っています。並行処理は、複数の処理を同時に実行することで、アプリケーションのパフォーマンスを向上させることができます。 Go言語における並行処理は、goroutineという軽量スレッドを使用して実現されます。goroutineは、スタックサイズが非常に小さく、起動や停止のオーバーヘッドが低いため、多数のgoroutineを起動することができます。 また、並行処理を実現するために、Go言語はチャネル（channel）という仕組みを提供しています。チャネルは、goroutine間でデータのやりとりを行うための機能であり、同期的にデータの送受信を行うことができます。

Go言語の並行処理とは

goroutineは、ランタイムによってスケジューリングされます。スケジューラは、goroutineが実行可能であるかどうかを判断し、実行可能なgoroutineがある場合はスケジュールします。 しかし、goroutineのスケジューリングは、厳密には制御できません。そのため、goroutineを適切に制御することが重要です。 例えば、無限ループを含むgoroutineを起動すると、そのgoroutineが無限ループを繰り返し、CPUリソースを占有してしまいます。そのため、goroutineを制御するために、タイムアウトやキャンセル処理を実装することが重要です。 以下は、goroutineにタイムアウト処理を実装する例です。<pre><code>func timeoutFunc() {
 select {
 case &lt;-time.After(time.Second * 5):
 fmt.Println("timeout")
 case &lt;-quit:
 fmt.Println("quit")
 }
}

func main() {
 go timeoutFunc()
 time.Sleep(time.Second * 6)
 quit &lt;- true
 fmt.Println("done")
}</code></pre> 上記の例では、timeoutFunc()関数が5秒間実行されます。しかし、main()関数から6秒間スリープした後、quitチャネルにtrueを送信することで、timeoutFunc()関数をキャンセルします。timeoutFunc()関数内のselect文は、time.After()で5秒待機するか、quitチャネルからの受信を待機します。どちらかが先に発生した場合に、その処理を実行します。つまり、5秒以内にquitチャネルにtrueが送信された場合には、quitという文字列を出力し、6秒後にmain()関数が終了するため、doneという文字列を出力します。 また、quitチャネルは、bool型のチャネルであり、timeoutFunc()関数が実行されている間、main()関数からtrueが送信されるまで待機します。main()関数がtrueを送信することで、timeoutFunc()関数がキャンセルされます。 このように、goroutineを適切に制御することで、効率的で安全な並行処理を実現することができます。

goroutineのスケジューリングについて

チャネルは、同期的にデータの送受信を行うことができます。しかし、チャネルを使った通信は、送信側が受信側にデータを送信するまでブロックされます。そのため、バッファリングされたチャネルを使用することで、ブロックされることなく非同期的にデータの送受信を行うことができます。 以下は、バッファリングされたチャネルを使用する例です。<pre><code>func main() {
 ch := make(chan int, 1)
 ch &lt;- 1
 fmt.Println(&lt;-ch)
}</code></pre> 上記の例では、チャネルをバッファリングして、1つの値を送信します。その後、受信側で値を取得します。この例では、送信側が受信側よりも先に実行されるため、データを受信する前にブロックされることはありません。

チャネルのバッファリングについて

Go言語には、syncパッケージがあります。syncパッケージは、並行処理における排他制御を行うための機能を提供しています。例えば、複数のgoroutineが同時に共有リソースにアクセスする場合、排他制御を行わないとデータ競合が発生する可能性があります。そのため、syncパッケージのMutexを使用して、共有リソースに対する排他制御を行うことが重要です。 以下は、sync.Mutexを使用した排他制御の例です。<pre><code>import (
 "fmt"
 "sync"
)

var count int
var lock sync.Mutex

func increment() {
 lock.Lock()
 defer lock.Unlock()
 count++
}

func main() {
 var wg sync.WaitGroup
 for i := 0; i &lt; 1000; i++ {
 wg.Add(1)
 go func() {
 defer wg.Done()
 increment()
 }()
 }
 wg.Wait()
 fmt.Println("count:", count)
}</code></pre> 上記の例では、increment()関数でcount変数に対する排他制御を行っています。increment()関数内で、MutexをLock()してカウントアップ処理を実行し、処理が終わったらMutexをUnlock()します。これにより、複数のgoroutineが同時にincrement()関数を実行しても、データ競合が発生しません。 また、main()関数でWaitGroupを使用して、すべてのgoroutineの処理が完了するまで待機しています。

syncパッケージを使用する

Go言語には、contextパッケージがあります。contextパッケージは、goroutineのキャンセルやタイムアウト処理を簡単に実装するための機能を提供しています。 例えば、Webサーバーを実装する場合、HTTPリクエストの処理に対してcontextを使用することができます。これにより、リクエストがタイムアウトした場合には、リクエスト処理をキャンセルすることができます。 以下は、contextパッケージを使用したキャンセル処理の例です。<pre><code>import (
 "context"
 "fmt"
 "time"
)

func longProcess(ctx context.Context) {
 fmt.Println("start")
 defer fmt.Println("end")

 for {
 select {
 case &lt;-ctx.Done():
 fmt.Println("canceled")
 return
 default:
 fmt.Println("processing")
 time.Sleep(1 * time.Second)
 }
 }
}

func main() {
 ctx := context.Background()
 ctx, cancel := context.WithCancel(ctx)
 go func() {
 time.Sleep(3 * time.Second)
 cancel()
 }()
 longProcess(ctx)
}</code></pre> 上記の例では、longProcess()関数で、contextを使用してキャンセル処理を実装しています。longProcess()関数では、無限ループを行い、データの処理を続けます。しかし、ctx.Done()が発生した場合には、処理をキャンセルして終了します。main()関数では、contextをBackground()で生成し、cancel()関数を生成します。cancel()関数は、3秒後に実行され、longProcess()関数をキャンセルします。

contextパッケージを使用する

並行処理のベストプラクティス

以上が、Go言語における並行処理のベストプラクティスです。goroutineの制御やチャネルのバッファリング、syncパッケージやcontextパッケージを使用します。 今回3パターンを紹介しましたが、それぞれに適切な使用場面があり、これらのベストプラクティスを実践することで、安全で効率的な並行処理を実現することができます。(適切な使用場面の説明は時間がある時に追記するかもしれないです。。)

まとめ

Go言語における並行処理のベストプラクティス

<code>MatterArea.tsx</code><pre><code>import {
 Engine,
 Body,
 Render,
 Bodies,
 MouseConstraint,
 Mouse,
 Runner,
 Composite,
} from 'matter-js'
import { memo, useLayoutEffect } from 'react'
import styles from '@/styles/components/MatterArea.module.scss'

export const MatterArea = memo(() =&gt; {
 useLayoutEffect(() =&gt; {
 // イベントリスナー クリーンアップ関数で呼ぶため先に定義
 let scrollTimer: NodeJS.Timeout

 function initMatter(matterHolder: HTMLElement) {
 const engine = Engine.create()
 const width = matterHolder?.clientWidth
 const height = matterHolder?.clientHeight

 const render = Render.create({
 element: matterHolder,
 engine,
 options: {
 width: width,
 height: height,
 background: 'transparent',
 wireframes: false,
 pixelRatio: 5,
 },
 })

 // 壁の追加
 Composite.add(engine.world, [
 Bodies.rectangle(width / 2, height + 250, width, 500, {
 isStatic: true,
 label: '_noMap',
 render: {
 fillStyle: 'transparent',
 },
 }),
 Bodies.rectangle(-50, height / 2, 100, height * 20, {
 isStatic: true,
 label: '_noMap',
 render: {
 fillStyle: 'transparent',
 },
 }),
 Bodies.rectangle(width + 50, height / 2, 100, height * 20, {
 isStatic: true,
 label: '_noMap',
 render: {
 fillStyle: 'transparent',
 },
 }),
 ])

 matterHolder
 .querySelectorAll('[data-object]')
 .forEach((object: HTMLImageElement) =&gt; {
 if (object.getAttribute('data-circle')) {
 addObjectCircle(object)
 } else {
 addObject(object)
 }
 })

 function addObjectCircle(object: HTMLImageElement) {
 const objWidth = object.clientWidth
 const objHeight = object.clientHeight
 let rect: Body

 rect = Bodies.circle(
 Math.random() * (width - 200) + 100,
 -300,
 objWidth / 2,
 {
 label: object.getAttribute('data-object'),
 // density:
 // object.getAttribute('data-object') === 'obj2' ? 0.01 : 0.02, // 質量
 // frictionAir: 0.01, // 空気抵抗
 restitution: 0.75, // 跳ね返り
 friction: 0.01, // 摩擦
 render: {
 sprite: {
 texture: `${object.getAttribute('src')}`,
 xScale: objWidth / object.naturalWidth,
 yScale: objWidth / object.naturalWidth,
 },
 },
 }
 )

 Composite.add(engine.world, rect)
 }

 function addObject(object: HTMLImageElement) {
 const objWidth = object.clientWidth
 const objHeight = object.clientHeight
 let rect: Body

 rect = Bodies.rectangle(
 Math.random() * (width - 200) + 100,
 -300,
 objWidth,
 objHeight,
 {
 label: object.getAttribute('data-object'),
 // density: 2, // 質量
 // frictionAir: 0.01, // 空気抵抗
 restitution: 0.75, // 跳ね返り
 friction: 0.01, // 摩擦
 render: {
 sprite: {
 texture: `${object.getAttribute('src')}`,
 xScale: objWidth / object.naturalWidth,
 yScale: objHeight / object.naturalHeight,
 },
 },
 }
 )

 Composite.add(engine.world, rect)
 }

 if (window.innerWidth &gt;= 768) {
 const mouse = Mouse.create(render.canvas)
 const mouseConstraint = MouseConstraint.create(engine, {
 mouse: mouse,
 constraint: {
 render: {
 visible: false,
 },
 },
 })
 render.mouse = mouse
 Composite.add(engine.world, mouseConstraint)
 }

 Render.run(render)
 const runner = Runner.create()
 Runner.run(runner, engine)

 matterHolder.classList.add('is-active')

 // スクロールで物体を動かす
 scrollTimer = setTimeout(() =&gt; {
 const allBodies = Composite.allBodies(engine.world)
 const scrollY = window.scrollY

 const scrollEvent = () =&gt; {
 const scrollDelta = window.scrollY - scrollY
 // console.log(scrollDelta)

 allBodies.forEach((body: Matter.Body) =&gt; {
 if (body.label === '_noMap') {
 return
 }

 if (Math.floor(scrollDelta) % 5 === 0) {
 Body.applyForce(
 body,
 { x: body.position.x, y: body.position.y },
 {
 x:
 (Math.floor(Math.random() * 2) === 0 ? -1 : 1) *
 Math.random() *
 0.01,
 y: -0.047,
 }
 )
 }
 })
 }

 if (typeof window === 'object') {
 // 画面内だけでスクロールイベント発生
 if (window.IntersectionObserver) {
 const observer = new IntersectionObserver((entries) =&gt; {
 for (const e of entries) {
 if (e.isIntersecting) {
 window.addEventListener('scroll', scrollEvent)
 } else {
 window.removeEventListener('scroll', scrollEvent)
 }
 }
 })
 const observerEl = document.querySelector('#observer')
 observer?.observe(observerEl)
 }
 }
 }, 2000)

 // リサイズが終了して1秒後に削除
 let timeoutId: NodeJS.Timeout
 let windowW = window.innerWidth
 window.addEventListener('resize', () =&gt; {
 if (
 window.innerWidth &gt;= 768 ||
 (window.innerWidth &lt;= 767 &amp;&amp;
 Math.abs(windowW - window.innerWidth) &gt; 5)
 ) {
 clearTimeout(timeoutId)

 timeoutId = setTimeout(function () {
 const allBodies = Composite.allBodies(engine.world)
 allBodies.forEach((body) =&gt; {
 Composite.remove(engine.world, body)
 })
 Engine.clear(engine)
 Runner.stop(runner)
 }, 1000)
 }
 })
 }

 const matterHolder: HTMLElement =
 document.querySelector('[data-html-matter]')

 if (typeof window === 'object') {
 // 画面内で物理エンジンを実行
 if (window.IntersectionObserver) {
 const observer = new IntersectionObserver((entries) =&gt; {
 for (const e of entries) {
 if (e.isIntersecting) {
 if (!matterHolder.classList.contains('is-active')) {
 initMatter(matterHolder)
 }
 } else {
 // console.log('out');
 }
 }
 })

 const observerEl = document.querySelector('#observer')
 observer.observe(observerEl)
 }
 }

 // リサイズが終了して1秒後に再生成
 // safariは過剰にresizeイベントが発火されるのでそれ対策
 let timeoutId: NodeJS.Timeout
 let windowW = window.innerWidth
 const initMatterResize = () =&gt; {
 if (
 window.innerWidth &gt;= 768 ||
 (window.innerWidth &lt;= 767 &amp;&amp; Math.abs(windowW - window.innerWidth) &gt; 5)
 ) {
 clearTimeout(timeoutId)

 timeoutId = setTimeout(function () {
 initMatter(matterHolder)
 }, 1000)
 }
 }

 window.addEventListener('resize', initMatterResize)

 return () =&gt; {
 Engine.clear
 Runner.stop
 window.removeEventListener('resize', initMatterResize)
 clearTimeout(scrollTimer)
 }
 }, [])

 return (
 &lt;&gt;
 &lt;div className={`${styles.matter}`} data-html-matter&gt;
 &lt;div className={`${styles.observer}`} id='observer'&gt;&lt;/div&gt;
 &lt;img
 className={`${styles.logo}`}
 src='/images/top/matter/logo.svg'
 data-object='obj1'
 data-circle
 alt=''
 /&gt;
 &lt;img
 className={`${styles.team}`}
 src='/images/top/matter/team.svg'
 data-object='obj2'
 data-circle
 alt=''
 /&gt;
 &lt;img
 className={`${styles.yoku}`}
 src='/images/top/matter/yoku.svg'
 data-object='obj3'
 alt=''
 /&gt;
 &lt;img
 className={`${styles.build}`}
 src='/images/top/matter/build.svg'
 data-object='obj4'
 alt=''
 /&gt;
 &lt;img
 className={`${styles.member}`}
 src='/images/top/matter/member.svg'
 data-object='obj5'
 alt=''
 /&gt;
 &lt;img
 className={`${styles.product}`}
 src='/images/top/matter/product.svg'
 data-object='obj6'
 alt=''
 /&gt;
 &lt;img
 className={`${styles.service}`}
 src='/images/top/matter/service.svg'
 data-object='obj7'
 alt=''
 /&gt;
 &lt;/div&gt;
 &lt;/&gt;
 )
})

MatterArea.displayName = 'MatterArea'</code></pre> <code>MatterArea.module.scss</code><pre><code>@use '../variable' as v;
@use '../mixin.scss' as r;

.observer {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 1px;
 height: 1px;
 opacity: 0;
 pointer-events: none;
}

.matter {
 width: 676rem;
 height: 500rem;
 background-color: #fff;
 border-radius: 20px;
 overflow: hidden;
 position: relative;

 canvas {
 position: absolute;
 z-index: 1;
 left: 50%;
 bottom: 0;
 width: 100%;
 height: 100%;
 transform: translateX(-50%);
 background-color: transparent;
 }

 [data-object] {
 position: absolute;
 border-radius: 5px;
 background: rgba(0, 0, 0, 0.05);
 pointer-events: none;
 opacity: 0;

 * {
 pointer-events: all;
 }
 }

 [data-object='obj1'],
 [data-object='obj2'] {
 border-radius: 50%;
 }

 @include r.mq(mdless) {
 border-radius: 0;
 width: 390rem;
 height: 500rem;
 margin-left: -28rem;
 margin-top: -156rem;
 }
}</code></pre> 少し長いですが、全体像はこんな感じです。cssはCSS Modulesであててます。読めば大体わかるはずなので、肝心なところを取り上げて説明します。

全体のソースコード

Matter.jsは、ブラウザのDOMのレンダリングサイクルのタイミングに合わせて、物理エンジンのアニメーションを実行する必要があります。 Reactでは、useEffectはレンダリング後に実行されるため、物理エンジンのアニメーションが描画される前に実行されてしまう可能性があります。これにより、描画される前に計算された位置に物理オブジェクトが表示されたり、描画が一時停止したりするなどの問題が発生する可能性があります。 一方、useLayoutEffectは、ReactがDOMのレンダリング前に呼び出す関数であり、物理エンジンのアニメーションを描画する前に実行されます。これにより、物理エンジンが正確な位置でアニメーションされることが保証されます。

useEffect内ではなくuseLayoutEffect内で実行する

<pre><code>return () =&gt; {
 Engine.clear
 Runner.stop
 window.removeEventListener('resize', initMatterResize)
 clearTimeout(scrollTimer)
}</code></pre> 上記のクリーンアップ関数内で物理エンジンをクリアしたり、イベントリスナー、タイマーを除去してます。アンマウントされる際にリソースの解放を行う必要があるのでこれは大事な処理です。

クリーンアップ関数を書く

Reactで動かすためにすること

パフォーマンス改善のために、画面内でのみ物理エンジンを実行するようにしました。<pre><code>if (typeof window === 'object') {
 // 画面内で物理エンジンを実行
 if (window.IntersectionObserver) {
 const observer = new IntersectionObserver((entries) =&gt; {
 for (const e of entries) {
 if (e.isIntersecting) {
 if (!matterHolder.classList.contains('is-active')) {
 initMatter(matterHolder)
 }
 } else {
 // console.log('out');
 }
 }
 })

 const observerEl = document.querySelector('#observer')
 observer.observe(observerEl)
 }
}</code></pre> <a href="https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener noreferrer">Intersection Observer API</a>を使います。#observerの要素が画面に入ってきてるかどうかで判定しています。[data-html-matter]の要素に<code>.is-active</code>がついてない時に、<code>initMatter</code>を実行してます。initMatterの関数内で.is-activeが付くので、2回目以降は実行されないようにしています。

画面内でのみ物理エンジンを実行する

<pre><code>const allBodies = Composite.allBodies(engine.world)
const scrollY = window.scrollY

const scrollEvent = () =&gt; {
 const scrollDelta = window.scrollY - scrollY

 allBodies.forEach((body: Matter.Body) =&gt; {
 if (body.label === '_noMap') {
 return
 }

 if (Math.floor(scrollDelta) % 5 === 0) {
 Body.applyForce(
 body,
 { x: body.position.x, y: body.position.y },
 {
 x:
 (Math.floor(Math.random() * 2) === 0 ? -1 : 1) *
 Math.random() *
 0.01,
 y: -0.047,
 }
 )
 }
 })
}</code></pre> <code>allBodies.forEach</code>でWorld内の要素をループで回します。<code>scrollDelta</code>でスクロール幅を計算してます。スクロールのスピードはブラウザで確認しながら調整しました。<code>Body.applyForce</code>で要素を動かすことができます。y軸は固定ですが、x軸はランダムに動くようにしました。<code>Math.floor(scrollDelta) % 5 === 0</code>ちなみにこれ←を書かないと要素が無限に上に消えていきます。(ここは調整)

スクロールで要素が動くようにする

<pre><code>const render = Render.create({
 element: matterHolder,
 engine,
 options: {
 width: width,
 height: height,
 background: 'transparent',
 wireframes: false,
 pixelRatio: 5,
 },
})</code></pre> 画質が悪い場合、<code>pixelRatio: 5</code>を指定すれば治ります。解像度の設定ですね。高く設定しすぎると端末が対応していなくてmatter.jsの表示自体されなくなるので注意です。

画質が悪い場合にすること

時間がなくてかなり駆け出しで説明しましたが、分からないところや聞きたいこと、間違いなどがあればTwitterなどで何なりと聞いてください。

BuildersIO produced by YOKU

さいと

さいとが執筆した記事

Go言語における並行処理のベストプラクティス

物理エンジンライブラリ「matter.js」を使って要素が動くリッチなアニメーションを作ってみた

OpenAPIの運用コスト下げたい。

Apacheでオレオレ証明書を発行して自分を証明したい

OpenAIとDeeplのAPIを使ってChatGPTのCLIツール作ってみた

OpenAPIの運用コスト下げたい。

Apacheでオレオレ証明書を発行して自分を証明したい

OpenAIとDeeplのAPIを使ってChatGPTのCLIツール作ってみた