こんにちは！ ライターのナナミです。
JavaScriptの勉強、はかどってますか？プログラミングの勉強ってなかなか大変ですよね…。かく言う私も、覚えるときはものすごく苦労しました。
そんな私を救ってくれたのが、数多くのサンプルコードです。これを活用することで、ノンコーダーだった私も今ではプログラムをべしべし書いています。今回はそんなサンプルコードをまとめてくれているサイトや、サンプルの活用方法を解説していきますよ！
この記事は下記の流れで進めていきます。
- 【基礎】サンプルコードとは何か
- 【基礎】オススメのサンプルコード集
- 【発展】サンプルコードを活用しよう
サンプルコードを使って、JavaScriptの理解をどんどん深めていきましょう！
サンプルコードとは？
サンプルコードは、名前の通りサンプルとして書かれたコードです。例えば、ボタンをクリックしたら前のページへ戻るという機能を、JavaScriptで実装するとしましょう。
1から書くのは、初心者にはなかなかハードルが高いですよね。そんな時、サンプルコードのサイトなどを見ると…
こんな感じで、コピペで使えるコードを紹介してくれているのです。これを活用することで、1からコードを書かなくてもいろんな機能を実装できるわけですね。
おすすめサンプル集
では、そんな便利なサンプルコードをまとめてくれているサイトを紹介していきましょう！
JSすぐに使えるサンプル集
JavaScriptの基礎の解説から、よく使われる実装例まで紹介してくれているサイトです。各機能を実際に動かしてみることもできるので、色々見て楽しむこともできますね。JavaScriptの基礎的なコードを知りたい方にオススメです。
JavaScript サンプル集 & HTML の基礎
JavaScriptとは切っても切り離せない、HTMLの解説もしてくれているサイトです。項目が細かく分かれているので、お目当のコードを探しやすいのも嬉しいですね。こちらのサイトも、実際に動きを見てみることができます。
JavaScriptだけでなく、HTMLのことも知りたい超初心者さんにオススメです。
JavaScript入門＆サンプル集
サンプル集が基礎編とインタラクティブ編に分かれており、難易度を意識した選び方ができるサイトです。なんと、インタラクティブ編にはゲームのサンプルコードまであります。
遊んでみることができるだけでなく、どのようにして実装されているのかの解説までしてくれている徹底ぶり。基礎はわかってきたので、ちょっと発展したサンプルコードが知りたい方にオススメです。
サンプルコードを活用しよう
前項で紹介したようなサイトからコードをコピペするだけでも十分使えるのですが、サンプルコードはもっといろんな活用方法があります。そう、自分の用途に合わせてカスタマイズしていくのです！サンプルコードはあくまでサンプル。
自分の思ったようなコードが見つからない時もありますよね。そんな時は、自分が思っている動作に近いコードをちょっと書き換えちゃえばいいのです。
カスタマイズするには、その元となるサンプルコードがどのような動きをしているのかをきちんと理解している必要があります。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の勉強にもなるのです。ぜひ皆さんもサンプルコードを活用して、爆速で成長しちゃってくださいね。
