tag:crieit.net,2005:https://crieit.net/users/yuneco/feed Crieitでユーザーyunecoによる最近の投稿 2021-12-28T19:28:19+09:00 https://crieit.net/users/yuneco/feed tag:crieit.net,2005:PublicArticle/17897 2021-12-28T18:17:57+09:00 2021-12-28T19:28:19+09:00 https://crieit.net/posts/yuneco-2021 <p>年末なので超個人的に今年の個人制作とお仕事を振り返ろうと思います。Qiitaでやると会社の宣伝っぽくなっちゃいそうな気もするし、Zennもなんか違うなーって思うので、Crieitで書きます。</p> <h2 id="個人開発"><a href="#%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA">個人開発</a></h2> <p>まずはプライペートの開発から。UXとかやってた割に、個人で何か作るときはサービス開発とかマネタイズとかあいかわらずガン無視です。おかげで一銭にもなってません。。カモン石油王</p> <h3 id="2021.2 3代目メザシアタック（ゲーム）"><a href="#2021.2+3%E4%BB%A3%E7%9B%AE%E3%83%A1%E3%82%B6%E3%82%B7%E3%82%A2%E3%82%BF%E3%83%83%E3%82%AF%EF%BC%88%E3%82%B2%E3%83%BC%E3%83%A0%EF%BC%89">2021.2 3代目メザシアタック（ゲーム）</a></h3> <p><img src="https://nekomzs21.web.app/ogp.png" alt="" /><br /> <a target="_blank" rel="nofollow noopener" href="https://nekomzs21.web.app/">ネコメザシアタック21</a></p> <p>リポジトリ: <a target="_blank" rel="nofollow noopener" href="https://github.com/yuneco/mezashi21">https://github.com/yuneco/mezashi21</a><br /> 記事: <a target="_blank" rel="nofollow noopener" href="https://qiita.com/yuneco/items/2f23f56acbc8f4e23dff">VueとPixi.JSでアクションゲーム『ネコメザシアタック』を開発して3年目なのでソースと解説</a></p> <p>毎年恒例になってしまった猫の日のゲーム開発。今年はPixiでグラを頑張ったらコード量倍増。<br /> 技術的には得るもの大きかったけど、なんかダメなゲーム開発の系譜を辿ってる気もするので来年はやるならもうちょいコンパクトにいきたい。</p> <p>上記の記事には3年分の変遷をまとめているのでよろしければ見てやってください。</p> <ul> <li>開発環境 Vue CLI</li> <li>言語　TS3.9</li> <li>Vueのバージョン <ul> <li>vue: 3.0.0</li> <li>vue-router: 4.0.0-0</li> <li>vuex: 4.0.0</li> </ul></li> <li>コンポーネントの書き方: Composition API</li> </ul> <h3 id="2021.7 petite-vueのジャンプゲーム（ゲーム・実験）"><a href="#2021.7+petite-vue%E3%81%AE%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%97%E3%82%B2%E3%83%BC%E3%83%A0%EF%BC%88%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%BB%E5%AE%9F%E9%A8%93%EF%BC%89">2021.7 petite-vueのジャンプゲーム（ゲーム・実験）</a></h3> <p>リポジトリ: <a target="_blank" rel="nofollow noopener" href="https://github.com/yuneco/petite-vue-example-game">https://github.com/yuneco/petite-vue-example-game</a><br /> 記事: <a target="_blank" rel="nofollow noopener" href="https://zenn.dev/yuneco/articles/petite-vue-hello">ゲームを作ってpetite-vueを完全に理解する</a></p> <p>なんかVueの新しいのが出たぞ！って話で、とりあえず試してみたかった。<br /> 正直普段はVite + TSの方が楽なので、あんまり使い所がないのがちょっと悲しい。</p> <p>petite-vueについては<a target="_blank" rel="nofollow noopener" href="https://twitter.com/ojklab">@ojklab</a>さんが<a target="_blank" rel="nofollow noopener" href="https://zenn.dev/ojk/books/intro-to-vue">文系大学生のためのpetite-vue入門</a>にまとめてくださっているので気になる方は是非（無料...だと...？）</p> <ul> <li>開発環境 なし</li> <li>言語　JS（ネイティブES Modules）</li> <li>Vueのバージョン <ul> <li>petite-vue 0.2.2</li> </ul></li> </ul> <h3 id="2021.10 miracle-pencil（お絵描きアプリ）"><a href="#2021.10+miracle-pencil%EF%BC%88%E3%81%8A%E7%B5%B5%E6%8F%8F%E3%81%8D%E3%82%A2%E3%83%97%E3%83%AA%EF%BC%89">2021.10 miracle-pencil（お絵描きアプリ）</a></h3> <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">いい感じになってきた。年内にはリリースしたい <a target="_blank" rel="nofollow noopener" href="https://t.co/bEwiH6fur5">pic.twitter.com/bEwiH6fur5</a></p>— ゆき (@yuneco) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/yuneco/status/1472596507929223171?ref_src=twsrc%5Etfw">December 19, 2021</a></blockquote> <p>リポジトリ（コア）: <a target="_blank" rel="nofollow noopener" href="https://github.com/yuneco/symmpaint">https://github.com/yuneco/symmpaint</a><br /> リポジトリ（UI）: <a target="_blank" rel="nofollow noopener" href="https://github.com/yuneco/miracle-pencil">https://github.com/yuneco/miracle-pencil</a></p> <p><a target="_blank" rel="nofollow noopener" href="https://hackmd.io/@jNtaNnvwS_2CVnabY2ILPw/HkV3jIujE?type=view">複雑GUI会</a>のペイントソフト回に触発されて始めたプロジェクトでシンメトリーに特化したお絵かきソフトです。万華鏡とか薔薇窓とか魔法陣とかみたいな、円形に対称な図形が並ぶ表現を簡単に作れます。</p> <p>コアの機能を生Canvas + TSでゴリゴリ書いて、UIはVueでサクッとつけるアプローチ。アイデア自体はずいぶん昔からあったんだけど、ようやく自分のスキルが追いついて実装できた。でも数学弱いから座標が辛い...。。「エンジニアに数学は必要か？」みたいな話題は毎年一度は出てくるけど、「数学できればもっと踏み込めるのに」って思うシーンは多いので、できるに越したことはないんじゃないかなぁ...。</p> <ul> <li>開発環境: Vite 2.6</li> <li>言語:　TS4.4</li> <li>Vueのバージョン <ul> <li>vue: 3.2.16</li> <li>pinia: 2.0.0</li> </ul></li> <li>コンポーネントの書き方: Composition API + Script setup</li> </ul> <h3 id="2021.12 アニメーション粉砕するマン（クソアプリ）※Chrome拡張"><a href="#2021.12+%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E7%B2%89%E7%A0%95%E3%81%99%E3%82%8B%E3%83%9E%E3%83%B3%EF%BC%88%E3%82%AF%E3%82%BD%E3%82%A2%E3%83%97%E3%83%AA%EF%BC%89%E2%80%BBChrome%E6%8B%A1%E5%BC%B5">2021.12 アニメーション粉砕するマン（クソアプリ）※Chrome拡張</a></h3> <p>リポジトリ: <a target="_blank" rel="nofollow noopener" href="https://github.com/yuneco/animation-pulverizer">https://github.com/yuneco/animation-pulverizer</a><br /> 記事: <a target="_blank" rel="nofollow noopener" href="https://qiita.com/yuneco/items/24a209cb14661b8a7a20">😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】</a></p> <p>年末恒例のクソアプリです。個人的に最近Qiitaのアドベントカレンダーは業務参加の真面目な記事増えちゃってちょっと面白くないなーって感じてるのですが（情報発信にポジティブな会社が増えてるからいいことなんですけどね、もちろん）、ここだけは相変わらず無法地帯というか、職務もポジションも全部捨ててやりたい放題な感じがすごく好きです。</p> <p>結果的にこの記事が今年一番ウケた技術ネタになってしまってちょっとやっちまった感もあるのですが、ツイートやはてブのコメントを見る限りネタとして笑いつつ技術的な部分に興味持ってくれた方が結構いたようで、頑張った甲斐はあったと思ってます。</p> <h2 id="仕事で書いた記事"><a href="#%E4%BB%95%E4%BA%8B%E3%81%A7%E6%9B%B8%E3%81%84%E3%81%9F%E8%A8%98%E4%BA%8B">仕事で書いた記事</a></h2> <p>会社の仕事は基本的に受託の業務であんまり外に公表できるネタがないのだけど、その代わり記事をいくつか書いてます。<br /> 今年は「<strong>バズり狙いはせず、フロント界隈のために自分が必要だと思ったことを書こう</strong>」って趣旨で、できるだけ表層的なライブラリとかテクニックとかの話題は避けるようにしてました。まあ結果はお察しなのだけど、それでも良いのです（強がり）</p> <h3 id="VS Code &amp; TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門"><a href="#VS+Code+%26amp%3B+TypeScript%E3%81%A8p5.js%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8B%E3%83%A2%E3%83%80%E3%83%B3%E3%81%AA%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80">VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門</a></h3> <p><img src="https://ics.media/entry/210129/images/eyecatch.png" alt="" /><br /> <a target="_blank" rel="nofollow noopener" href="https://ics.media/entry/210129/">VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門</a></p> <p>Processing界隈とフロントエンド業界、近いように見えてあんまりオーバーラップしてなさそうだっので、うまく橋渡しできないかなーって気持ちで書いた記事。もっとフロントの人もクリエイティブな作品作りに触れて欲しいし、Processingから始めた人は是非モダンな環境でパワーアップして欲しい。</p> <p>あと、個人的にはこのOGP画像は結構頑張って作ったので、可愛いって言ってもらえて嬉しかったです。</p> <h3 id="もう誤魔化さない！CSS Transform完全入門(2D編)"><a href="#%E3%82%82%E3%81%86%E8%AA%A4%E9%AD%94%E5%8C%96%E3%81%95%E3%81%AA%E3%81%84%EF%BC%81CSS+Transform%E5%AE%8C%E5%85%A8%E5%85%A5%E9%96%80%282D%E7%B7%A8%29">もう誤魔化さない！CSS Transform完全入門(2D編)</a></h3> <p><img src="https://ics.media/entry/210311/images/eyecatch.png" alt="" /><br /> <a target="_blank" rel="nofollow noopener" href="https://ics.media/entry/210311/">もう誤魔化さない！CSS Transform完全入門(2D編)</a></p> <p>CSS Transformをちゃんと解説してる情報って意外と少ないなーって思って書いた。transformって結構仕様複雑で普通に使っててハマる落とし穴も多いと思うんだけど、みんなどうやって回避してるんだろう？ あんまり伸びなかったけどすぐに古くなる情報ではないので長く誰かの役に立って欲しい。</p> <h3 id="もう誤魔化さない！CSS Transform完全入門(3D編)"><a href="#%E3%82%82%E3%81%86%E8%AA%A4%E9%AD%94%E5%8C%96%E3%81%95%E3%81%AA%E3%81%84%EF%BC%81CSS+Transform%E5%AE%8C%E5%85%A8%E5%85%A5%E9%96%80%283D%E7%B7%A8%29">もう誤魔化さない！CSS Transform完全入門(3D編)</a></h3> <p><img src="https://ics.media/entry/210519/images/eyecatch.png" alt="" /><br /> <a target="_blank" rel="nofollow noopener" href="https://ics.media/entry/210519/">もう誤魔化さない！CSS Transform完全入門(3D編)</a></p> <p>2D編の続きで書いた。正直transformの3Dはイロモノすぎて自分でも微妙だなー、とは思う。でもこの情報は2Dと3Dでセットになってることに意味があると思うので、後悔はしていない（強がり）</p> <h3 id="jQueryからTypeScript・Reactまで！Viteで始めるモダンで高速な開発環境構築"><a href="#jQuery%E3%81%8B%E3%82%89TypeScript%E3%83%BBReact%E3%81%BE%E3%81%A7%EF%BC%81Vite%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8B%E3%83%A2%E3%83%80%E3%83%B3%E3%81%A7%E9%AB%98%E9%80%9F%E3%81%AA%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89">jQueryからTypeScript・Reactまで！Viteで始めるモダンで高速な開発環境構築</a></h3> <p><img src="https://ics.media/entry/210708/images/eyecatch.png" alt="" /><br /> <a target="_blank" rel="nofollow noopener" href="https://ics.media/entry/210708/">jQueryからTypeScript・Reactまで！Viteで始めるモダンで高速な開発環境構築</a></p> <p>流行りのネタは書かないといいつつ、これだけは書きたくて書いた。「これはそこそこバズるだろう」って思って書いたものが想像通りにはてブのホットエントリーに載ると嬉しいは嬉しいけどやっぱちょっと微妙。まあでもViteの話題は有益だと思うのできちんと整理した情報を出せたのはよかった、かな。</p> <p>Twitterかどこかのコメントで「今更IEとか、もうよくね？」って言われていて、それについては完全同意です。でもその層にも振り向いて欲しかったんだ。</p> <p>個人的にはIEを正しく終わらせることはエンジニアみんなの責務だと思うので、2022年は頑張りましょう。</p> <h3 id="コンポーネントを小さく・きれいに設計しよう　Vue Composition APIを活用したコンポーネント分割術"><a href="#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E5%B0%8F%E3%81%95%E3%81%8F%E3%83%BB%E3%81%8D%E3%82%8C%E3%81%84%E3%81%AB%E8%A8%AD%E8%A8%88%E3%81%97%E3%82%88%E3%81%86%E3%80%80Vue+Composition+API%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%88%86%E5%89%B2%E8%A1%93">コンポーネントを小さく・きれいに設計しよう　Vue Composition APIを活用したコンポーネント分割術</a></h3> <p><img src="https://ics.media/entry/210929/images/eyecatch.png" alt="" /><br /> <a target="_blank" rel="nofollow noopener" href="https://ics.media/entry/210929/">コンポーネントを小さく・きれいに設計しよう　Vue Composition APIを活用したコンポーネント分割術</a></p> <p>コンポーネントの責務や単一責任の原則、Fat Componentの回避...みたいな設計論の表層をできるだけ実例ベースで柔らかく紹介した記事。難しい理論は私自身あんまり理解できてないっていうのもあるけど、これくらいの柔らかさが読み物としてはちょうどいいと思う。</p> <p>この記事は実は社内向けの啓蒙の要素もあって、その意味でも個人的にはちょっと頑張った。弊社のようにシステム開発というよりもWeb制作に近い領域で仕事してると、コンポーネントの分割が「ざっくりページ単位」みたいに大雑把になりがちで、見た目とは違う軸でのモジュール設計って中々考える機会がないのです（でも、やらなくていいってわけではないのが問題）。</p> <p>多分同じような領域で仕事してる他社さんも似た課題持ってるんじゃないかと思う。</p> <h3 id="プログラミングの幅を広げよう！　一段上のPromise活用テクニック"><a href="#%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AE%E5%B9%85%E3%82%92%E5%BA%83%E3%81%92%E3%82%88%E3%81%86%EF%BC%81%E3%80%80%E4%B8%80%E6%AE%B5%E4%B8%8A%E3%81%AEPromise%E6%B4%BB%E7%94%A8%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF">プログラミングの幅を広げよう！　一段上のPromise活用テクニック</a></h3> <p><img src="https://ics.media/entry/211203/images/eyecatch.png" alt="" /><br /> <a target="_blank" rel="nofollow noopener" href="https://ics.media/entry/211203/">プログラミングの幅を広げよう！一段上のPromise活用テクニック</a></p> <p>今年最後の記事はPromiseネタ。PromiseはQiitaでちょくちょくトレンドに上がるふんわり概要記事と、<a target="_blank" rel="nofollow noopener" href="https://azu.github.io/promises-book/">『JavaScript Promiseの本』</a>みたいな本格的な本の中間が薄いなー、って思って書いた記事。</p> <p>Promiseってほんと良くできてて使いこなせると世界が広がるのに、何故かあんまり重要視されてない気がする。モーダル出すのもAPI叩くのも個別のライブラリはあるけど、実際それだけに頼れないケースは少なくないので一度生Promiseと戯れておくのは良いと思います。</p> <p>そんなに伸びはしなかったけど、意図が伝わった感のあるコメントをいくつかいただけたのが幸い。</p> <h2 id="おまけ"><a href="#%E3%81%8A%E3%81%BE%E3%81%91">おまけ</a></h2> <p>ちなみに今年一番伸びたのはBlenderで作ったたまさんでした🐱</p> <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Blender入門して1ヶ月かけてようやくここまで…色々粗はあるけど…可愛いから…見て <a target="_blank" rel="nofollow noopener" href="https://t.co/I6fp5TLzL0">pic.twitter.com/I6fp5TLzL0</a></p>— ゆき (@yuneco) <a target="_blank" rel="nofollow noopener" href="https://twitter.com/yuneco/status/1424785946407424004?ref_src=twsrc%5Etfw">August 9, 2021</a></blockquote> <p>そんなわけで来年もよろしくおねがいしますー</p> yuneco