【JavaScript入門】コピペで簡単!サンプル集紹介と活用法

こんにちは! ライターのナナミです。

JavaScriptの勉強、はかどってますか?プログラミングの勉強ってなかなか大変ですよね…。かく言う私も、覚えるときはものすごく苦労しました。

そんな私を救ってくれたのが、数多くのサンプルコードです。これを活用することで、ノンコーダーだった私も今ではプログラムをべしべし書いています。今回はそんなサンプルコードをまとめてくれているサイトや、サンプルの活用方法を解説していきますよ!

この記事は下記の流れで進めていきます。

  • 【基礎】サンプルコードとは何か
  • 【基礎】オススメのサンプルコード集
  • 【発展】サンプルコードを活用しよう


サンプルコードを使って、JavaScriptの理解をどんどん深めていきましょう!

サンプルコードとは?

サンプルコードは、名前の通りサンプルとして書かれたコードです。例えば、ボタンをクリックしたら前のページへ戻るという機能を、JavaScriptで実装するとしましょう。

1から書くのは、初心者にはなかなかハードルが高いですよね。そんな時、サンプルコードのサイトなどを見ると…

画像:サンプルコード

こんな感じで、コピペで使えるコードを紹介してくれているのです。これを活用することで、1からコードを書かなくてもいろんな機能を実装できるわけですね。

おすすめサンプル集

では、そんな便利なサンプルコードをまとめてくれているサイトを紹介していきましょう!

JSすぐに使えるサンプル集

引用元:JSすぐに使えるサンプル集 http://www.shurey.com/js/samples/index.html

JavaScriptの基礎の解説から、よく使われる実装例まで紹介してくれているサイトです。各機能を実際に動かしてみることもできるので、色々見て楽しむこともできますね。JavaScriptの基礎的なコードを知りたい方にオススメです。

JavaScript サンプル集 & HTML の基礎

引用元:JavaScript サンプル集 & HTML の基礎 http://www9.plala.or.jp/oyoyon/html/

JavaScriptとは切っても切り離せない、HTMLの解説もしてくれているサイトです。項目が細かく分かれているので、お目当のコードを探しやすいのも嬉しいですね。こちらのサイトも、実際に動きを見てみることができます。

JavaScriptだけでなく、HTMLのことも知りたい超初心者さんにオススメです。

JavaScript入門&サンプル集

引用元:JavaScript入門&サンプル集 http://plusone.jpn.org/javascript/index.html

サンプル集が基礎編とインタラクティブ編に分かれており、難易度を意識した選び方ができるサイトです。なんと、インタラクティブ編にはゲームのサンプルコードまであります。

遊んでみることができるだけでなく、どのようにして実装されているのかの解説までしてくれている徹底ぶり。基礎はわかってきたので、ちょっと発展したサンプルコードが知りたい方にオススメです。

サンプルコードを活用しよう

前項で紹介したようなサイトからコードをコピペするだけでも十分使えるのですが、サンプルコードはもっといろんな活用方法があります。そう、自分の用途に合わせてカスタマイズしていくのです!サンプルコードはあくまでサンプル。

自分の思ったようなコードが見つからない時もありますよね。そんな時は、自分が思っている動作に近いコードをちょっと書き換えちゃえばいいのです。

カスタマイズするには、その元となるサンプルコードがどのような動きをしているのかをきちんと理解している必要があります。1つ1つの記述をしっかり確認して、自分のイメージ通りの動作にしちゃいましょう!

カスタマイズしてみよう

下記のコードはサンプルにあったサイコロを振るコードです。

See the Pen sample1 by 河野七海 (@kouno73) on CodePen.0

サイコロは普通6面なのでこれでバッチリですが、10面サイコロが振りたい時には使えませんね。ということで、値をちょっと変えてみました。

See the Pen sample2 by 河野七海 (@kouno73) on CodePen.0

これで10面サイコロが振れるコードになりましたね!このように、ちょっと値を変えてあげたりするだけでも、自分の期待通りの動きにすることができます。

サンプルコードになかった…

と落ち込まず、自分の思う通りに動くようカスタマイズして使っちゃいましょう!

組み合わせてみよう

値などをちょっと変える以外にも、他のコードを組み合わせるというカスタマイズの方法もあります。

例えば、ボタンを押すと文字が表示されるサンプルコードと、現在の時刻を表示するサンプルコードを組み合わせてみましょう。

See the Pen sample3 by 河野七海 (@kouno73) on CodePen.0

ボタンを押すと、現在の時刻が表示されますね。このように、それぞれのサンプルコードを組み合わせるだけでも幅が広がりますね。ぜひいろんな組み合わせを試してみてくださいね。

まとめ

いかがでしたか?サンプルコードは便利ですが、いざ使うとなると地味に知識が必要になってきます。

しかし、それがサンプルコードの魅力。サンプルコードがどのような処理をしているのかを紐解くことで、JavaScriptの勉強にもなるのです。ぜひ皆さんもサンプルコードを活用して、爆速で成長しちゃってくださいね。

LINEで送る
Pocket

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

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

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

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

cta_under_bnr

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

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。