はじめに
こんにちは、筆者です。
最近職場にて分報なるものが流行っているのですが…。
その中で下記のWebサイトが布教されておりまして。
flexboxfroggy.com
見た目もとっても可愛いのと、CSSのflexについて学べるとても良いきっかけになれる素晴らしいサイトで…_:(´ཀ`」∠):
このサイトの作成者は誰だろうと見てみると、どうも特定の作成者が作ったものではなく『Codepip』なるサービスが提供するものの一部の様でした。
codepip.com
Flexbox Froggyが非常に良質なコンテンツだったので、他コンテンツもきっと良質なものを提供しているはず…。
ということで、今回の記事では『Codepip』が提供する他コンテンツをまとめてみようかと思います。
それではいきましょう٩( ‘ω’ )و
Codepipとは
それでは他コンテンツが何があるか…の前に、Codepipさんがそもそも何かについて軽く触れます。
公式サイトの一文によると:
Learn to code by playing games
Codepip is the platform for your favorite web development games. Gain an edge in your next interview or project.
DeepL翻訳:
ゲームでコードを学ぶ
Codepipは、あなたのお気に入りのウェブ開発ゲームのためのプラットフォームです。次の面接やプロジェクトで優位に立てます。
公式サイトより: Codepip | Learn to code by playing games
…とのことです。
実際、Codepipさん上ではFlexbox Froggyの様な様々なコンテンツが提供されており…。
分野もCSSだけでなく、HTMLやJSの学習コンテンツが提供されています。
…しかし、執筆当時(2021/10/18)時点で無料で利用できるコンテンツは:
- CSSの
flexが学べるFlexbox Froggy - CSSの
gridが学べるGrid Garden
…のみとなっています。
そのほかは有料コンテンツとなっており、下記のプランで有料サブスクライブ登録ができる感じとなっています:
- Pro@月額版: 月6$
- Pro@年額版: 年49$
- Pro@一生涯版: 99$1回限り
まぁ99$=大体1000円ちょっとで全部遊べると思えば、かなり良いサービスの様にも思えますね。
ちなみに学生さん(幼稚園〜大学生)であれば30％OFFのプロモーションコードが利用できる様です。
詳しくはこちら
余談:サービス開始時期と運営企業について
一生涯版を買う方が楽で手間もかかりませんが、Codepipさんの運営企業が潰れてしまうとせっかく支払ったお金がもったいなく感じてしまうので…。
有料プランを利用するかどうかの判断基準として、「サービス開始時期」と「運営企業」について調べてみました。
- サービス開始時期: 2019/08/13
- 参考:公式サイトのBlogの最も古い記事から…Introducing Codepip | Codepip
- Flexbox Froggyはもっと前からありそうです…2015年前の不況記事もありました:CSS の flexbox をゲーム感覚で身につけられる Flexbox Froggy がおもしろい « 頭ん中
- 運営企業: Thomas Parkさんという方がリーダーだそうです
- Codepip以外にも様々なプロジェクトに携わられているようです…!
- 参考: 公式サイトのAbout Usページから
調べてみた感じ、ここ数年で始まっているサービスではありそうですが…。
少なくとも2年経過してサービスがCloseする告知もなさそうなので、まだしばらくは大丈夫かなと感じました。
Codepipで提供されているコンテンツの種類
さてお次は、Codepipさんで提供されているコンテンツの種類について見ていきます。
先に述べた様に、Codepipさんは有料版コンテンツもあるので…有料で遊べるのと無料で遊べるのは分けて記すことにします。
※本種類は執筆当時(2021/10/18)時点でのものとなっています。現行とは異なる可能性もありますため悪しからず。
無料で遊べるコンテンツ
無料コンテンツは、先に紹介した2つになります。
- CSSの
flexが学べるFlexbox Froggy - CSSの
gridが学べるGrid Garden
有料で遊べるコンテンツ
有料コンテンツは、下記に紹介する全11種類になります。
- HTML系統: 全2種類
- CSS系統: 全6種類
- CSSの
transformが学べるCSS Surgeon - CSSの
flexが学べるFlexbox FroggyのProバージョンFlexbox Froggy Pro - CSSの様々なセレクターが学べるCSS Scoops
- CSSセレクターの優先度が学べるSelector Showdown
- CSS擬似クラスセレクターの1つ
:nth-child()を学べるNtn Cart - CSSの腕試しコンテンツCascade
- CSSの
- JS系統: 全3種類
- 配列関連のメソッドが学べるDisarray
- 算術演算子&
Mathオブジェクトが学べるCode Crunchers - {近日公開}変数のスコープが学べるSherlock Scopes
なお、新規コンテンツリリース時にはブログかTwitterで告知がある様です。
最新ゲームの状況が気になる場合は、Watch orフォローしておくと良いかもしれません。
おわりに
本記事では、Flexbox Froggyという良質な学習コンテンツの提供元Codepipさんについて調べてみました。
CSSだけでなくHTML、JSの学習コンテンツもあり、有料登録して一通りやってみてしまうのもありかなと感じます。
プログラミングを楽しく学ぶ、という観点ではCODEPREPさんやProgateさんといったサービスもありますが…。
こちらは「プログラミング学習とゲーム」との融合度合が凄まじく、学習しているというよりは「パズルゲームで遊んでいる」感覚になれるのがすごいところだなと。
筆者はまだ有料コンテンツに手を出せてはないですが、出せた時はまた感想をまとめられればいいなと思ってます。
Flexbox Froggyがかなり素敵なコンテンツだったので、他のコンテンツにも期待大です…!
それでは|дﾟ＊)
