iSara5th 講座まとめはコチラ

【はにわまんさんに学ぶ】コーディングを早くするためのコツ(iSara5th DAY14)


こんにちは。ホクト(@tomadip)です。

現在、バンコクのノマドエンジニア育成講座「iSara」に第五期生として参加しています。

MEMO
iSaraとは

プログラミング知識の習得とともに「個人経営におけるマインドを学ぶ」ためのプログラム。現役フリーランスとして活躍する方々が講師となり、フリーランスとして生きていくために必要なコトを3週間で学習します。

DAY14.「コーディングを早くするためのコツ」について

本日は、はにわまん(@haniwa008)さんによる最終講座でした。コーディングのスピードをあげ、作業の生産性を高めるためのポイントをまとめています。模写にしろ、実案件にしろ、一つ一つのコーディング機会を「改善の場」ととらえて取り組むと、どんどんスピードや質をあげていくことができます。

 

1:コーディングを早くする3つのメリット

1-1:単価が上がる

極端な例ですが、1日で3万円のコーディングを終わらせられれば、日給3万円の計算になります。

1-2:対応できる仕事量が増える

月に3万円の案件を10件こなせるようになれば30万円、15件なら45万円、とやればやるだけ報酬が上がります。

1-3:クライアントから喜ばれる

設定された納期より早めに仕上げるなど、質を保ちつつスピードを上げられれば信用獲得につながります。

 

2:コーディングが早くなるには?

デザインを見て、どのようにコーディングすれば良いのかがイメージできる状態になるのが理想です。

2-1:頭の中で組み立てる

「どんなHTMLタグの構成で、どのCSSを適用させていけば良いか」をイメージできれば、あとはひたすら手を動かすだけです。これができるようになるためには、基本的には経験を積むしかありません。

MEMO

◾はにわまんさんオススメの上達法

・使ったことがないCSSプロパティは全部使ってみる

・ブログに技術系記事をまとめつつ、ググって実装し動きを確認

・コーディングしたことないパーツを、部分的に模写してみる

2-2:コーディングのルールを決めておく

「クラスの命名パターンを決めておく」など、できるだけ考える時間を減らせるような仕組み化をしておきましょう。

 

①セクション名

MEMO

#header (ヘッダー)

#mv (メインビジュアル)

#content (コンテンツ)

#primary (メイン部分)

#secondary (サイドバー部分)

#footer (フッター)

②クラス名

MEMO

「セクション名+ハイフン+役割」が基本

・画像 ○○ – img

・タイトル ○○ – title

・コンテンツ ○○ – content、body

③画像の保存

複数ページをコーディングする場合「imgフォルダ」の直下に画像を置くのではなく、

MEMO

「common (どのページでも共通で使う画像)」

「top (トップページで使う画像)」

といった形で、ページごとに画像フォルダを分けるとわかりやすくなります。

2-3:コピペでコーディングできる準備がある

見出し、ボタンなど、良くあるパーツはコピペできる状態にしておきましょう。CSSを暗記する必要はありません。(理解している必要はあります)

MEMO

◾️コピペ元として使うツール

・PCのメモ帳

・ブログ

・Webパーツ屋

・Codepen

・Boostnote

2-4:使いやすいライブラリを用意しておく

MEMO

・スライダー

・ドロワー

・パララックス

などを作る際のライブラリは、その都度ダウンロードしたり、CDNをコピーする手間を省くためにも、あらかじめまとめておくと良いですね。

参考 パララックスには色んな種類がある!3パターンの実装例を紹介HPcode(えいちぴーこーど) 参考 ドロワーメニューが作れるjQueryライブラリ「drawer.js」のご紹介!HPcode(えいちぴーこーど) 参考 【実例12パターン】画像スライダーはSwiper使っておけば間違いない!実用的な使い方を紹介HPcode(えいちぴーこーど)

2-5:テンプレートを作っておく

共通部分の型(テンプレート)を用意しておくのも、効率化には有効です。

MEMO

・基本的なHTML構造

・CSSやJSの読み込み

・ファイル構成

など、すぐにコーディングが始められるテンプレートを作っておくと、スムーズに作業を始められます。

 

3:エディタ(VSCode)の使い方を覚える

下記のはにわまんさんの記事を参照して、基本設定や拡張機能の追加をしていけば、みるみる使いやすいエディタになっていきますのでぜひお試しください。

参考 WebコーダーがVSCodeで使いたいショートカットと設定、拡張機能HPcode(えいちぴーこーど)

4:Sassを使ってみる

MEMO

・どこに何が書かれているかわかりやすい

・値を変数で管理できる

・四則演算ができる

・入れ子で管理できる

・直感的にかける

日本語訳で「構造的にイケてるスタイルシート」ことSassですが、利用することで上記のようなメリットがあります。詳しくははにわまんさんの記事をご参照ください。(手抜きって言わないで)

参考 Sassを使うメリットとよく使う機能を4つだけ厳選!HPcode(えいちぴーこーど)

5;自動化させる

「コーディングはAIに代替される」と常々言われていますが、その通りでコーディングは単純作業なので、自動化させやすいです。

5-1:コード補完

MEMO

・Emmet

・コードスニペット

・path intellisense

5-2:記述ミスの発見

MEMO

・Linter

・Validator

・PHP CodeSniffer

5-3:コード整形

MEMO

・prettier

・EditorConfig

・PHP CodeSniffer Fixer

6:自走で改善していくコツ

作業が遅くなる原因箇所をメモして次から改善する、という意識が必要です。模写コーディングをするのであれば、以下のような流れがおすすめです。

MEMO

①分からない、時間がかかったところは都度メモ

②次の模写コーディングまでに改善策を探す

③改善策が見つかれば取り入れてみて試す

全ての時間を案件に回してしまうと、新しいことを勉強するための時間の確保が難しくなります。同じ仕事を同じ時間で繰り返す人にならないように、1ヶ月の中で、スキルアップのための時間をきちんと確保しましょう。

まとめ:はにわまんさんからのメッセージ

iSara5thから講師を務めてくださったはにわまんさんは「人前で話すことが苦手」で、講師として話すことにもかなり不安があったそうです。ただ、iSara関係者にお世話になっていたご縁もあり、「iSaraからの依頼なら、断らずに最後までやりきる」という想いを持って参加されたとのこと。

フリーランスは、自ら挑戦する機会を作っていかなければなりません。苦手だから、失敗が怖いからと挑戦を避けていれば成長はありませんし、同じことをずっと繰り返すだけになってしまいます。

スキルが大事なことは言うまでもありませんが、個人で生きることを目指すのであれば「飛び込んで、やり切る」という覚悟を持てるかどうかが、非常に大切なのだと感じました。

WordPress、ブログの講座を含め、質の高い学びの時間をありがとうございました!

 

明日も引き続き学んだことをシェアしていきます。

それでは。

 

iSara5th の講座まとめ記事一覧はこちら