年末なので超個人的に今年の個人制作とお仕事を振り返ろうと思います。Qiitaでやると会社の宣伝っぽくなっちゃいそうな気もするし、Zennもなんか違うなーって思うので、Crieitで書きます。
まずはプライペートの開発から。UXとかやってた割に、個人で何か作るときはサービス開発とかマネタイズとかあいかわらずガン無視です。おかげで一銭にもなってません。。カモン石油王
リポジトリ: https://github.com/yuneco/mezashi21
記事: VueとPixi.JSでアクションゲーム『ネコメザシアタック』を開発して3年目なのでソースと解説
毎年恒例になってしまった猫の日のゲーム開発。今年はPixiでグラを頑張ったらコード量倍増。
技術的には得るもの大きかったけど、なんかダメなゲーム開発の系譜を辿ってる気もするので来年はやるならもうちょいコンパクトにいきたい。
上記の記事には3年分の変遷をまとめているのでよろしければ見てやってください。
リポジトリ: https://github.com/yuneco/petite-vue-example-game
記事: ゲームを作ってpetite-vueを完全に理解する
なんかVueの新しいのが出たぞ!って話で、とりあえず試してみたかった。
正直普段はVite + TSの方が楽なので、あんまり使い所がないのがちょっと悲しい。
petite-vueについては@ojklabさんが文系大学生のためのpetite-vue入門にまとめてくださっているので気になる方は是非(無料...だと...?)
いい感じになってきた。年内にはリリースしたい pic.twitter.com/bEwiH6fur5
— ゆき (@yuneco) December 19, 2021
リポジトリ(コア): https://github.com/yuneco/symmpaint
リポジトリ(UI): https://github.com/yuneco/miracle-pencil
複雑GUI会のペイントソフト回に触発されて始めたプロジェクトでシンメトリーに特化したお絵かきソフトです。万華鏡とか薔薇窓とか魔法陣とかみたいな、円形に対称な図形が並ぶ表現を簡単に作れます。
コアの機能を生Canvas + TSでゴリゴリ書いて、UIはVueでサクッとつけるアプローチ。アイデア自体はずいぶん昔からあったんだけど、ようやく自分のスキルが追いついて実装できた。でも数学弱いから座標が辛い...。。「エンジニアに数学は必要か?」みたいな話題は毎年一度は出てくるけど、「数学できればもっと踏み込めるのに」って思うシーンは多いので、できるに越したことはないんじゃないかなぁ...。
リポジトリ: https://github.com/yuneco/animation-pulverizer
記事: 😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】
年末恒例のクソアプリです。個人的に最近Qiitaのアドベントカレンダーは業務参加の真面目な記事増えちゃってちょっと面白くないなーって感じてるのですが(情報発信にポジティブな会社が増えてるからいいことなんですけどね、もちろん)、ここだけは相変わらず無法地帯というか、職務もポジションも全部捨ててやりたい放題な感じがすごく好きです。
結果的にこの記事が今年一番ウケた技術ネタになってしまってちょっとやっちまった感もあるのですが、ツイートやはてブのコメントを見る限りネタとして笑いつつ技術的な部分に興味持ってくれた方が結構いたようで、頑張った甲斐はあったと思ってます。
会社の仕事は基本的に受託の業務であんまり外に公表できるネタがないのだけど、その代わり記事をいくつか書いてます。
今年は「バズり狙いはせず、フロント界隈のために自分が必要だと思ったことを書こう」って趣旨で、できるだけ表層的なライブラリとかテクニックとかの話題は避けるようにしてました。まあ結果はお察しなのだけど、それでも良いのです(強がり)
VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門
Processing界隈とフロントエンド業界、近いように見えてあんまりオーバーラップしてなさそうだっので、うまく橋渡しできないかなーって気持ちで書いた記事。もっとフロントの人もクリエイティブな作品作りに触れて欲しいし、Processingから始めた人は是非モダンな環境でパワーアップして欲しい。
あと、個人的にはこのOGP画像は結構頑張って作ったので、可愛いって言ってもらえて嬉しかったです。
もう誤魔化さない!CSS Transform完全入門(2D編)
CSS Transformをちゃんと解説してる情報って意外と少ないなーって思って書いた。transformって結構仕様複雑で普通に使っててハマる落とし穴も多いと思うんだけど、みんなどうやって回避してるんだろう? あんまり伸びなかったけどすぐに古くなる情報ではないので長く誰かの役に立って欲しい。
もう誤魔化さない!CSS Transform完全入門(3D編)
2D編の続きで書いた。正直transformの3Dはイロモノすぎて自分でも微妙だなー、とは思う。でもこの情報は2Dと3Dでセットになってることに意味があると思うので、後悔はしていない(強がり)
jQueryからTypeScript・Reactまで!Viteで始めるモダンで高速な開発環境構築
流行りのネタは書かないといいつつ、これだけは書きたくて書いた。「これはそこそこバズるだろう」って思って書いたものが想像通りにはてブのホットエントリーに載ると嬉しいは嬉しいけどやっぱちょっと微妙。まあでもViteの話題は有益だと思うのできちんと整理した情報を出せたのはよかった、かな。
Twitterかどこかのコメントで「今更IEとか、もうよくね?」って言われていて、それについては完全同意です。でもその層にも振り向いて欲しかったんだ。
個人的にはIEを正しく終わらせることはエンジニアみんなの責務だと思うので、2022年は頑張りましょう。
コンポーネントを小さく・きれいに設計しよう Vue Composition APIを活用したコンポーネント分割術
コンポーネントの責務や単一責任の原則、Fat Componentの回避...みたいな設計論の表層をできるだけ実例ベースで柔らかく紹介した記事。難しい理論は私自身あんまり理解できてないっていうのもあるけど、これくらいの柔らかさが読み物としてはちょうどいいと思う。
この記事は実は社内向けの啓蒙の要素もあって、その意味でも個人的にはちょっと頑張った。弊社のようにシステム開発というよりもWeb制作に近い領域で仕事してると、コンポーネントの分割が「ざっくりページ単位」みたいに大雑把になりがちで、見た目とは違う軸でのモジュール設計って中々考える機会がないのです(でも、やらなくていいってわけではないのが問題)。
多分同じような領域で仕事してる他社さんも似た課題持ってるんじゃないかと思う。
プログラミングの幅を広げよう!一段上のPromise活用テクニック
今年最後の記事はPromiseネタ。PromiseはQiitaでちょくちょくトレンドに上がるふんわり概要記事と、『JavaScript Promiseの本』みたいな本格的な本の中間が薄いなー、って思って書いた記事。
Promiseってほんと良くできてて使いこなせると世界が広がるのに、何故かあんまり重要視されてない気がする。モーダル出すのもAPI叩くのも個別のライブラリはあるけど、実際それだけに頼れないケースは少なくないので一度生Promiseと戯れておくのは良いと思います。
そんなに伸びはしなかったけど、意図が伝わった感のあるコメントをいくつかいただけたのが幸い。
ちなみに今年一番伸びたのはBlenderで作ったたまさんでした🐱
Blender入門して1ヶ月かけてようやくここまで…色々粗はあるけど…可愛いから…見て pic.twitter.com/I6fp5TLzL0
— ゆき (@yuneco) August 9, 2021
そんなわけで来年もよろしくおねがいしますー
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント