【コーディングのコツ】WEB製作はイメージが大切。と言う話

f:id:hirotarooo:20191222161619j:plain

「WEB製作で知っておきたいコツとは?」
「プログラミング勉強してるけど、進まない。」
「ちょっとでも楽してコーディングができるようになりたい!」

そんな方におすすめの記事です。

僕は最近初めてWEB製作でお金を稼ぐことができました。
1万円以下の小さな仕事ですが、自分で稼ぐことができたのはすごく自信になります。

そこで今回は、まだ稼いだことが無い初心者の方に向けて、
WEB製作においてイメージすると役に立つだろうコツをご紹介します。

右脳を使おう。(楽しい)

右脳を使うと言うのはどういうことかと言うと、イメージしながらコードを書いていくと言うことです。

そのまんまですね。

例えば、cssを書いていく時にwidthを書くときやheightを書く時にも「高さがこのくらいかなぁ」とかイメージしながら書いていくと作業効率もアップする上に、だんだん楽しくなっていきます。

小説を読むときにも、「文章を読んでいる。」と言う感覚ではなく、「文章に入り込んで物語に入り込む」ようなイメージじゃないと楽しめませんよね。

そんなイメージです。

だからどういう風になるのかな?とか こんな感じかな?とか 予想と結果の往復を楽しめることができたならもっとコーディングが楽しくなるはずです。

人間は5感を使って周りの情報を入手しますが、そのほとんどは視覚です。※ちなみにその次は聴覚が優位に来るらしいです。

考えてみれば、楽しかった思い出でも辛かった思い出でも、そのほとんどが視覚、つまり目で見たことが思い出されますよね。だからコーディングの時も視覚情報を想像しながら楽しむことがおすすめです。

コーディングの流れをつかむべし!

文章の流れをイメージすることも大事です。 ここでは、大きな流れと小さな流れの2つをイメージすると良いでしょう。

まずは大きな流れをイメージしてみて、その次に小さな流れをイメージします。

HTMLだと、大きなフレームを先に書いてしまって、その次に小さな中の情報を書いていくとイメージしやすいです。

カレーライスを作る時を考えてみてください。まずは カレーのルーと、ご飯をそれぞれ別の物と考えて作り始めますよね。玉ねぎとかニンジンを切っている時にもおそらく無意識ですが、それはルーの方の具材であると認識して作っているはずです。

そんな感じで大きな流れと小さな流れを分けた上で書いていくとスッキリしたコードができると思います。

ここでも視覚情報を活かしてイメージして作っていくとラクにコードを書くことができると思います。

HTMLでもCSSでもJavaScriptでも、それぞれのコードに流れがあると思うので、それをつかむよう事を意識してみてください。

まとめ:イメージを武器にしよう!

f:id:hirotarooo:20191222164601j:plain

視覚を有効に活かす。
流れをイメージする。

以上の二つを紹介しましたが、ふたつとも頭の中で簡単にできることなので試してみてください。

間違ったイメージをしてても大丈夫です。逆に 間違ってもいいから「こんな流れかな?」とか「こんな風になるかな?」とか。とりあえずやってみることが大事です。

イメージをふくらましながらコードを書いていくことによって段々といい感じの自分だけのイメージがつかめるようになると思うので、、