jsdo.it にある色々なコードを勉強がてら tmlib.js で作りなおしてみました.

せっかくなので作ったコードを紹介したいと思います.

っとその前にプログラミングを学んでいる方向けに, 車輪の再発明×jsdo.it の良さについて軽く書きたいと思います.

Table of contents

• 車輪の再発明って？
• 車輪の再発明×jsdo.it
• サンプル
  • Hexagon Phase 2 – tmlib.js version
  • Fire Effect – tmlib.js version
  • Water Effect – tmlib.js version
  • Ice Effect – tmlib.js version

車輪の再発明って？

車輪の車輪再発明とは, 既存のものをまた改めて作ることを言います. 新たな付加価値がないことから良いニュアンスで使われることはあまりありません.

ですが, プログラミングを学ぶにあたってこれほど効率の良い勉強法はありません.

このブログで何度も述べてきましたが, プログラミングは作ってなんぼの世界です. どんなに本を読もうが, どんなに語ろうが実際に作った経験がなければそれはプログラミングを知らないも同然です.

ただ, ここで一つ注意して欲しいことがあります. それは, ただただ同じコードを書くといった写経は絶対しないでください.

オリジナルの方でどういった処理が行われているのかを理解し, それを自分なりのコードに置き換えながら実装してください.

そうすることで, ちゃんと仕組みを理解しながら開発することができるので やればやるほど自分の引き出しが増えていきます.

さらに自分なりにどういうコードが読みやすいか, キレイかといった 方針も固まっていきます.

使い古されている話しですが, 学ぶはまねぶ(真似る)から来ているという説があります. ネット上にゴロゴロ転がっているサンプルを見ながらガンガン車輪の再発明をして プログラミングを学びましょう♪

up

車輪の再発明×jsdo.it

車輪の再発明について書きましたが, いざネットを見ると色々ありすぎて どれを真似ればよいのか迷うことがあると思います.

良いサンプルが見つかってもそもそもコードが非公開だったり 作っている人とやり取りできなかったり…

そんなときに使えるのが jsdo.it です!!

jsdo.it は, Web 上でプログラミングできるサービスです.

言語は JavaScript なので, コードを見れないなんてことはありません. 開発者も Twitter や GitHub と紐付けされてたりしているので, 気軽にやりとりできます.

更に便利なのが, fork という機能です. これは既存のコードをコピー, 編集できる機能です. つまり jsdo.it で見つけた面白そうなコードを fork すれば, サクッとそこから自分のコードとして編集することができます.

面白いコードがたくさんあるので, ぜひ使ってみて下さい.

up

サンプル

昨日 jsdo.it のサンプルを車輪の再発明したので 紹介します.

既存のコードを理解しつつ, 仕組みのみを真似て tmlib.js で実装し直しています. よかったら参考にして下さい.

Hexagon Phase 2 – tmlib.js version

蜂の巣っぽいサンプル. クリックしたらハチが出てきて飛んでいくとか, 背景いっぱいに敷き詰めたりと色々な派生が考えられますね.

Fire Effect – tmlib.js version

炎エフェクト

Water Effect – tmlib.js version

水エフェクト

Ice Effect – tmlib.js version

氷エフェクト

up