初めてサイトを作る人必見!コーディングのスピードアップの方法

コーディング
コーディングはプログラミングでは必要なスキルです。ところが仕事にするためには、スピードアップしないと報酬が伸びていきません。僕はプログラミング初心者として初めてサイトを作ったのですが、コーディングだけでもかなり時間がかかってしまいました。その復習としてスピードアップの方法を紹介しますね。

プログラミングで大切なコーディングを勉強するためには、実践で学んだほうがいいと、過去の記事でも紹介しました。

  1. コーディングで仕事を受ける流れを把握しておけば勉強しやすいよ | メガネ通信

 

ちなみに過去の記事では仕事の流れをメインで紹介しましたが、今回はコーディングの実践がどんな感じなのか、サイトを自作してみたんです。

 

 

過去のツイートを見てもらったらわかるように、僕が所属しているオンラインサロンのサイトを作らせてもらいました

 

ちなみに仕事の合間でサイトを作っていたのですが、思ったより時間がかかってしまったんです。

 

これではリアルに仕事をもらった後だと、どこかで迷惑が掛かってしまうのは明白。そこでどんなところでコーディングに時間がかかってしまったのか、自分で反省のために書きだしてみました。

メガネさん
メガネさん

ちなみにこの記事のメインは、コーディングのスピードアップの方法。それはこの見出しの下にあるので、目次で読み飛ばしてね!

 

スポンサーリンク

htmlとcssだけでサイトを作ったらスピードアップが課題と知った

まず僕がサイトを作ったときのスキルを紹介しますね。

 

先に言っておきますが、このブログのデザインをいじったのがキッカケでプログラミングに興味を持ったので、スキルといったらcssのデザインをいじる程度のもの

 

それ以外のスキルは持ち合わせていませんでした。そしてプログラミング学習サイトの「ドットインストール」と、「progate」のhtmlとcssの上級編を見て、道場コースは初級のみクリアしています。

メガネさん
メガネさん

そんな状態でよくサイト作る気になったな…なんて思ったでしょうが、実践で学ぶことをwebライター時代で学んでいるので、そのほうが早いと思ったからなんですよね。

  1. 底辺WEBライターである僕が収入を少しでも上げる努力をした結果 | メガネ通信

 

cssの知識不足で大きく時間ロス

サイトを実際に作ってみて思ったのが、サイトのデザインにどおりに、コーディングができなかったところ。

 

htmlはサイトの骨組みに当たるので、そのあたりは特に苦戦はしませんでしたが、cssで時間を取られてしました

 

つまりcssに関しての意識があったとしても、それがどのような働きをするのか、実際に打ち込んでみてもわからなかったのが大きな原因です。

 

これは完全に経験不足として言えないですが、初めてサイトをいちから作ったわけですから、多めに見ておくとします。

メガネさん
メガネさん

これからサイトを作っていけば、スピードアップしていくと思っておこうかな…。

 

Googleで検索している時間がもったいない

そしてcssの言語を知らないため、Googleでかなりの時間検索をしていたのを覚えています。これもかなりのタイムロスになりますよね?

 

ちなみにプログラミングの先輩方も、わからない部分があったらググるのが普通と、動画を見てみても紹介されていたので、そのあたりは気にしなくていいかな…なんて思っています。

 

調べる能力が必要だと、プログラミングでかなり稼いでいるマナブさんという方が、動画で紹介していました。

 

 

それでもcssに知識不足がひどかったので、このあたりは復習のために勉強しておかないと、コーディングのスピードアップはないでしょうね。

メガネさん
メガネさん

ググる力があれば、わからない部分が出てきても、タイムロスにはならないもんな…。

 

スピードアップにはまだまだ勉強と経験が足りない

つまり結局のところ、今回初めてサイトを自作してわかったのは、以下の3点に限るな!なんて思いました。

 

  1. htmlとcssの圧倒的な経験と知識不足
  2. スピードアップしないと全然仕事にならない
  3. ググる時間が長すぎて大幅にタイムロスしていた

 

だからこそコーディングで仕事を取っていくためには、スピードアップをする必要があり、そのためになにをするべきかまとめようと記事にしたというわけです。

 

自作でサイトを作るメリットなどについては過去で紹介した記事にまとめてあるので、これからプログラミングをしようと思っている人は、参考にしてみてください!

  1. メリットばかり!コーディングの勉強として自分のブログをデザイン | メガネ通信

 

経験はサイトを作っていくうえで、徐々に積み重なっていくものですが、知識は勉強していかないといけませんよね?この部分が僕には足りていないような気がしました。

メガネさん
メガネさん

前振りが長くなってしまったけど、コーディングのスピードアップには、なにをしたらいいのか調べてみたんだよね。

 

コーディングのスピードアップに必要なのは前準備

実際にサイトを作ってみて思ったのが、コーディングのスピードアップには、事前に準備しておいたほうがいいものがあったようですね。

 

何気にしっかり調べて必要なものはそろえたつもりでしたが、まだプログラミングをしている人は、便利なものを使っていました。

メガネさん
メガネさん

僕のコーディングの速度が遅かったのは、これを使っていなかったから…というわけではありませんが、あるよりは持っておいてほうが絶対にスピードアップするものばかりでしたよ。

 

