スライドショースライドショースライドショー

カレンダーも電卓もできる!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作品、いかがでしたでしょうか?

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

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

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

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

ハナキ ノボル

ハナキ ノボル

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

おすすめコンテンツ

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

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