#CodePenとは
CodePenはHTML、CSS、JavaScriptのコード入力画面と、その結果が表示される画面が一体で操作できるサービスです。
多くの作者がテンプレートを公開していて、自分の環境にフォークして使えます。
今回自分でWebアプリを作るにあたり参考にさせていただこうと調べた中で面白かったものを挙げていきます。
#お気に入りのVue
Vueの説明文は「The Progressive JavaScript Framework」とのこと。普通の説明ですね…
2021/5/21時点でFeaturedされた順に42個を調べてみました。（Like数順にソートする方法を知っている方、教えてくださいm(__)m）
個人的に直近で使えそう・使いたいものに◎をつけています。
凄いな、と思ったものは太字にして上位に持ってきてます。
↑ お絵描きアプリ。基本的な機能は全部揃っていて、ここまでのことができるのか！
↑ カラーコードを指定した段階で刻んでいける。初めて見た形式だけど便利そう。
↑ 仮想通貨の価格ダッシュボード。
↑ ToDoリスト。チェックボックスで文字に取り消し線が引かれ、ごみ箱マーククリックで行ごと消える。デザインがお洒落。
↑ サイバーな感じのナビゲーション。
↑ 色コードをトグルで動かして試せる。
↑ また違った感じのToDoリスト。完了タスクと未了タスクで画面切り替えがある。
↑ ページ遷移。びゅっと右から左に画面がかっこよく切り替わる感じ。
↑ 人名検索。検索文字を入れていくと段々対象が絞られていく。
↑ パタパタとカード型の記事が切り替わっていくモーション。
↑ 文字入力したり消したりすると派手なモーションで表示される。
↑ デジタル表示の時計。かっこいい。
↑ ◎ パタパタ変わる昔の時計風。レトロ。
↑ ◎ タイマー読み上げ。
#おわりに
うーむ、すごいものがいっぱいだ。コードが提供されているのはありがたいので読み進めていきたいです。
でもまずは簡単なものから、ね。。。
おすすめのテンプレートがありましたら是非コメントで教えてください。m(__)m