iSara

【iSara5期/Day 14】はにわまんの「爆速コーディングのコツ」

はにわまんの「爆速コーディングのコツ」

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。

Day 14-1コマ目は「爆速コーディングのコツ」です。

担当講師:はにわまん (@haniwa008)さん

はにわさんさん曰く「準備がほとんど」です。

「最後のメッセージ」は涙腺崩壊モノでした。

TOTO

あの”はにわまん”だって挑戦してんだ。

GIGLIO

彼はこうして”神”になった。

Day 14講義内容

  • 爆速コーディングのコツ
  • 人生で最大のチャンスに巡り合う方法とその掴み方

この記事は以下のような方にオススメです。

  • iSaraに興味がある。
  • 応募したけど落ちた…。次こそは!
  • コーディング速度を上げたい。

コーディングを早くするメリット

  • 単価が上がる。
  • 対応できる仕事量が増える。
  • クライアントから喜ばれる。

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

  1. デザインを見てコーディングがイメージできる。
  2. コピペでコーディングできる準備がある。
  3. VSCodeの使い方を覚える。
  4. Sassを使ってみる。
  5. 機械に自動化させている。

①デザインを見てコーディングがイメージできる

頭の中で組み立てる

「どんなHTMLタグの構成で、どのCSSを適用させていけばいいか」をイメージできれば、あとはひたすら手を動かすだけ。

これは基本的に経験あるのみです。

  1. 使ったことないCSSは使ってみる。
    └ 記事を書くついでに使ってみる。
  2. コーディングしたことないパーツがあれば作ってみる。
    └ デベロッパーツールでカンニングしておく。(模写)

はにわまんさんが実際に使ってみたついでに書いた記事

はにわまんさんオススメの書籍

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

  • 画像やリンクはdivで囲う。
  • クラス名のパターンを決めておく。
  • 画像名のパターンを決めておく。

セクション名の付け方

  • #header / ヘッダー
  • #mv / メインビジュアル
  • #content / コンテンツ
  • #primary / メイン(主要な)
  • #secondary / サイドバー(補助的な)
  • #footer / フッター

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

  • セクション名「about」
    └ about-items
    └ about-item
    └ about-item-title(タイトル)
    └ about-item-img(画像)
    └ about-item-content(コンテンツ)

コード
コード
結果
結果
画像名のパターンを決めておく

  • フォルダを分ける。
    └ 「imgフォルダ」の中に「topフォルダ(トップページでのみ使う画像)」 「commonフォルダ(共通で使う画像)」を作る。
  • ページ、セクションごとに登場する連番にする。
    └ about1.jpg, about2.jpg
  • 共通パーツはbtn-◯◯, bg-◯◯, icon-◯◯
    └ 名前を見なくてもわかるように。

SEO的にも名前を揃えた方が良いそうです。

画像名

はにわまんさんも参考にする「吉本式BEM設計」

②コピペでコーディングできる準備がある

コピペ元を作っておく

理解する必要はありますが、暗記する必要はありません。

自分なりの「コピペ」カードを増やしましょう。

パーツごとにストックしておく

使いやすいライブラリもまとめておく

  • スライダー(カルーセル)
  • ドロワー
  • パララックス

あらかじめ使いやすいモノを探して、ダウンロードしておきましょう。

それらをまとめておき都度、コピーして使う感じです。

ライブラリのまとめ例

上記のライブラリに関するHPCodeの記事を以下にまとめました。

テンプレートを作っておく

  • HTMLの型
  • CSSやJSの読み込み
  • ファイル構成

常にあとはコーディングするだけ、の状態にしておくようにしましょう。

③VSCodeの使い方を覚える

ショートカットを覚える

  • 行を上下にコピー
  • カーソルを次の行に移動
  • 行全体のコピー
  • コメントの型の作成

はにわまんさんはWindows派です。

拡張機能でもっと便利に

  • エラーチェック系
    └ HTMLHint
    └ W3C Validation
    └ CSSTree validator
  • ライブサーバー系
    └ Live Server
  • 補助系
    └ Path Intellisense
    └ htmltagwrap
    └ Bracket Pair Colorizer
    └ Japanese Language Pack for VSCode
  • Sassをサクッと使う
    └ Easy Sass