ブラウザはchromeにするべき!

何気に僕は使っていてよかった…なんて思ったのが、インターネットブラウザ。Googleが提供している「chrome」といわれるものだと、コーディングする以前にWebデザインにも役立ちそうです。

 

ちなみに同じサロンでお世話になっていて、プログラミングの経験者でもある「トシオさん」にも、助言をもらえたので、このブラウザは絶対使っておいたほうがいいなと感じました

 

それはデベロッパーツールといわれる機能がついているから。今回はコーディングだけでなく、デザインも最初から考える必要があったので、この機能がかなり役にたったんですよね。

 

  1. オシャレなサイトを見つけてくる
  2. WindowsだとキーボードのF12ボタンを押す
  3. 赤いhtmlやcssが表示される

 

これを見ればある程度の構造がわかってしまうので、それを参考に作れたら、デザインを考えなくて済んでスピードアップできました。ちなみに参考にしたサイトを下に貼っておきますね!

メガネさん
メガネさん

コーディングというよりwebデザインの話になってしましたね。

  1. SANKOU! | Webデザインの参考サイト集

 

テキストエディタにスピードアップできそうなプラグイン導入

そして肝心のコーディングのスピードアップのための方法ですが、これはテキストエディタというソフトに、予めプラグインといわれる追加機能を使えばいいようです。

 

検索してみてわかったので、これを導入したらどれくらいスピードアップするのか楽しみ!ちなみに僕はatomといわれるフリーソフトを使っています

 

フリーソフトなのにたくさんのプラグインが出ており(パッケージと呼ばれています)、以下のものをインストールするだけで、コーディングをしている画面が見やすくなりました。

 

  1. Color-picker
  2. Pigments
  3. Minimap
  4. autocomplete-plus
  5. complete-paths
  6. atom-beautify
  7. browser-plus

 

全部紹介していると大変になってしまうので、参考までに1つだけプラグインを使った画像を載せておきますね。

 

補助画面がたくさん出てくれるので、かなりコーディングの作業がスピードアップできるでしょう。

メガネさん
メガネさん

atomが人気なのが理解できるね!これだけプラグインがあれば、作業がスムーズになるわ!

 

徹底的にコーディングするレイアウトを書きだしておく

上記ではツールに関してのスピードアップの方法でしたが、その他にも作業を効率的にできる方法がありました。それが最初にサイトを作るうえで、レイアウトを決めておくこと。

 

これだと書かれたようにコーディングしていくだけなので、かなりの時間短縮が期待できます

 

もちろんこれができておくと、サイトを作ってほしい人にも、どんなサイトになるのかある程度伝わるからおすすめですよ。

 

最初からサイトの構成ができているからこそ、コーディングの依頼を受けた後の、イメージトレーニングにもなりますしね。

メガネさん
メガネさん

最初はレイアウトを考えていたけど、途中で面倒になって作りながら、コーディングしてたんだよな…。これがいけなかった!

 

コーディングの手順を間違いない!先にすべてhtmlを作成!

これは完全に反省点になるのですが、最初はすべて骨組みであるhtmlを作ってから、cssでデザインしていけばよかったと思いました。

 

これはコーディングのスピードアップとしては基本のようで、すべてhtmlの構造をノートに書いておき、それをいっきにコーディングしていくようです。

 

そして骨組みができたら画面を分割して、ブラウザとテキストエディタを見ながらデザインしていけば、手間がかなり省けてしまいます。

メガネさん
メガネさん

僕はヘッダーならその部分だけhtmlを書いて、cssを入力していく。そして足りないと思って、またhtmlを付けくわえるといった手間ばかりかけてしまいました。

 

各部位ごとにテンプレートを作っておくと早い!

さらに部分ごとに手を加えないように、デザインごとにテンプレートを作っておくのもいいようです。

 

これは経験がないとわからないところなので、今回は取り入れられませんでしたが、読んでいてたしかに!と思いました。

 

テンプレに当てはめておいて最後に微調整すれば、他のコーディングに力を注げるようになりますもんね!少しずつ自分のテンプレを残しおこうと思いました。

 

その場合に必要なのが、パソコン内のフォルダ整理!これもできていないと、テンプレを探す時間ができて、スピードアップできません。

 

ところがこれも過去で記事にして実践できているので安心です。

メガネさん
メガネさん

たくさんサイトを作らないと、テンプレなんて作れないから、もっとサイトを作っていくとするか!

  1. パソコンで仕事をするならフォルダを整理!おすすめの方法も紹介 | メガネ通信

 

サイトを作ると勉強になる上に喜ばれるから初心者はおすすめ!

なんとか最低限ですが、サイトを作れるようになったのは自分の気持ち的に大きいことでした。しかもサイトを作るだけで、相手に喜ばれるというのはうれしいですね。

 

仕事というのは本来、相手の役にたって初めて一人前だと思っていますが、ここまで喜ばれると照れてしまいました。コーディングを仕事にするのが、もっと楽しみなってきたぞ!

メガネさん
メガネさん

サロン未満の皆さんありがとう!サイトを作らせてもらったら、こんなに課題がわかってきたよ!ドンドンこれからサイト作っていくぞ!Twitterやっていてよかった!