カレンダーも電卓もできる!JavaScriptで作られたWeb作品7選

こんにちは!侍ブログ編集部のハナキノボル(@novl_h)です!

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

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

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

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

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

JavaScriptだったら

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

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

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

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

【基礎】JavaScriptのみで作った作品
【基礎】ライブラリを使った作品
【番外編】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についてもっと詳しく知りたい方は、下記の記事をぜひ読んでみてください。

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

カグサイズ検索

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

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

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

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

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

まとめ

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

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

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

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

JavaScriptカリキュラム無料公開中!


この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。

JavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】
更新日 : 2018年12月13日

JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

LINEで送る
Pocket

書いた人

ハナキ ノボル

ハナキ ノボル

侍エンジニア塾ブログ編集長。オウンドメディア運営、コンテンツマーケティング、SEO対策が得意分野です。プログラミングはすべての人が学ぶべきスキルだと思っています。0→1を作り上げるエンジニアはとてもかっこいい職業で世の中のイメージ(3K)を変えたい!と密かに思ってます。現在Swiftを勉強中。音楽鑑賞が趣味で、ライブやフェスによく行きます。
インスタやってます。
ツイッターやってます。
ブログやってます。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説