[Javascript] 初心者がプログラミングを学ぶ時の学習効率を考える話（サンプル編）

Javascript学習（プログラミング学習全般）で、最も重要なのは、いかにたくさんのコードに触れて自分で設計して、構築するかです。 自分がこんな機能が思ったら、その思った通りの結果が出せるプログラミングができるようになるというのが、初心者を脱するポイントでもあります。 プログラミングを始めた最初の頃は、「何故かわからないけど、できた。」とうだけで満足していたけど、コードを書けば書くほど理解が深まる感覚が持てるようになってきました。 というわけで、このブログでこれまで書いてきたJavascriptのプログラムをサンプルとしてまとめてみたので、参考にしてみてください。

もくじ

1. オブジェクトデータのコピー
2. 時間をウェイトさせる方法
3. エレメントの座標を取得
4. エレメントのサイズを取得
5. 現在時刻を文字列で得る
6. DOMコード・ライブラリ
7. 文字入力すると文字コードを表示するツール
8. 初心者トレーニング「電卓」
9. evalの返り値についての研究
10. 独自に乱数を作成する
11. 画像の多いページを軽くするスクリプト「lazyLoad.js」
12. Canvas勉強メモ #1「基本構造」
13. Canvas勉強メモ #2「お絵かきツール」
14. Animation調査
15. クッキー処理のスニペット
16. サーバーからのresponse値についての知識を深める
17. 整数値を62進数に変換するプログラム
18. Javascriptの正規表現を理解しよう
19. エレメントをマウスでDRAG移動させるスニペット
20. console関数を使いこなそう

オブジェクトデータのコピー

意外とハマりやすい、オブジェクトデータを別の変数にコピーする時のプチテクニック。 ブログ公開日 : 2014年9月19日 https://blog.myntinc.com/2014/09/javascript.html

時間をウェイトさせる方法

Javascriptの基本機能には無い、sleep機能を独自にコーディング ブログ公開日 : 2014年11月13日 https://blog.myntinc.com/2014/11/blog-post_13.html

エレメントの座標を取得

jQueryなどのライブラリを使わずに、エレメント（要素）の座標を取得する方法をコーディングしてます。 ブログ公開日 : 2015年1月16日 https://blog.myntinc.com/2015/01/jquery_16.html

エレメントのサイズを取得

jQueryなどのライブラリを使わずに、エレメント（要素）のサイズを取得する方法をコーディングしてます。 大した内容ではないですが、当時ブラウザごとに挙動が違っていたので、それらを踏襲するような内容になっています。（いわゆるIE対応） ブログ公開日 : 2015年1月18日 https://blog.myntinc.com/2015/01/jquery_18.html

現在時刻を文字列で得る

タイムスタンプの使い方を学習した時に書いたブログです。 日時の値を取得するのは、古くから書き方が変わっていないですね。 ブログ公開日 : 2015年1月21日 https://blog.myntinc.com/2015/01/jquery.html

DOMコード・ライブラリ

DOM構造をJavascriptのオブジェクトデータで辿っていけるようにした簡単なライブラリです。 自分で改造してもっと使いやすいライブラリとして使うのも良し。 ブログ公開日 : 2015年4月10日 https://blog.myntinc.com/2015/04/javascript-dom.html

文字入力すると文字コードを表示するツール

たまに文字コードを使うときや、エンコードされている文字を判別する時などに使えるツールを作ってみました。 ブログ公開日 : 2015年4月18日 https://blog.myntinc.com/2015/04/javascript_18.html

初心者トレーニング「電卓」

色々な初心者が学習する要素が詰まっている電卓開発のver1.0です。 ブログ公開日 : 2015年8月30日 https://blog.myntinc.com/2015/08/javascript.html

evalの返り値についての研究

電卓でも使われている、eval()について、理解してみました。 そして、脆弱性の可能性が含まれているので、その後Function()を使う方法を覚えるといいでしょう。 ブログ公開日 : 2015年10月21日 https://blog.myntinc.com/2015/10/javascript-eval.html

独自に乱数を作成する

基本機能のrandom関数を使わずに、乱数を作ってみたいと思って、ブログに書いてみた、研究ブログです。 ブログ公開日 : 2015年12月5日 https://blog.myntinc.com/2015/12/javascript_5.html

画像の多いページを軽くするスクリプト「lazyLoad.js」

画像をたくさん使うページで、読み込みが遅延してしまう場合などに使えるようにツールを作ってみました。 ホームページを作る時の参考にもなると思うので、高速化について学びたい人は、読んでみるといいでしょう。 ブログ公開日 : 2015年12月10日 https://blog.myntinc.com/2015/12/javascript-lazyloadjs.html

Canvas勉強メモ #1「基本構造」

ドットインストールのCanvas学習が有料化してしまったので、その時にブログに書いておいた内容が勉強になると思います。 より奥の深いJavascriptにトライしたい人は是非、読んでみてください。 ブログ公開日 : 2016年1月13日 https://blog.myntinc.com/2016/01/html5-canvas-1.html

Canvas勉強メモ #2「お絵かきツール」

Canvas機能を使って簡単なお絵描きツールを作っています。 Webアプリ開発の参考になりますね。 ブログ公開日 : 2016年1月17日 https://blog.myntinc.com/2016/01/html5-canvas-2.html

Animation調査

javascriptでアニメーション操作をする時に必要になる書き方や考え方などをブログに書いています。 ブログ公開日 : 2016年1月18日 https://blog.myntinc.com/2016/01/javascript-animation.html

クッキー処理のスニペット

クッキーを書いたり読んだりする時のコードを独自の関数にまとめてみました。 少し古いコードですが、改良して使いやすくすることで、今でも十分に使えますよ。 ブログ公開日 : 2016年8月6日 https://blog.myntinc.com/2016/08/javascript.html

サーバーからのresponse値についての知識を深める

Javascriptを使ってサーバー連携した場合のデータのやりとりについて調査をしたブログです。 この辺に詳しくなると、Saasサービスなどを作る足がかりになるでしょう。 ブログ公開日 : 2016年8月20日 https://blog.myntinc.com/2016/08/javascript-response.html

整数値を62進数に変換するプログラム

データ軽量化の取り組みで独自に開発した62進数のプログラムを掲載しています。 ブログ公開日 : 2016年8月28日 https://blog.myntinc.com/2016/08/javascript-62.html

Javascriptの正規表現を理解しよう

文字列操作をする時に、痒いところに手が届く正規表現についてレクチャーしています。 ブログ公開日 : 2016年9月1日 https://blog.myntinc.com/2016/09/javascript_1.html

エレメントをマウスでDRAG移動させるスニペット

マウス操作でエレメントを動かす、インタラクティブなホームページが作れる基礎プログラムを紹介しています。 ブログ公開日 : 2016年9月14日 https://blog.myntinc.com/2016/09/javascript-drag.html

console関数を使いこなそう

console.log()はよく使うけど、それ以外はあまり使ったことがない人は、読んでみると開発効率がアップするかも・・・ ブログ公開日 : 2016年10月9日 https://blog.myntinc.com/2016/10/javascript-console.html

あとがき

今回20個の過去ブログを紹介してみましたが、まだまだたくさん書いてあるので、今後も不定期になりますが、学習に繋がりそうな記事を紹介したいと思います。

• 学習カリキュラム編
• 基本編
• Dom操作編
• イベント編
• 非同期編
• 記憶領域編
• 配列操作とオブジェクト操作編
• thisの概念
• サンプル編