こんにちは！侍ブログ編集部のハナキノボル（@novl_h）です！
突然ですが、プログラミング学習者にとって、モチベーションってすごい大事ですよね。
モチベーションの維持の仕方って色々あると思います。
その中でも一番いいのは、そのスキルを習得した後の姿、つまり
「こんなことができるようになってこんなモノが作れるようになる！」
っていうイメージを湧かせることだと思うんです。
JavaScriptだったら
「JavaScriptを勉強したら、どんなことができて、どんなモノが作れるようになるんだろう」
ということを知ることで、よりイメージを沸かせることができるでしょう。
今回は、そんなイメージの参考になる、JavaScriptを使って作られたWEB作品をまとめてみました。
下記のように、段階に分けて紹介していきます！
【基礎】ライブラリを使った作品
【番外編】JavaScriptで作られたサービス
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についてもっと詳しく知りたい方は、下記の記事をぜひ読んでみてください。
カグサイズ検索
http://kagusize.com/
解説：https://anond.hatelabo.jp/20120107183443
楽天市場の家具を探すときに、サイズから検索をすることができるサービスです。
製作者はなんと、事務職のサラリーマンとのこと！
ノンプログラマーでもこれだけのサービスが作れるとなると、ちょっと挑戦してみたくなりませんか？
解説ブログでは、サービスを作るきっかけや、どのように問題を分解していったのかなどのフローを紹介してくれています。
サービスを作るという目的でJavaScriptを勉強している方は、ぜひ一度読んでみてください。
まとめ
WEB作品、いかがでしたでしょうか？
プログラミング学習はモチベーション維持がポイントです。スキルを習得したのちの姿をより鮮明にイメージできるようにすれば、より楽しく、より継続的に勉強していけますよね。
やはり楽しくないと勉強は続かないです。
プログラミングで楽しさを感じるのはやっぱり「モノを作り」です。
皆さんもぜひ、この記事を参考に「モノづくり」に励んでいただければと思います！
JavaScriptカリキュラム無料公開中！
この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。
JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。
JavaScriptを最短で習得したい方へ
弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように
- プログラミング基礎学習
- オリジナルアプリ開発
- 仕事獲得
まで徹底したサポートを行っています。
まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか？
JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。
詳しくは下の画像をクリックして弊社サービス内容をご確認ください。