④Sassを使ってみる

  1. どこに何が書かれているか把握しやすい。
  2. 値を変数で管理できる。
    └ 特にfont-familyやcolorは変数化したい。(修正が多いから。)
  3. 四則演算ができる。
    └ Sass上で計算できる。
  4. 入れ子で管理できる。
  5. 直感的に書ける。
    └ メディアクエリを近くに書ける。(CSSを上下しなくて良い。)

⑤機械に自動化させている

  • コードの補完
    └ Emmet
    └ コードスニペット
    └ パスの補完
  • 記述ミスの発見
    └ リンター:CSS, JS
    └ バリデータ:HTML, CSS
    └ PHP CodeSniffer:PHP
  • コードの整形
    └ プリティア
    └ EditorConfig
    └ PHP CodeSniffer Fixer
  • 画像の圧縮
    └ Gulp

コーディングは単純作業なので、機械に自動化させやすい。

自走で改善していくコツ

作業中に遅い原因となっているポイントをその都度メモしておき、次回までに改善策を出すようにすることです。

最新情報に触れる

試す時間(余裕)が必要

  • 1ヶ月の中に勉強の時間を作る。
  • 新しく覚えたことをまとめる時間も必要。

同じ仕事に同じ時間をかけて、「ただ繰り返す人」にならないようにしましょう。

納品して終わりではなく、まとめて次に活かすことで理解も深まり、コーディング速度も上がります。

WordPressの環境構築を自動に

はにわまんさんはWordPressのコーディングルールに則っています。

クライアントから「ちゃんとしている」と認識されます。

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

はじめに、こちらの画像をご覧ください。
伝説のやりとり

今からたった1年前のはにわまんさんと、はにわまんさんにとっての「神」的存在、ユーヘー神 (@katayamada_Y)さんの“伝説のやりとり”です。

あのはにわまんさんがChromeのデベロッパーツールについて質問しまくってます。笑

わずか1年前の話です。

ちづみ (@098ra0209)さんのツイートのリプライにこの”伝説のやりとり”があります。


このやりとりの2ヶ月前の2018年3月から、はにわまんさんは「コーダー」を名乗りました。(開業届を出した。)

「カンプ」という言葉も知らないのに6月、デザインカンプからのコーディング案件を初めて受けました。(それまでも案件は受けていた。)

1件1件乗り越える度に不安は消えていったそうです。

フリーランスに必要なのは「やりきる力」「営業力」だと言います。

そしてWeb屋として開業してから、まもなく1年が経とうという頃、ショーへー (@showheyohtaki)さんから声が掛かりました。

#30DAYSトライアル(2nd)です。

はにわまんさんにとって、#30DAYSトライアルは挑戦の連続で「つらかった。」と言います。

こうして、いつの間にか「神になれた。」と照れくさそうに言っていたのが印象的でした。笑

そして、今回のiSara5thでの事前学習の「カリキュラム作成」と現地講座での「登壇」です。

そもそも人と話したくないからコーダーになった、はにわまんさんにとって今回の講座がいかにチャレンジだったかは想像に難くありません。

しかし、お世話になっているユーキ (@yukithaihalf)さんやちづみさん、「iSaraの頼みなら断らない。」と決めていたようでした。

この”最後の語り”もユーキさんからの「5期生に熱いメッセージを!」とのお願いで設けられたのですが、1度は断ったそうです。笑(初めてのユーキさんの講座が同じ日なのは偶然ではなく、お互いに挑戦だったからです。そのおかげで胸アツのDay 14になりました。)

最後に「iSara生はあの頃の自分よりずっと上だから大丈夫。」という言葉をいただきました。

ちなみに、はにわまんさんは「iSara4期に応募しようと思っていたけど、すでに稼いでる人がいたらジャマかな?」と思い応募を踏みとどまった、というエピソードを帰国の日に話してくれました。

はにわまんさんがiSara4thだったら…ちょっと衝撃ですよね。笑

はにわまんさんの駆け出しの年(2018年)の振り返りnoteがこちらです。

はにわまん(感涙モード)
みんなー!はにわまんが泣いてるぞー!

>> プログラミングスクール「iSara」に興味のある人が最初に見るべきブログ

はにわまん全講座まとめ

おわり

プロフィール

Live A Life You Will Remember!

資料請求はこちら