https://labs.cybozu.co.jp/blog/akky/tags/bootstrap/ Recent content in Bootstrap on akky@サイボウズラボ・ブログ Hugo ja Fri, 21 Jan 2022 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2022/01/game-of-codes-programming-tools-fantasy-maps/ Fri, 21 Jan 2022 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2022/01/game-of-codes-programming-tools-fantasy-maps/ <p><a href="https://gameofcodes.art/">Game of Codes</a> は、プログラミング技術の人気度を基に勢力争いを架空の地図に表すというプロジェクトです。</p> <p><a href="https://gameofcodes.art/img/goc/2021.jpg"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2022/01/game-of-codes-programming-tools-fantasy-maps/game-of-codes-javascript-frameworks-2021_hu_f4dd12a1b1bcca0.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/01/game-of-codes-programming-tools-fantasy-maps/game-of-codes-javascript-frameworks-2021_hu_c6ad2386a74e2442.webp 740w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2022/01/game-of-codes-programming-tools-fantasy-maps/game-of-codes-javascript-frameworks-2021.png" width="740" height="412" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>フロントエンドJavaScriptライブラリ2021の勢力地図(クリックでオリジナルを表示)がこれ。</p> <p><a href="https://ja.reactjs.org/">React</a> が帝国であるのに対し、<a href="https://angular.io/">Angular</a>, <a href="https://v3.ja.vuejs.org/">Vue</a>, jQuery が王国、<a href="https://svelte.dev/">Svelte</a> が公国なのは「規模感」だそうなので、国名はデータからプログラムが決めているわけではないようです。</p> <p>各国のサイズは過去12か月間の npm でのダウンロード数をベースにしているそうです。</p> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">What if <a href="https://x.com/hashtag/javascript?src=hash&amp;ref_src=twsrc%5Etfw">#javascript</a> libraries were countries?<br><br>Will the <a href="https://x.com/hashtag/React?src=hash&amp;ref_src=twsrc%5Etfw">#React</a> Empire dominate the world? Will the Kingdom of <a href="https://x.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> stop the invasion? Will Kingdom of <a href="https://x.com/hashtag/Angular?src=hash&amp;ref_src=twsrc%5Etfw">#Angular</a> regain its position?<br><br>See Game of Codes project ⚔️<a href="https://t.co/jrX3TOVMJf">https://t.co/jrX3TOVMJf</a> <a href="https://t.co/BXz85tzXCq">pic.twitter.com/BXz85tzXCq</a></p>&mdash; Michal Szymanski (@longevity_os) <a href="https://x.com/longevity_os/status/1480456924579704833?ref_src=twsrc%5Etfw">January 10, 2022</a></blockquote> <script async src="https://platform.x.com/widgets.js" charset="utf-8"></script> <p><a href="https://gameofcodes.art/img/goc/2015.jpg">2015年版の地図</a> と比べると、6年間でも勢力が変化していますね。Ember とか Backbone とか、そんなのあったなあ、という感じです。</p> <p><a href="https://gameofcodes.art/css.html">CSSフレームワークについても同じような架空地図</a>が公開されています。</p> <p><a href="https://gameofcodes.art/css.html"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2022/01/game-of-codes-programming-tools-fantasy-maps/game-of-codes-css-frameworks-2021_hu_e1a666c5fbf50d7c.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/01/game-of-codes-programming-tools-fantasy-maps/game-of-codes-css-frameworks-2021_hu_2a5209a3a44b2dd0.webp 741w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2022/01/game-of-codes-programming-tools-fantasy-maps/game-of-codes-css-frameworks-2021.png" width="741" height="384" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>昔、<a href="https://xkcd.com/256/">SNSの勢力図で似たようなもの</a>がありました。地図の形にすることで詳しくない人に大雑把な関係性が伝えられる場合もあるでしょう。</p>