iSara WEB制作

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

投稿日:2019年4月26日 更新日:

バンコクにてノマドエンジニア育成講座の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がこちら



みんなーはにわまんが泣いてるぞー

はにわまん全講座まとめ



5thメンバーリスト

講義にもありましたが、もしあなたがWEB制作やフリーランス・ノマドエンジニアを目指しているなら追いかけるべきは少し前を走っている人達です。そう、我々iSara5thメンバーですw!

というわけでTwitterのメンバーリスト(全21名)を作成しましたので、よかったらフォローお願いします。

そして #iSara5th のタグで追いかけてみてください。

リストはコチラ

5thメンバーブログ

僕以外にもブログで発信しているメンバーがいます。ぜひチェックしてみてください。

ビザを延長したい方へ

せっかくタイに来たのだから、限界まで居たい!という方は我らが同期で世界一周を成し遂げた男・アッキー(@Kurohune13)さんの以下の記事でビザの延長(合計60日間の滞在)がカンタンにできます。2016年の記事ですが、2019年4月でも通用しました。

補足としては、銀行もあるので日本円→タイ・バーツへの換金もここで出来ます。

フードコートやセブンイレブンもあるので食事もできますよ。

おわり

プロフィール

今後の発信予定

  • 毎日の現地講座
  • 事前学習期間まとめ
  • 現地講座期間まとめ
  • 聖地・iSaraハウス
  • タイごはん屋マップ
  • 5thメンバー紹介

iSaraマニアの視点から発信を継続していきますので、遊びに来てください。

Live A Life You Will Remember!

資料請求はこちら

-iSara, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

【iSara5期/Day 10】WEBデザイン知識/実践編 〜XD講座〜

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 10は2コマを使っての「WEBデザイン知識/実践編 〜XD講座〜」です。 担当講師:ちづみ(@09 …

【ZZZホステル/iSaraハウス】から歩いて行ける「ごはん屋さん」マップ

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 講義内容も気になるけど、毎日の食事も気になりますよね? ZZZホステルやiSaraハウスから歩いて行ける「 …

【iSara5期/Day 11】WEB広告の基礎講座

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 11-2コマ目は「WEB広告の基礎講座」です。 テーマはネットで生きるなら知っておくべきことです。 …

【iSara5期/Day 4】クラウドソーシング講座

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 4-1コマ目はクラウドソーシング講座です。 担当講師:ちづみ(@098ra0209)さん ちづみさ …

【iSara5期/Day 12】アフィリエイト基礎講座

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の(@HEBOCHANS)です。 Day 12は2コマ使っての「アフィリエイト基礎講座」です。 担当講師:ケースケ(@Keisukexlif …

プロフィール

HEBOCHANS

いつも犬と一緒にいるために
プログラミングを右手に、
ブログを左手に。

爆遅でも止まらない36歳ミニマリストが
フリーランスを目指す全記録。

TwitterのFollowボタン

Twitterのタイムライン