プログラムがどうしても書けないなーといいつつはや5年は経つ。

いろいろと手は出してみるものの、どうしてもコピペで終わってしまうんですよね。つまり、やりたいことを一生懸命ググって、コピペできるサンプルを探す。
よくないよくないとみなさん怒るアレですよ。
CSSとかコピペですませようとすると、「本質を理解してないから絶対ダメだよ！」と言われるアレ。わたしもたくさん言ってきた。

しかし、ことプログラムとなると、ついやってしまう。たぶん、理解しようという気がないんだなーと一瞬思ったのですが、いや待てよ、と少し深堀りしてみた。

■なぜコピペをしてしまうのか

それはズバリ、本質を理解していないからです！

本質を理解すると、きっと言葉をしゃべるようにプログラムが進むのだと思う。
たとえば、わたしがCSSを組み立てていくときは次のような頭の中になる。

えーと、
まずこの.boxに黒2pxの枠線をつけて、内側に余白を5pxとる。
次に、.boxの中のliのリストスタイルを■にして、liの下に10pxの余白をとる。

こんな感じだ。

[HTML]
<div class=“box”>
  <ul>
    <li>田中花子</li>
    <li>青木美保</li>
    <li>川口美沙</li>
  </ul>
</div>

[CSS]
.box{
  border: 2px solid black;
  padding: 5px;
}
.box li{
  margin-bottom: 10px;
  list-style: square;
}

これは、CSSの特性と、できることをすべて理解できているからこういう考え方ができるのだと思う。

たとえば、
・枠線をつけることができる
・枠線の色、太さを決めることができる
・内側や外側に余白をとることができる
という基本的なところだ。

わたしは、プログラムにおけるこういう基礎的なところをすっとばしている。
というか、読めばわかるが自分ではできないのだ。
CSSは解説書なんか読まなくても頭の中にすっと日本語で文章化されたものが入ってきた。
しかし、プログラムはそういうわけにはいかない。
オブジェクトの理解、newの意味など、なかなかパッ見ただけでは理解できない。
（むしろ説明を聞いてもよくわからない。今まで、これらをわっかりやっす！と説明されたことは未だにない）

プログラムを書く人は、わたしがCSSを書くみたいな感じで頭の中を組み立てているのだと思う。

■そもそも考え方自体がわからない

先日、次のようなことをしたかったがいくら考えてもできなかった。

3つの四角が横向きに並んでいて、そのうちひとつには枠線がついている。
この枠線はフォーカスを現し、リモコンの「→」を押すとひとつ右に移る。「←」を押すと、左に移る。

インプットデバイスがマウスやタッチではなく、リモコンだったため、フォーカスされた状態を考えなければならなかったのだ。

jQueryを使ったaddClass()やremoveClass()ぐらいはわかるので、それらでクラスを付け替えてスタイルを変えていこうと思ったが、

・今フォーカスされている四角の位置を取得して、removeClass()する
・その次または前の四角にaddClass()する

というところで詰んだ（笑）。

addClass()などとむずかしい表現をしたが、これもまた事態を混乱させるもととなっている。

この解のひとつに、「今フォーカスされている四角の位置を表す変数をひとつ用意すればよい」という考え方があるが、それは非常にプログラム的なものである。
むしろプログラムのための考え方だ。ふだんの実生活の中で、「これ変数に入れようぜ！」みたいなことを考えることはまったくない。（もしあれば知りたい）
コピペすると本質を理解できない、つまり、それ以上の要求が来たときに、対処できなくなるわけです。
さらには応用が効かないので、自分のやりたいことができない。

まあ、考え方自体がわかっていないのでそれはしゃーない。
訓練するしかないのですがね、はい。

■実際に文章化してみる

では、先の四角3つの例を文章化してみよう。

リモコンの「→」がおされたら
　フォーカスをひとつ右の四角に移動する
　もし右に四角がなければ
　　フォーカスは左端の四角に移動する
そうではなく「←」がおされたら
　フォーカスをひとつ左の四角に移動する
　もし左に四角がなければ
　　フォーカスは右端の四角に移動する

概念的にはこんなイメージだ。

これはきっと技術者でなくても一般成人なら意味はわかるはずだ。
なので、ディレクターやデザイナー、そしてクライアントもみなこの仕様は理解できることになる。
しかし、これだけではプログラムは組めない。
もう少し具体的に文章化していかなくてはならない。

※ちなみにここからあとはプログラムを組むための考え方なので、不要な人は考えなくてもよい。

まず最初の準備が必要。

1. それぞれの四角に番号をつける（左から0、1、2など）
2. フォーカスの位置を表す変数 position を準備し、初期設定として0を代入しておく（position=0）

四角はまず3つあることにしよう。

四角の番号と、position の値が同じになったときにフォーカスする、という仕様を考えた。

0番目の四角にフォーカスしておく
リモコンの「→」がおされたら
　position 番目の四角のフォーカスをはずす
　position+1 番目の四角にフォーカスをつける
　position+1 が 2を超えたら
　　position を 0 に戻す
そうではなく「←」がおされたら
　position 番目の四角のフォーカスをはずす
　position-1 番目の四角にフォーカスをつける
　position-1 が 0未満になったら
　　position を 2 に戻す

シロウト的にはこれで頭がいっぱいだが、実はこれだけではダメである。

「position = position+1;」

という謎のおまじないをしないといけなくて、ここからインクリメントの概念を説明しないといけないのだが、これまたシロウト的にはつらいところであり、うまく説明できないので今回はここまでにしよう（えっ）。

■Webデザインも文章化から？

そんなことを最近考えていたら、Webデザインもそうだよという翻訳記事があがっていた。

いいウェブデザインは文章化することから始める（翻訳記事） — Medium

とても良いと思う。

Webデザインの情報設計、構成について最近すごい壁にぶち当たって考えたことがあるので、それもからめてまた今度。