【ネタバレ】素直に「すぎょい！」と思ったサイトのソースコードを模写してみると良いです。
※僕が説明する模写と、エンジニアの皆さんの模写の意味が違うそうです。
◇僕が説明する模写➡️ソースコードをエディターにそのまま書き写すこと。
◆プログラミングでの模写➡️参考サイトをイチから自作するor近い内容のサイトを作ること。
本記事では、以下の内容を解説します。
本記事の内容
・Progate(プロゲート)をやってみる。
・Progateで行った内容をエディターに模写してみる。
※コードも著作物ですので自身の勉強にのみ活用させていただきましょう。
・上記２つを行ってみて「面白かったら」続けてみる。
※面白くなかった場合は…別の学習をしてください。
この3つがプログラミング初心者の勉強法として重要です。
この記事を読むと分かること
1.プログラミングの知識はこれからの時代必要です。
2.練習はひたすら地味。コードを書き書きしてみる。
3.@manabubannai「マナブ」さんにおんぶに抱っこで恐縮ですが、先人が後輩の為に作ってくださったご好意に思いっきり甘えて勉強すると良いです。
この記事を書いている人
ブログを書いていると、嫌でもHTML、CSSをちょっと触ります。
なんならPHPも。
どうせなら「プログラミングも少し詳しい」状態になった方が、ブログも自身の武器にもなりますので今特にやりたいことがなかったり、ハマっているものがない人は暇つぶしにプログラミングを学んでみてはいかかでしょうか？
もくじ
プログラミングに詳しいと人材の価値が上がる
プログラミングを学ぶことは時代の流れに乗ることだと先人は言います。僕もその理由に納得していて、今の時代どの職業でもPC(パソコン)を使うと思います。
プログラミングって聞くと「頭の良い専門的な知識人しか触れない」とイメージしがちですが、やってみると面白いです。
少し前まで一人一代スマホを持つなんて想像できなかったと思いますが、今まさに当たり前になりましたよね。
こんなノリでプログラミングも当たり前になってくるんじゃないかな？と思います。
別にエンジニアにならなくても良いと思いますが、知っていると人材としての価値は上がるはずです。
では、時代に合った価値ある人材になるためにプログラミングを学ぼうと思ったらどうすべきでしょうか。
答え➡️Progateとエディターを一緒にやる
まず、Progate(プロゲート)をやってみると良いです。
言語(プログラミングで使用する環境の種類)がたくさんあります。
最初は、HTML&CSSから手を付けて、徐々に他の言語に着手していけば良いと思います。
ProgateはPCを使ってWeb上からでも、アプリとしてスマホからでもプログラミングの勉強ができます。
RPGのゲーム感覚で、レベルを上げながら様々な言語を学ぶことができます。
PCかスマホか？どっちがおすすめ？と言われると、コードを書くPC版の方がおすすめです。
スマホでもプログラミングについて学ぶことができますが、実際に手でタイピングした方が記憶に残りやすいです。
運動性記憶に働きかけ、少しでも効率良く吸収したい場合はPC版をおすすめします。
また、Progateをやってみて「これは面白い！もっとやってみたい！」という場合には、マナブさんが作成してくださった「【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】」がおすすめです。
「プログラミングをやってみたい！」と思った人に合った最高の学習環境だと思います。
エディターの使い方についても詳しく解説されていますので是非チャレンジしてみてください。
ではやっと本題です。
ここまでだと「おめー、さっきからおすすめの練習方法と言いながら、Progateをやれってしか言ってねえじゃねえか。」って思われるのでプログラミング初心者におすすめな練習方法を解説します。
プログラミング初心者がどうやって効率良く練習するか？
エディターにソースコードを模写する
実際に僕も行っている練習です。
Sublime Textをインストールしてエディターを開きます。
Sublime Textをインストールするまでが割と難関だと思います。厳しい言い方をすると、「ググってみて個人でインストールまで完結できないと今後厳しい」と思いますので、何がどう難関なのかは割愛します。
やってみると「おお…マジでやべえな…」そう感じると思いますが、やるしかありません。どっこいしょ。
インストール方法はマナブさんが作成してくださった【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】に記載されていますのでそちらから設定してください。
気に入ったサイトを見つける為に方法はいくつかありますが、まずいろんなWebサイトを見て「うわ！このサイトかっこいいな！」というサイトを見つけてください。
そのサイト上で、
Macなら「option + command + U」
Windowsなら、「Ctrl+U」
を実行してソースコードを見ます。
こんな感じでどこかサイトのトップページを探します。(別にかっこよくないサイトですみません。僕がもう一つ書いてるサイトです。)
そこから、先ほどの方法でソースコードを見ます。
Macなら「option + command + U」
Windowsなら、「Ctrl+U」
こういうやつですね。
ここからエディターを開いて、最初から手書き(タイピング)で模写をしていきます。
このソースコードの中にはHTMLやCSS、JavaScriptなど様々な言語が入り乱れた状態で表示されます。
最初は何がHTMLなのかJavaScriptなのか判別できないと思いますが、ちょっと書いていくと「ほほう？もしやこれがJavaScriptで、これがTHMLではないですかな？」とだんだん分かるようになってきます。
あとはこれを「書いていて楽しい所だけ」模写していきます。
僕はJavaScriptがチンプンカンプンなので飛ばしています。
PCの画面を二分割(左右別々のページを開く)しながら、どちらかに模写したいページのコードを表示して、もう一方のページにエディターを開けばOKでござる。
こんな感じで「意味不明な部分は飛ばしながら書けるところを書いてみる」 をこなしながら、「もうお腹いっぱいです…」というところまで進めたら、「一休みしてProgate(プロゲート)に戻る」を繰り返したらOK!!
正直プログラミングについては全く権威性(説得力)が無い僕ですが、断言します。プログラミング学習は、Progateとエディターへの書き込みを同時に行うとProgateだけ進めている時より理解できます。
Progate＋エディターへの書き込みを同時並行作業とすることで理解力が上がりました。詐欺でもなく、ほんとうに。「再びProgateに戻った際の理解度が半端ない…」自分はそう思います。(個人差があるのであくまで個人の感想です。)
正直、始めたてだと何かどのコードなのか見当もつきませんが、予め完成された見た目の良いサイトを見ながら手書きすることで、「ここはこうなっているんだ。」とか、Progateをやっている時に「あ！これさっき手書きしたやつだぞ！」という感じで、学習から近い間隔で再度復習を行うことができるのでおすすめです。
一つのやり方でも良いのですが、個人で予習と復習を効率良く完結できるという点が、非常にポイントが高いのです。
個人的な話ですが、今自分に課しているミッションとして、自分の作ったサイト(主にCMSのWordPress様々なのだが…。)の全てのコードを模写するという課題をクリアして、次に進もうかと思います。
英語学習で言うところの、ライティングは未熟だけどヒアリングは少し分かるという状態を目指しています。
では、プログラミングを学ぶと実際に何に役に立つのでしょうか。
職を選べる！自分の選択肢が広がる
IT業界は人手不足だと言われています。
流行り廃りの流れが早い業界なので、常に最新の技術を扱える人が重宝されます。
ここで一つ勘違いするべきではないのは、「IT業界なら技術さえ持っていれば安泰だ」ということです。
余談になりますが、最新技術を扱える人材が重宝されるのであって、今まで通りのプログラミングが通用するとは言えないのです。
しかしながら、今まで通りのプログラミングさえ分からない状態だと、最新の技術なんて全く理解できません。
Google、Facebook、メルカリ、Amazonなど、名だたる企業はITに関わっています。
これらの企業が世界を動かしていますし、順調に売り上げを伸ばしているということは近い内容の仕事が今後も儲かる仕事だと言えます。
そうなると、やっぱプログラミングも候補に入ってきます。
Webサービスを作るためにはコードを書いてシステムを動かしますからね。
ということで、IT技術は今後も進化していくので学んでおいて損はないということになります。
プログラミングの需要は形を変えて増えていくので、僕と同じように30代からでもプログラミングを学ぶと仕事を獲得し易くなるのではないでしょうか。
学んで損しない技術を勉強する
プログラミングができると、手に職をつけられます。
しかもパソコン一台とネット環境があれば割とどこでも仕事ができちゃいます。
尚かつ、独立し易いとも言われています。その理由は設備投資(事業を行う際にかかる費用が少ない)が安く済むからです。
プログラミングでできることは、Webサービスを作ったり、通販サイトや企業のホームページを作ったりと、今正に時代が求めている成果です。
しかも今なら特別な資格が必要なく、誰でも参入し易いというハードルの低さも後押ししてくれます。
普通何かビジネスをやろうと思ったら、医者なら国家資格、美容師も国家資格、弁護士も国家資格…普通資格がないとそもそも始められません。
IT系であれば、今はまだ誰でもやる気さえあれば始められるということも大きなメリットです。そのうちもしかしたら、プログラミングも資格を必要とされる可能性があるので、特に必要ない”今”が旬なのかもしれませんね。
もし今、特に夢や希望はないけれど、何か自分の武器が欲しいと思っている人はプログラミングを始めて見るといいと思います。
嫌だったら辞めればいいだけですから、特に損失は発生しません。
人材としての付加価値を高めて引く手数多のビジネスマンになってやろうぜ！
黙っていても仕事のオファーが来るような人材になれると最高です。
そのためには、自宅で独学でき、かつ誰でも挑戦可能な範囲で取り組めるプログラミングやブログがおすすめです。
ながらでも１年くらい続けていくと今まで選べなかった仕事を選べるようになるので、選択肢が増えます。
ここまで来ればより年収を上げたり、自分のライフスタイルに合った仕事を選べます。
ちょっとの努力で３年後をミラクルハッピーに変えてやりましょう。こんちくしょう！
まとめ
記事のポイントをまとめます。
・Progate(プロゲート)をやってみる。
・Progateで行った内容をエディターに模写してみる。
※コードも著作物ですので自身の勉強にのみ活用させていただきましょう。
・上記２つを行ってみて「面白かったら」続けてみる。
・プログラミングの知識はこれからの時代必要です。
・練習はひたすら地味。コードを書き書きしてみる。
プログラミングのスクールに入った方が効率が良いという意見も存在しますし、独学の場合曲解(誤った理解)が発生する場合もあります。
なので最初からお金を支払って正しい知識を効果的に吸収した方が良いという意見にも賛成です。
ただ、内容が全く見えない段階でお金を払ってしまっって後悔するのであれば、ある程度調べる環境が整っている現代なら、まず自分でやってみることの方が重要だと思います。
人って、自分の感情に火が付いて始めて行動できる生き物です。
プログラミングスクールは平均すると20〜30万くらい費用がかかります。それを個人で完結できたらめちゃくちゃかっこ良くないですか？(賛否両論あるので反論は認めます。)
かつ、練習方法としてあっているかは正直不明です。でも手を動かさないと始まらないので動きながら試行錯誤してみたいと思います。やったらやっただけ何か見えるんじゃないかな？と思います。
世の中にはいろいろなノウハウが存在し、どれを選ぶかによって花が咲くまでの時間が変わってきます。しかしながら、どんな良い情報を拾っても、結局どれだけ手を動かし考えたかによると僕は思います。
僕がアホ過ぎるからなのですが、Progateやエディターがあってもどう活かしたら良いのかが分かりにくかったので、この記事を書きました。
と言う訳で、プログラミング学習を個人で始めて、どう練習するか僕がどうやって四苦八苦しているかを書いてみました。
少しでも参考になれば幸いです。
