【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の勉強にもなるのです。ぜひ皆さんもサンプルコードを活用して、爆速で成長しちゃってくださいね。

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


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

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

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

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

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

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

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

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

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

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

cta_js5

LINEで送る
Pocket

書いた人

ナナミ

ナナミ

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

おすすめコンテンツ

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

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