プログラミング勉強

プログラミングを写経学習するなら合わせてオススメしたいこと!

こんばんは、初心者エンジニアのもも(@momo_programer)です🍀

 

さて今回は、プログラミングを勉強するときに写経(=書き写すこと)して勉強している方向けの話をしようと思います。

 

私も写経しようと思ってしているわけではないけど、書き写して実際に自分でプログラムが動かしてみることが多いので写経学習はとっても良い勉強法だなと思います^^

 

そこで、プログラミングをより早く理解できる写経+αを提案してみようと思います。

 

プログラムの処理に沿った写経で、さも自分で開発している気分に!

写経するにしても、何を教材に写経するべきか迷ってしまうかもしれません。

 

基本的には、開発者のマウスの動きや小技が窺える、動画教材をオススメしたいですね。

 

教材といっても、YouTubeとか、なんでも全然いいのです。

 

YouTubeで開発者の手順通りにただ書きうつしていく。

 

何をしているのか細かく全てが分からなくても、開発者が動作確認したら、自分も動作確認する。

 

そうすることで、「あ!今これをやろうとしてたんだ」と気づきもあれば、自分で開発しているような気分になってとっても楽しいです♪

 

この時、もしそれが退屈で楽しくなかったら、もう少しレベルを上げてもイイかもですね。

 

人間、簡単すぎることやこんなのどこで使うの?というような事にはあまりモチベーションが上がりません。

 

たとえば、学校の理科の授業とか、歴史の授業とか、どこでこれ使うの?と疑問に思うとやる気が出なかった思い出ありませんか?あんな感じですね(笑)

 

もう少し高いレベルのもので勉強してみると、「この技術のここが分かんない!これって基礎の部分の理解が足りないのかも」と自分で気づいて、「必要だから勉強する」に切り替わって爆速で成長できます。

 

話が少し逸れましたが、プログラムの処理の流れを読むことが後々必要になってきます。

 

「このボタンが起爆剤になって、ここのプログラム(関数またアクション)の内容が実行されて、その結果がここに反映される」

 

というロジックを自分の手を動かしながら理解していくといいですよね^^

 

最初の頃は、書く場所があっちへ行ったりこっちへ行ったり目まぐるしく感じると思いますが、

 

そんなときは写経するよりもただ動画を眺めて大きな流れを読むだけでも十分勉強になります。

 

書き上げた写経プログラムの一部を消したらどうなるか。遊びで学ぶ

紙ベースやqiita記事の完成ソースコードを見ながら学習する方だと、具体的な手順がないものも少なくないですよね。

 

そんなときは、とりあえず頭からつま先まで書き上げていいと思います。

 

そしてブラウザで確認。ふむふむ。でも、そこで終わりだともったいないですよね。

 

このソースコードの、どれがどの部分を担っているのか、説明できるレベルが理想ですよね。

 

そのためには、写経したプログラムの一部(例えば関数や、関数の中の一行)を消してブラウザで確認してみましょう。

 

消すと言っても、コメントアウトです。

 

もしかしたら、エラーで表示されないかもしれません。

 

なぜ表示されないのか。ここも消したら表示されるかな。

 

そんな遊び感覚で、プログラムの色んな所をコメントアウトしたり戻したりすると、一つ一つ挙動が分かってきます。

 

これは、より多くのプログラムを含んだソースコードでやってみるといいですね。

 

TODOリストや、計算、お問い合わせフォームなど。

 

写経したものに、console.logを入れてどんな値が入ってくるのか確認

最後に、console.log()で変数の中身を確認することでも学習がぐっと高まります。

 

初心者でconsole.logが何の役に立つのか、どんなタイミングで必要なのか、分かっている人って少ないと思います。

 

しかし、実際現場では、console.logやデバッグが必要不可欠なのです。

 

正しいと思って書いたプログラムが、全然違う結果を返してきた、そもそもプログラムの一部が作動しない、などエラー文だけでは判断がつかない事が多々あり、そんなときにこのconsole.logを使います。

 

使い方としては、基本的には、関数の中で主に使います。function(){}の、{}の中ですね。

 

たとえば、こんな関数があったとします(例のため、①~④の番号をふりました)

 

このプログラムだけでは動きません。

collectItem() {

①const result = [];

②Data.forEach(element => {

③if(element.name.indexOf('momo') != -1) {

④result.push(element);

}

}

これは、Dataという配列の中から条件に一致するものだけ取り出してresultという空の配列の中に入れています。

 

console.logは①~④の下などに入れることできます。

 

①だったら、console.log(result)と書くと、resultが空であることがコンソールやビルドサーバーで確認できます。

 

②だったら、console.log(Data)と書けば、Dataの中身を見る事が出来るでしょう。

 

③だったら、console.log(element.name)と書けば、Dataという配列の要素でnameというキーで繋いでいる値を見れるかもしれません(これはやってないから自信ない笑)

 

④だったら、console.log(result)と書けば、resultの中身が見れるでしょう。おそらく④のときにはresultに条件が一致したものが入っているはずです。

 

こんな感じに使うことで、どこでエラーになっているのか、どこでどんな値を得ているのか、を知ることができるので、理解が進み、エラーの原因を早く見つけられるようになります。

 

まとめ

初級から中級レベルの写経学習+αを書いてみました。

 

写経しながら学ぶこともあるし、写経したあとも学びのチャンスなので参考にして頂けたなら幸いです。

 

結果学ぼうとしている時点でみんな偉いですよね✨

 

世の中勉強したくない人がほとんどなので、どんどんスキルアップして楽にのんびり暮らせるようになっちゃいましょう^^

 

ももの公式メールマガジン

プログラミングに興味がある人やプログラミング学習を始めた人のために、

とっても大切なマインドについて公開しています。

 

私が思うに、マインドが整っていれば、どんな手段から学べます。

 

無料で学習しても、プログラミングスクールで学習したとしても自分の力にしていけます。

 

でもマインドが整っていないと、せっかくプログラミングスクールにお金を払っても、うまくいかなくて泣く思いをしてしまいます。

 

そんな風になってほしくないから、メルマガを始めました。

 

詳細はこちらのページを覗いてみて下さい^^

COMMING SOON...

-プログラミング勉強

Copyright© とある新人SEは、走らない。 , 2021 All Rights Reserved Powered by AFFINGER5.