コーディングはプログラミングでは必要なスキルです。ところが仕事にするためには、スピードアップしないと報酬が伸びていきません。
僕はプログラミング初心者として初めてサイトを作ったのですが、コーディングだけでもかなり時間がかかってしまいました。
その復習としてスピードアップの方法を紹介しますね。
プログラミングで大切なコーディングを勉強するためには、実践で学んだほうがいいと、過去の記事でも紹介しました。
ちなみに過去の記事では仕事の流れをメインで紹介しましたが、今回はコーディングの実践がどんな感じなのか、サイトを自作してみたんです。
初めての自作ホームページ何とか完成しました✨
僕が所属させてもらってる【サロン未満】というオンラインサロンのホームページを、お願いして作らさせてもらった⤴️
まだまだスキル足りないってことが、わかっただけでも儲けものだ👊もっとサイト作っていくぞ😍https://t.co/6KX7nXKgjG
— メガネ🤥ネットビジネス挑戦フリーランス (@sekibiyou1984) March 15, 2019
過去のツイートを見てもらったらわかるように、僕が所属しているオンラインサロンのサイトを作らせてもらいました。
ちなみに仕事の合間でサイトを作っていたそうじゃが、思ったより時間がかかってしまったみたいじゃ…。
これではリアルに仕事をもらった後だと、どこかで迷惑が掛かってしまうのは明白。
そこでどんなところでコーディングに時間がかかってしまったのか、自分で反省のために書きだしてみました。
ちなみにこの記事のメインは、コーディングのスピードアップの方法。
それはこの見出しの下にあるので、目次で読み飛ばしてね！
htmlとcssだけでサイトを作ったらスピードアップが課題と知った
まず僕がサイトを作ったときのスキルを紹介しますね。
先に言っておきますが、このブログのデザインをいじったのがキッカケで、プログラミングに興味を持ったので、スキルといったらcssのデザインをいじる程度のもの。
それ以外のスキルは持ち合わせていませんでした。
そしてプログラミング学習サイトの「ドットインストール」と、「progate」のhtmlとcssの上級編を見て、道場コースは初級のみクリアしています。
そんな状態でよくサイト作る気になったな…なんて思ったでしょうが、実践で学ぶことをwebライター時代で学んでいるので、そのほうが早いと思ったからなんですよね。
cssの知識不足で大きく時間ロス
サイトを実際に作ってみて思ったのが、サイトのデザインにどおりに、コーディングができなかったところ。
htmlはサイトの骨組みに当たるので、そのあたりは特に苦戦はしなかったそうじゃが、cssで時間を取られたらしいぞ！
つまりcssに関しての意識があったとしても、それがどのような働きをするのか、実際に打ち込んでみてもわからなかったのが大きな原因です。
これは完全に経験不足として言えないですが、初めてサイトをいちから作ったわけですから、多めに見ておくとします。
これからサイトを作っていけば、スピードアップしていくと思っておこうかな…。
Googleで検索している時間がもったいない
そしてcssの言語を知らないため、Googleでかなりの時間検索をしていたのを覚えています。
これもかなりのタイムロスになりますよね？
ちなみにプログラミングの先輩方も、わからない部分があったらググるのが普通と、動画を見てみても紹介されていました。
そのあたりは気にしなくていいかな…なんて思っています。
調べる能力が必要だと、プログラミングでかなり稼いでいるマナブさんという方が、動画で紹介していました。
それでもcssに知識不足がひどかったので勉強しておかないと、コーディングのスピードアップはないでしょうね。
ググる力があれば、わからない部分が出てきても、タイムロスにはならないもんな…。
スピードアップにはまだまだ勉強と経験が足りない
つまり結局のところ、今回初めてサイトを自作してわかったのは、以下の3点に限るな！なんて思いました。
- htmlとcssの圧倒的な経験と知識不足
- スピードアップしないと全然仕事にならない
- ググる時間が長すぎて大幅にタイムロスしていた
だからこそコーディングで仕事を取っていくためには、スピードアップをする必要があり、そのためになにをするべきかまとめようと記事にしたというわけです。
自作でサイトを作るメリットなどについては過去で紹介した記事にまとめてあるので、これからプログラミングをしようと思っている人は、参考にしてみてください！
経験はサイトを作っていくうえで、徐々に積み重なっていくものですが、知識は勉強していかないといけませんよね？
この部分が僕には足りていないような気がしました。
前振りが長くなってしまったけど、コーディングのスピードアップには、なにをしたらいいのか調べてみたんだよね。
コーディングのスピードアップに必要なのは前準備
実際にサイトを作ってみて思ったのが、コーディングのスピードアップには、事前に準備しておいたほうがいいものがあったようですね。
何気にしっかり調べて必要なものはそろえたつもりでしたが、まだプログラミングをしている人は、便利なものを使っていました。
僕のコーディングの速度が遅かったのは、これを使っていなかったから…というわけではないよ。
でもあるよりは持っておいてほうが。絶対にスピードアップするものばかりでしたよ。
ブラウザはchromeにするべき！
おはよさん。
気になったサイトのコード覗くのも勉強になりますよ。
Chromeの解析ツールおススメです。— トシオさん@ハイスペックな奇人 (@Toshi_O_Kawa) March 12, 2019
何気に僕は使っていてよかった…なんて思ったのが、インターネットブラウザ。
Googleが提供している「chrome」といわれるものだと、コーディングする以前にWebデザインにも役立ちそうです。
ちなみに同じサロンでお世話になっていて、Twitter内でお世話になっているプログラミングの経験者「トシオさん」にも、助言をもらえました。
chromeは絶対使っておいたほうがいいですね。
それはデベロッパーツールといわれる機能がついているから。
今回はコーディングだけでなく、デザインも最初から考える必要があったので、この機能がかなり役にたったんですよね。
- オシャレなサイトを見つけてくる
- WindowsだとキーボードのF12ボタンを押す
- 赤いhtmlやcssが表示される
これを見ればある程度の構造がわかってしまうので、それを参考に作れたら、デザインを考えなくて済んでスピードアップできました。
ちなみに参考にしたサイトを下に貼っておきますね！
コーディングというよりwebデザインの話になってしましたね。
テキストエディタにスピードアップできそうなプラグイン導入
そして肝心のコーディングのスピードアップのための方法ですが、これはテキストエディタというソフトに、予めプラグインといわれる追加機能を使えばいいようです。
検索してみてわかったので、これを導入したらどれくらいスピードアップするのか楽しみ！
ちなみに僕はatomといわれるフリーソフトを使っています。
フリーソフトなのにたくさんのプラグインが出ており（パッケージと呼ばれています）、以下のものをインストールするだけで、コーディングをしている画面が見やすくなりました。
- Color-picker
- Pigments
- Minimap
- autocomplete-plus
- complete-paths
- atom-beautify
- browser-plus
全部紹介していると大変になってしまうので、参考までに１つだけプラグインを使った画像を載せておきますね。
補助画面がたくさん出てくれるので、かなりコーディングの作業がスピードアップできるでしょう。
atomが人気なのが理解できるね！これだけプラグインがあれば、作業がスムーズになるわ！
徹底的にコーディングするレイアウトを書きだしておく
上記ではツールに関してのスピードアップの方法でしたが、その他にも作業を効率的にできる方法がありました。
それが最初にサイトを作るうえで、レイアウトを決めておくこと。
これだと書かれたようにコーディングしていくだけなので、かなりの時間短縮が期待できるぞ！
もちろんこれができておくと、サイトを作ってほしい人にも、どんなサイトになるのかある程度伝わるからおすすめですよ。
最初からサイトの構成ができているからこそ、コーディングの依頼を受けた後の、イメージトレーニングにもなりますしね。
最初はレイアウトを考えていたけど、途中で面倒になって作りながら、コーディングしてたんだよな…。これがいけなかった！
コーディングの手順を間違いない！先にすべてhtmlを作成！
これは完全に反省点になるのですが、最初はすべて骨組みであるhtmlを作ってから、cssでデザインしていけばよかったと思いました。
これはコーディングのスピードアップとしては基本のようで、すべてhtmlの構造をノートに書いておき、それをいっきにコーディングしていくようです。
そして骨組みができたら画面を分割して、ブラウザとテキストエディタを見ながらデザインしていけば、手間がかなり省けてしまいます。
僕はヘッダーならその部分だけhtmlを書いて、cssを入力していく。
そして足りないと思って、またhtmlを付けくわえるといった手間ばかりかけてしまいました。
各部位ごとにテンプレートを作っておくと早い！
さらに部分ごとに手を加えないように、デザインごとにテンプレートを作っておくのもいいようです。
これは経験がないとわからないところなので、は取り入れられませんでしたが、読んでいてたしかに！と思いました。
テンプレに当てはめておいて最後に微調整すれば、他のコーディングに力を注げるようになりますもんね！
少しずつ自分のテンプレを残しおこうと思いました。その場合に必要なのが、パソコン内のフォルダ整理！
これもできていないと、テンプレを探す時間ができて、スピードアップできません。
ところがこれも過去で記事にして実践できているので安心です。
たくさんサイトを作らないと、テンプレなんて作れないから、もっとサイトを作っていくとするか！
サイトを作ると勉強になる上に喜ばれるから初心者はおすすめ！
反響があってよかった✨プログラミングの力は求めていて、もっと誰かの力になりたいって気持ちが強くなってきた👆
だからドンドンスキルを身に付けていって、早く仕事に結びつけられたらいいな😍いい流れのまま、残っている仕事をこなしていくぞ⤴
おはよっす👋 https://t.co/WGLmbZhNqS
— メガネ🤥ネットビジネス挑戦フリーランス (@sekibiyou1984) March 16, 2019
なんとか最低限ですが、サイトを作れるようになったのは自分の気持ち的に大きいことでした。
しかもサイトを作るだけで、相手に喜ばれるというのはうれしいですね。
仕事というのは本来、相手の役にたって初めて一人前だと思っていますが、ここまで喜ばれると照れてしまいました。
コーディングを仕事にするのが、もっと楽しみなってきたぞ！
サロン未満の皆さんありがとう！サイトを作らせてもらったら、こんなに課題がわかってきたよ！
ドンドンこれからサイト作っていくぞ！Twitterやっていてよかった！
