【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.

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

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

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

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

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

組み合わせてみよう

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

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

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

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

まとめ

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

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

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次