こんにちは！侍ブログ編集部のハナキノボル（@novl_h）です！

突然ですが、プログラミング学習者にとって、モチベーションってすごい大事ですよね。

モチベーションの維持の仕方って色々あると思います。

その中でも一番いいのは、そのスキルを習得した後の姿、つまり

「こんなことができるようになってこんなモノが作れるようになる！」

っていうイメージを湧かせることだと思うんです。

JavaScriptだったら

「JavaScriptを勉強したら、どんなことができて、どんなモノが作れるようになるんだろう」

ということを知ることで、よりイメージを沸かせることができるでしょう。

今回は、そんなイメージの参考になる、JavaScriptを使って作られたWEB作品をまとめてみました。

下記のように、段階に分けて紹介していきます！

JavaScriptは、本当に色々なものを作ることができます。
例を見て、「自分で実装するならこうしたいなぁ」というイメージを持てるようになりましょう！

JavaScriptのみで作った作品

まずは基本的なJavaScriptのみで作られた作品を紹介していきます。

JavaScriptのみの作品は、ソースコードや実装方法についての解説も併せてしているものが多くあります。
イメージだけでなく具体的な勉強にもなるので、どんどん参考にしていきましょう！

JavaScriptでカレンダーを作成する

http://cly7796.net/wp/javascript/create-a-calendar-with-javascript/

JavaScriptのみで、月の切り替えもできるカレンダー作成方法を解説しています。

日付の指定部分などややこしい部分もありますが、コメントを細かく入れてくれているので、コードの詳細がわからなくてもなんとなく理解することができます。

時間があるときにじっくり紐解いていけば、かなりいい勉強になるでしょう。

イヌでもわかるJavaScript講座 - 電卓

http://cya.sakura.ne.jp/java/calc.htm

タイトル通り、超わかりやすく解説をしてくれているサイトの電卓の作り方紹介です。
かなり細かくコメントが入っている上、解説もしっかりしてくれています。

電卓はいろんな言語の初心者練習課題としてよく使われるものです。
ぜひこれを参考にしてチャレンジしてみてください。

JavaScriptでビンゴマシンを作ってみた。

https://qiita.com/Yuta_Fujiwara/items/076b6ea61f456d9649e9

アプリとしても公開しているビンゴマシンです。
効果音までバッチリで、ビンゴマシンとしてはもう100点満点の素晴らしい作品。

ビンゴの数字表示部分に関してはソースも記載しているので、ちょっと見てみると面白いですよ！

ライブラリを使った作品

JavaScriptは、豊富なライブラリも魅力の1つです。

ライブラリとは、JavaScriptのいろんな機能をまとめたファイルのことですね。
これを活用することで、JavaScriptの可能性をぐーんと広げることができます。

ということでちょっとレベルアップ！
ライブラリを使った作品を紹介していきましょう。

phina.jsで15パズル(Sliding puzzle)を作った

http://phiary.me/phina-js-sliding-puzzle-game/

phina.jsというライブラリを使った、作って楽しい、遊んで楽しいパズルゲームです。

これを見つけたとき、JavaScriptでこんな面白いものができるんだ！
とちょっと感動しちゃいました。

しかもソースコードやカスタマイズ例も解説してくれています。
ゲーム開発にチャレンジしたい方は、ここから初めてみるのもいいですね！

JS初心者が超シンプルなチャットを作った

https://qox.jp/blog/biginner_make_a_chat_on_meteor/

Metor.jsというライブラリを使った、ハトをアイコンにしたチャットです。

なんとこれを作ったのはデザイナーさん！
Metor.jsが手軽に使えることがよくわかりますね。

コードもあるので、Metor.jsがどんなものなのか興味がある方は必見です。

番外編：JavaScriptで作られたサービス

最後にちょっと番外編。
JavaScriptで作られたサービスを紹介していきましょう。

この項目で紹介する作品は、ソースなどは紹介されていません。

しかし、サービスの仕様や、どのような流れで開発をしたのかという過程は紹介してくれています。

「JavaScriptでサービスを作ってみたい」
「最終的にサービスとして形になった例が見たい」

という方は要チェックです！

TauStream

http://www.taustream.net/
解説：http://d.hatena.ne.jp/t_yamo/20140427/1398575727

Youtubeを同期再生しながらリアルタイムチャットをすることができるアプリです。
みんなで同じ音楽を聴きながら、チャットができる面白い仕組みになっています。

解説ブログでは、どんな仕様で実装したのかと、チャットの使い方を解説してくれています。

仕様についてはちょっと初心者には難しい内容ですが、「こんなものがあるのか」という参考にちょっと読んでみるのもアリです。

このアプリの構築でメインになっているのが、Node.jsというJavaScriptのツールです。
高速処理が得意なツールで、多数のアクセスに対応することができるという特徴があります。

Node.jsについてもっと詳しく知りたい方は、下記の記事をぜひ読んでみてください。

>>初心者でもわかる！Node.js徹底解説

カグサイズ検索

http://kagusize.com/
解説：https://anond.hatelabo.jp/20120107183443

楽天市場の家具を探すときに、サイズから検索をすることができるサービスです。

製作者はなんと、事務職のサラリーマンとのこと！
ノンプログラマーでもこれだけのサービスが作れるとなると、ちょっと挑戦してみたくなりませんか？

解説ブログでは、サービスを作るきっかけや、どのように問題を分解していったのかなどのフローを紹介してくれています。

サービスを作るという目的でJavaScriptを勉強している方は、ぜひ一度読んでみてください。

まとめ

WEB作品、いかがでしたでしょうか？

プログラミング学習はモチベーション維持がポイントです。スキルを習得したのちの姿をより鮮明にイメージできるようにすれば、より楽しく、より継続的に勉強していけますよね。

やはり楽しくないと勉強は続かないです。

プログラミングで楽しさを感じるのはやっぱり「モノを作り」です。
皆さんもぜひ、この記事を参考に「モノづくり」に励んでいただければと思います！