コーディングをしていると、過去に実装したことがあるようなデザインなのに苦戦したり、思ったようにスムーズにコーディングできないことはありませんか？
それは、コーディングの効率化ができてない証拠です。
そこで今回は、コーディングの効率化のプロフェッショナルである、ゆうきさん(@yuki_web126)にインタビューしました。
この記事を読めば、コーディングの効率化に何が必要なのか、分かると思います。
この記事がおすすめな人
- 自分のコードに自信がない
- コーディングスピードが遅い
- 毎回同じような実装で苦戦する
- class名を付けるのに時間がかかる
- 修正地獄にウンザリしている
- 効率よくコーディングして時給をアップしたい
- 30日間でWeb制作を学べる
- 完全無料
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 受付は1日25名までの先着制
コーディング初心者によくある悩み
コードに自信がない
みんな口を揃えて『自信がない』と言いますが、これは正常です。
始めから自分のコードに自信を持てる方なんていません。
仕事やスポーツでも、そうではなかったですか？
始めから早々上手くいくはずなんてないはず。
だからこそ一生懸命練習するし、人から教わったりしましたよね？
コーディングも同じです。
自信を持てるようになるためにも、下記のような行動を取っていきましょう。
- 仲間を作って情報交換する
- 教材などで正しい知識を身に付ける
- 結果の出している方からフィードバックを受ける
コーディングルールが決まっていない
こちらもめちゃくちゃ多いです。
これだとclass名やCSSの当て方に統一性がないため、下記のような状況になりやすくなります。
- class名が被りすぎて、CSSが他の要素に影響しちゃっている…
- コーディングを進めれば進めるほどコードがぐちゃぐちゃ…
- 下層ページをコーディングしていたら、知らぬ間にTOPページが崩れている…
- ピクパしたいのに全然合わない、むしろどんどん表示がズレていく…
これが続くと、手戻り・修正が多発して、永遠に終わりが見えない『修正地獄』にハマってしまいかねません。
ここで、
と思った方もいると思います。
具体例については、僕の過去のポストでいくつかご紹介させていただきました。
気になる方はご覧ください👇
レイアウトが同じデザインはクラス名をルール化できます
レイアウトが同じデザインとは？
こんなイメージです↓↓↓1番上のカードタイプの場合、僕だったら次のようにクラス名を付けます
※○○はセクションによって変わる箇所：works、service など… pic.twitter.com/zOLUTpx21L— ゆうき｜学サポ (@yuki_web126) August 16, 2023
コーディングでどこまでブロック化するか？
CSS設計を知ってからの学習中や駆け出しのころはかなり悩んでました
いちいち悩んで手が止まるのも非効率です… pic.twitter.com/csJvurRx0B— ゆうき｜学サポ (@yuki_web126) August 20, 2023
1つのセクションを構成するHTMLはほぼ次のような型でいけます
・〇〇
・layout-〇〇
・〇〇__inner
・〇〇__〇〇Worksセクションの場合… pic.twitter.com/zKp7i7BpIS
— ゆうき｜学サポ (@yuki_web126) August 24, 2023
コーディング速度が遅い
コーディングルールが決まっていないと、無駄に悩んだり迷ったりしますし、修正や手戻りも多くなってしまいます。
よって、コーディング時間がどんどん長くなり、
となるわけです。
つまり、
『ルール化できていない ＝ 効率化できていない』
となるわけです。
コーディングの効率化を図るのであれば、ルール化は必須です。
コーディングの効率化ができるとどうなるか？
コーディング速度がアップして時給が上がる
ルールを設けることで『こういう時はこれ！』という感じで、作業を進めることができます。
class名やよくあるレイアウトパターンのコーディングでは、無駄に悩んだり迷ったりすることも無くなり、修正や手戻りも最小限に抑えられます。
よって、コーディング時間もどんどん削減でき、結果として時給アップに繋がります。
修正なく素早く納品してクライアントからの信頼がアップする
スピード感を持って、かつクオリティの高い成果物を納品すれば、クライアントからの信頼度もアップします。
複数のクライアントから継続案件をご依頼頂ける関係性が築ければ、コーディングのみでも月50万円ほどの安定収入を実現することもできます。
時間に余裕ができる
効率化を徹底すると、コーディング時間を1.5〜2倍は圧縮することができます。
その結果として、時間に余裕が生まれます。
僕は時間に余裕ができたことで、以下のような新しいチャレンジをすることができました。
- 学習支援コミュニティ（学サポ）の運営
- コンテンツ制作（Brain）
コーディングの効率化は、メリットしかありません。
コーディングの効率化に必要なこと
コーディングの効率化に必要なことは、主に以下になります。
- CSS設計の習得
- コードストックの作成
- ジェネレーターやChatGPT、CursorなどのAIツールの活用
この中でも特に重要なのが『CSS設計』です。
CSS設計とは？
CSS設計と聞くと難しく聞こえると思いますが、簡潔にまとめると『class名やCSSの当て方にルールを設けましょう』と言うことです。
お気づきの方もいると思いますが、ここでCSS設計とルール化が紐づきます。
まず、CSS設計には『良いCSS設計』と言う考え方があります。
覚える必要はありませんが、『こんな考え方があるんだ』くらいの感覚で、頭の片隅に置いといてください。
全部で4つあるので、1つずつ解説します。
予測しやすい
第三者がclass名を見て、それがどこで使われているのかある程度予測できることです。
例えば、
- class="titleA"
- class="titleB"
この場合、タイトルであることは予測できますが、どこで使われているのは分かりません。
それでは、次の場合はどうでしょう？
- class="title-main"
- class="title-sub"
また、単語を略して書くのは予測低下に繋がるので、なるべく避けるのが好ましいです。
英単語を略した例
❌ title → ttl
❌ category → cat
❌ message → msg
再利用しやすい
共通パーツ（使い回しするパーツ）がある場合、コードを修正する必要がなく、再利用できるようにしておくことです。
例えば共通のタイトルに付けるclass名の場合、
- service-title
コレだとserviceセクションでは使用できますが、他のセクション（worksセクションなど）では、class名に矛盾が生じるため使えません。
それでは、次の場合はどうでしょうか？
- common-title
『common-』とすることで、どのセクション（serviceセクション・worksセクションなど）でも、問題なく使用できますね。
保守しやすい
サイトを改修するにあたり、コードを追加・更新した時に既存のコードに影響が出て書き直したりする必要がないことです。
既存のコードに影響が出るケースとしては、下記の通りです。
- class名被り
- CSSの影響による表示崩れ
拡張しやすい
コーディングを1人で行った時も複数人で行った時も、成果物のクオリティは同一であると言うことです。
例えば、
- 書き方にルールを定める
- コメントを残す
などして、複数人でコーディングしたとしてもクオリティを担保する工夫が必要になります。
CSS設計手法の種類
OOCSS
これは『Object Oriented CSS』の略称になります。
構造と見た目を分離して、定義します。
構造
- width
- height
- display
見た目
- color
- border-color
- background-color
定義したclass名のうち、必要なものを組み合わせてコーディングします。
これは、マルチクラスを用いて使うことが多いのが特徴です。
この考えを取り入れたものの例としては、Bootstrapが挙げられます。
BEM
これは『Block、Element、Modifier』の頭文字をとった、略称になります。
厳格なclass命名規則が特徴です。
BEMは、3つの要素で構成します。
- Block：構成のルートとなる要素
- Element：Blockを構成する子要素
- Modifier：BlockまたはElementの状態変化
そして、class名の命名規則は下記の通りです。
『Block__Element--Modifier』
SMACSS
これは『Scalable and Modular Architecture for CSS』の略称になります。
CSSを5種類に分類して、それぞれの考え方や記述ルールを取り決めます。
Base
基本的なタグに対して、デフォルトのCSSを定義します。
例）reset.css、base.css
Layout
レイアウト調整するためのCSSを定義します。
接頭辞『l-』を付与します。
例）l-header、l-footer
Module
State
Layout、Moduleの状態変化です。
JavaScriptなどで、classを付けたり外したりする際に使用します。
接頭辞『is-』を付与します。
例）is-active、is-hidden
Theme
サイト全体の見た目（主に色）に関するスタイルを定義します。
接頭辞『theme-』を付与します。
例）theme-border、theme-background
FLOCSS
これは『Foundation、Layout、Object、CSS』の略称になります。
日本人が提唱した方法で、GitHubも日本語で解説されています。
OOCSSやBEM、SMACSSのメリットを取り入れたCSS設計手法です。
CSSを5種類のフォルダに分類して、それぞれの考え方や記述ルールを取り決めます。
Foundation
基本的なタグに対して、デフォルトのCSSを定義します。
例）reset.css、base.css
Layout
レイアウト調整するためのCSSを定義します。
接頭辞『l-』を付与します。
例）l-header、l-footer
Object
- Component：それ以上分解することのできないパーツを定義します。
接頭辞『c-』を付与します。
例）c-title、c-btn - Project：複数の要素で構成されているパーツを定義します。
接頭辞『p-』を付与します。
例）p-header、p-card - Utility：ピンポイントでスタイル調整するための便利クラスを定義します。
接頭辞『u-』を付与します。
例）u-desktop、u-color
初心者におすすめな手法は？
BEMは今回ご紹介したCSS設計手法の中でも、比較的ルールが簡潔で1番導入しやすいです。
なので、まずはBEMから学習を進めるのが良いでしょう。
FLOCSSも、各CSS設計手法の良いとこどりをしたものなのでおすすめです。
まとめ：コーディングの効率化にはCSS設計を学ぼう！
コーディングの効率化ができると、メリットしかありません。
そして、効率化するためにはCSS設計の習得がマストです。
今回お話しさせて頂いたコーディングの効率化について、約2年以上コーダーとして活動してきて得た知識・経験を全て詰め込んだのが、僕がBrainで販売している教材です。
コーディング効率を上げたい方は、必須アイテムと言っても過言ではありません。
この記事を執筆している現在では、
- 販売部数：300部超え
- レビュー件数：200件超え
- 平均レビュースコア：
と、ありがたいことにたくさんの高評価を頂いています。
また、
- たった1人で8案件コーディングを進めたり
- 3日間で13ページコーディング仕上げたり
- ライブコーディングでも皆さんからスピード感で驚かれること多数あったり
なぜ僕が上記のように、爆速でコーディングできるようになったのか？
その理由を無料部分でネタバレしているので、気になる方はぜひ読んでみてください！（画像クリックで商品ページにアクセスできます👇）
学習支援コミュニティ『学サポ』のご紹介
去年までの1年間は、しめじさん（@simeji_pro）が運営している『しめサポ』限定で活動してきました。
そんな中、『一般募集はしないんですか？』と言うご相談も、ありがたいことに多く頂いていました。
そこで、満を持して一般募集もスタートします！
学サポの特徴
- 結果を出しているメンターが直接指導
- コードの中身まで確認してフィードバック
- 実務で通用するスキルが身に付く
- 教材以外の質問・相談もいつでも可能
- 長く活躍するための自走力が身に付く
まだまだありますがこの辺で・・・
気になる方は、ぜひ募集する際の説明会にご参加下さい（Twitterをフォローしてお待ち下さい → @yuki_web126）
