プログラミングがなかなか身につかない
学習をしているけど、自分で書くとなれば思うようにいかなかったり、覚えたはずなのにその使い方や応用方法がわからない人のほとんどが、作り方そのものが間違っている傾向にあります。
今回は、プログラミング初学者や、なかなかスキルアップができない人へ向けた「読むだけでスキルアップできるプログラミングの３原則」をご紹介します。
結果：完成形を想像する
「どういったものが作りたいのか」が定まっていない人は意外にも多く、ただ闇雲にコードを打ち込んだり、理解もしていないものをコピペして満足してしまうことがあります。
それは作りたいものを作ったのではなく、できたものがたまたま良かっただけに過ぎません。これを繰り返していくと、継ぎ接ぎだらけのサイトやシステムになってしまって、全く統一性がなかったり、連動していないことばかりになってしまいます。
ものづくりには以下の三原則があります。
結果 → 設計 → 内容
プログラミングはもちろん、話し方や、ブログやnoteなどの記事作りに関しても同じです。その一番最初の段階である結果（何を作りたいか）が曖昧であれば、既に破綻してしまっているのです。
何を作りたいかは重要
サイト作りで例えてみましょう。
PCで見れば上にあるメニューを「スマホにしたときに綺麗に表示させたい」場合、方法はいくつかあります。
横並び一列のものを二列にしたり、ボタンを押したら格納する仕組みにしたり、文字をアイコンにしたり・・・考えればいくつも出てきます。
このように、どういったものかを決めずに「ただ綺麗に表示させたいから」といった漠然とした状態で進めてしまうと、たまたま見つかったコードを貼り付けて完成ということになってしまいかねません。
サイトによってはどれを選択するかは大きく影響するはずです。もしボタン数が少なければアイコンにしても良いですが、多かった場合アイコンだらけになってしまいますね。
また、二列にすると少な過ぎたり、マウスオーバーするようなメニューにしていれば、下にきたメニューがかぶってしまって見栄えが悪くなるかも知れません。
デザインによってもこれは異なります。事前に「どうするか」は決めて望まなければ、どうしても妥協したものが出来上がってしまうことになるのです。
設計：枠組みを作る
今回のポイントにおいて、最も重要だと言える部分です。
ブログを書くにしても、映画を撮影するにしても、目的を明確にした上でまず設計図を作ります。
もちろんこれはプログラミングでも同じです。
設計ができていなければ、プログラミングは絶対に身につかず、良いものも出来上がりません。これは先に述べたブログや動画作りなども同じで、ものづくりには共通していることなのです。
どう見せれば実現するか
前項の続きでサイト作りで例え、スマホにした時の格納メニューを作るとしましょう。
格納すると言っても、実際に箱の中にしまうわけではありません。ボタンを押したら表示するか非表示にするかというのがほとんどでしょう。
しかし表示非表示だけをとっても、透明度を調整するのか、要素そのものを消してしまうのかでは大きな違いです。
jQueryで実現させるのであれば、簡単なのはtoggle()です。ですが場合によってはshow()とhide()を組み合わせる方が良いのかもしれません。
CSSであれば、opacityを変更するのかtransformでサイズを変更するのかで大きく違ってきます。
見せ方一つをとっても方法は様々で、全く同じような動作でも記述量や処理スピードに大きな差が出ることもあります。
方法は様々だからこそ、実装したときに何が起こっているのかがわかっていなければいけません。
これを頭の中でだけでも良いので、以下のようにまとめていきます。
- 格納したようにみせるために、表示非表示にする
- jQueryでtoggle()を使う
仕組みを考える
jQueryのtoggle()を使って実装することが決まれば、プログラムの仕組みそのものを考えなければいけません。
ここで多いのが、toggle()を使ったコードをそのままコピペして、結果動いたからOKにしてしまうパターンです。
toggle()をするためには、その要素を取得しなければなりません。それが一意のクラスがついているか、IDがついているかによっても取得方法は変わってきます。
また、どういったタイミングでそのプログラムを発火させるかも重要です。クリックなのかマウスオーバーなのかで記述はもちろん違いますよね。
基本的に一意の要素を取得する場合はIDを使うのが一般的なので、今回はID指定でボタンをクリックする仕組みで考えてみましょう。
- ボタンが押されたら
→ IDがbuttonの要素がclickされたら - メニューが入ったボックスを表示であれば非表示、非表示であれば表示にする
→ IDがmenu-boxの要素をtoggle()する
このように動きを細分化していきます。
そうすると、ID〇〇の要素を取得する方法であったり、clickされたら〇〇を実行させる方法を知る必要があるとわかります。
あとは、それぞれを調べて組み合わせていくだけです。
内容：コーディングする
コピペだけでサイトを作ってしまう人、jsやphpを使ってサイトが作れるけどしっかりと理解をできていない人の大半が、前項の設計をすっ飛ばしてコーディングをしてしまっています。
コーディングは、ある程度やることが決まってから着手するのであって、やりながら完成を想像しているのではいけません。
不要なものは書かない
どういった動きにするかが決まっていれば、それに必要な記述だけをします。
しかし、それがわからずにやっている人の多くは全く必要の無い記述を追加していたり、一度で済むことを何度も書いてしまうようなことをしてしまいます。
できるだけ簡潔にわかりやすく、そして軽量なものを書くには何をするかは重要であり、どう動いているのかは最も理解しておかなければなりません。
コードを見直したときに、「ここって何をしているんだろう？」となるようでは、それは身についていないと理解しておきましょう。
動きを辿ることができるようになって、初めて学習の成果があり、自分の作品であるといえるのです。
まとめ
いかがだったでしょうか。
今回は「読むだけでスキルアップできるプログラミングの３原則」をテーマに説明しました。
コードを書いたり、意味を覚えたりすることも確かに学習する上では大切ですが、基本を理解できている人は、この３原則の考え方をするだけで爆発的な成長ができます。
今回重要なポイントをまとめておきます。
- 完成品（結果・結論）を決める
- それに必要な枠組み（設計）をする
- コーディング（内容づくり）をしていく
これから学習をする人や、現在壁に直面している人は、ぜひ参考にしてくださいね。