PR

これは面白い!『jsdo.it』で遊びながらプログラムを学ぼう

※広告が表示される場合があります

叉京さんの目がテン

面白くなきゃ頭に入らないよね。
ゆくゆくはアプリ開発ができるようになりたいな〜なんて思ってはみても、どこから勉強したらいいのやら。「勉強するぞ〜!」と意気込んではみても、なかなか継続させるっていうのは難しいものですね。勉強は面白くなきゃ意味がない。
『jsdo.it』はモチベーションアップやプログラミングを学ぶ楽しさを再確認できるサービスでした。

プログラムができなくても楽しさが感じられる

僕個人のプログラミングに関する知識・力量はほとんどない。HTMLとCSS、PHPにすこ〜し触れたことがある程度のもん。まぁ、言うなればエサにたかるハエみたいなもんですね。勉強しようと思っても、なかなか時間がとれないという言い訳をしつつ、ネット上を徘徊してはソースコードを参考にほぼコピペ。安西先生が僕の恩師であればこう言うでしょう。

「まるで成長していない…」

と。時間の使い方が下手くそなんでしょう。しなきゃいけないといという義務感が向上心より強くなってしまうとそれは苦痛に変わっていきます。どうせやるなら楽しんでやらないと。
幸いなことに、現在は僕みたいな素人でもプログラムを学ぶのに義務感ではなく「楽しさ」を見い出せるサービスがたくさんあります。その中でも『jsdo.it』はよし、頑張ろうって思えるサービスでした。

jsdo.itはプログラマー向けのコミュニティサイト

いきなりこんなこと書くと、グッと自分にはまだ手の届かない場所にあるサービスのような気がしてしまいますが「今はできなくても」問題ないんだ。これからなんだ。
『jsdo.it』はHTMLやCSS、Javascriptで書いたコードをそのままウェブ上に保存して公開できるサービスです。

jsdo.itの特徴

  • オンラインエディタでブラウザ上でコードを書ける
  • 他ユーザーが投稿したコードをもとに改良できる
  • コードと一緒に質問を投稿できる
  • 〜jsdo.it『6つの特徴』より要約〜

投稿された作品で遊んでみた

『jsdo.it』に日々投稿されているソースコードをいくつかピックアップしてみました。

顔文字を自由自在にぶん投げる『Gravity Face』

Playタブから顔文字を自由に動かすことができます。

顔文字もこんな風に楽しく動かせるんですね。パソコンのブラウザからも遊べますが、「Readme」にあるように、スマホを縦固定した状態でブラウザアプリから見てみるとスマホの傾き具合に応じて重力が変化します。

じゃんけんしながら押し相撲?『じゃんけんスクイーズ』

じゃんけん勝負に勝ちながら相手陣地にボードを押していくという面白いゲーム。2人対戦にも対応しています。

シンプルだけど、こういったゲームは面白いですね。思った以上に熱中してしまいます。

半端ない果てしなさ…『JSパーティクル崩し』

この絶望感は半端ない。ブロック崩しのパロディ版みたいな感じですね。

崩れるカラーのなんと少なきことか…。全部崩すにはいったいどれほどの時間が必要なんだろう。

なんだかとてもレベルの高いものばかりで遊ぶ分には楽しいけど、自分の力量だとちょっといきなりハードルが高い気がする…。もっとソースコードが少なくて理解しやすそうなものからと思ってちょっと探してみました。

シンプルなショートストーリータイプの『アドベンチャーゲーム』

画像なんかを用意する必要があるので、イラストレーターさんなんかと仲良くなるという条件も必要ですが…。

シナリオの選択肢なんかも考えなきゃいけませんね。でも、こういう風にやれば作れるのかと思わず「なるほど」と興味がグッと湧いてくる。ゲーム作れたら断然楽しいだろうなぁ。

横スクロールな簡易アクション『enchant.jsを使ったサンプルゲーム』

タイミングよくジャンプするだけのシンプルなジャンプアクションゲーム。

この方はドットインストールで勉強されたんですね。なんだか刺激になる。

様々な人のソースコードを見て学ぶ『盗む!』

昔から言われていることですが、見て学ぶというより、見て盗むという表現がしっくりとくる気がします。僕みたいな素人やこれから学ぼうとしている初心者は、どういった仕組みで動いているんだろうという疑問からいろんなソースを見る。
仕組みがわかってくるとそのソースをもとに改良を加えてもっと面白いものが生まれたり。まだそんな域に達していない僕は、指を加えつついつか参加してやるという野望をもって少ない時間を上手に使って学ぼうと向上心をもって勉強に励むことができそうです。

今回紹介したサービスはこちら

jsdo.it – Share JavaScript, HTML5 and CSS

[amazonjs asin=”4048869558″ locale=”JP” title=”プログラマの考え方がおもしろいほど身につく本 問題解決能力を鍛えよう!”][amazonjs asin=”4048863231″ locale=”JP” title=”レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)”]

コメント

タイトルとURLをコピーしました