【フリーランス】リモートに強いエージェント5社
フリーランスエージェントのおすすめ30社をランキング 気になる1位は？
50,000円がもらえる！フリーランスエージェントの紹介キャンペーン

【初心者向け】フロントエンド5年の自分が捧げるコーディングのTIPSまとめ

Web転職する
コーディングのtipsをツイートする企画をゆるくやってきて先日30日達成しましたので、この記事にまとめます。
現場での経験による知識だったりコーディングの心構えだったり、本や独学では学べないようなことも投稿したという自負がありますので、参考になれば幸いです。
対象となるのは初学者の方になりますのでご了承ください。
見やすいようにカテゴリ分けしています。

コーディング全般

コーディングの手順

いざコーディングし始めるときに何から手を付けるかといえばもちろんhtmlなんですが、それには理由があって文書構造や命名ルール、要素の選定にまずは集中したほうがよいです。

モジュール、コンポーネントの概念

実装する時はそれがstructure(header,footerなど)なのかmoduleなのか固有パーツなのかを意識して作りましょう。moduleの概念としては使いまわしても予期せぬ崩れなどがないことが前提です

崩れの原因の見つけ方

主に崩れがあるけど何が原因か見当つかないときは要素を消していくことが重要です。具体的には崩れのない状態にctrl+zで戻るor要素やスタイルを消して崩れのない状態まで戻ると原因がわかります。

HTML

button要素とa要素の使い分け

a要素はリンク、button要素は何らかのアクションが発動すると覚えれば使い分けはokなんですが、アクションを発動するけどa要素を使う場合もあります。例えば、モーダルウィンドウ、タブはhref属性に
値を入れて、JSでその値を使ってコンテンツを表示させたりするためにa要素にする例があります。

em strongの使い分け

どちらも強調ではあるのですが、その中でもstrongは重要性、緊急性を意味付けします。例えばformの必須など。emは文中のどこを強調したいか。例えば価格の数値部分のみemにするなどがよくある例です。

dl要素

dl要素は割とくせ者でdtを見出しっぽくしてしまいがちなんですがあくまでddを説明するためのテキストで、さらにリストになってると尚良い使い方です。また、ulはliしか直下に置けないですが、dlはdiv置けます。

olの使いどころ

CSS

画面サイズに合わせてfont-sizeの拡大縮小

通常しなくていいんですが、レスポンシブサイトやLPの背景にテキストが乗ってる場合は画像の縮小に合わせてテキストも縮小させたい時があります。

下記が計算式です。
font-size: calc(16vw * 100 / 900);

↓デモはこちら
https://frontendmemo.work/2019-03-10-072023

マージン上？下？問題

マージン上をにつけるべきか下につけるべきかは悩むところです。自分も含め周りを見ていると初心者の頃下マージン派、慣れてきたら上マージン派に変わってく人が多いように感じます。

横並びの要素同士のマージンの取り方

横並びの時のマージンって隣接クラスにしたり、nth-childにしたりやり方様々あるのですが、親に左のネガティブマージン、子に左の同じマージン入れるのが一番楽です。

cssセレクタの入れ子

cssセレクタの入れ子はすればするほど読み込み速度低下するのでなるべく最小限の入れ子にするとよいです。ちなみにブラウザはul>li>aの場合aから順に読み込まれていきます。

個人的に使うcssセレクタベスト3

1位 子要素(A>B)
2位 隣接セレクタ(A + B)
3位 barで始まるfoo属性[foo^=”bar”]
ちなみに半角スペースで連結すればするほど読み込み速度は下がりますので、最低限必要な連結が求められます。

z-indexのルールを決めよう

z-indexの数値をいくつにするかは慎重に決定しないと、適当な数値を入れてしまっては崩れの可能性があります。
自分のルールは以下↓
・z-index:1＝デザイン上重ねたい要素
・z-index:100＝topに戻る、ヘッダー固定
・z-index:1000＝モーダルウィンドウ、スマホメニュー

cssスプライト

cssスプライトは画像読み込み速度最適化に有効な手法です。主にアイコンで使用します。簡単に言うとアイコン群を一枚の画像にしてcssの背景位置を変えて表示させるため画像のリクエストが

一回で済むため速度が改善します。 そのスプライト画像作るのめんどくない！？って話なんですが、gulpで瞬殺です。スプライト画像とcssが自動で生成されます。

PCとスマホの改行ありなしを切り替える

PCでは改行させないけどスマホのみ改行させるのはレスポンシブデザインでは割とあるあるです。やり方は簡単でbr要素にcssのdisplayプロパティで表示・非表示するだけです↓
簡単な解説記事書きましたので良かったらご覧ください
https://frontendmemo.work/2019-04-12-180512

float

floatはflexに置き換わったから覚えるの不要という意見があるのですが、既存サイトで使われていたらその理論は崩れます。またfloatなんて付与した要素とそれ以降の隣り合う要素が横並びになるので親要素の::afterにclear:both、display:blockして横並び解除させるものと覚えるだけでいいです。

flex、reverseの便利な実例

flexには要素順を変えたり逆にしたりするプロパティが用意されていて、どういう風に使うかというと例えば下記のように画像とテキストの横並びで、ソース準はテキスト→画像と同じなんですが親にクラスを付与するだけで見た目逆にしてます。

https://codepen.io/funclur/pen/QPORZX …

これによりcssの記述も減り、htmlの運用性もよくなります。
また、レスポンシブ時、スマホは画像が先、テキストが先などありますが、それにも対応できるので便利です。
↓flex便利なプロパティ

https://frontendmemo.work/2017-06-24-215720 …

JavaScript

JS機能一覧

静的サイトでよくあるJSの機能を以下難易度順に並べました。
・アイコンの自動付与
・スムーススクロール
・トグル
・高さ揃え
・スマホメニュー
・モーダルウィンドウ
・ナビカレント
・カルーセル

他はajaxやパララックス、シュミレーションなど案件特有のJSです。逆に言うとこれらが作れれば大概の静的サイトはいけます。また使い回せるよう自作プラグインを作っておくと最強。既存のプラグインを使ってもいいですが、オプションの理解や改変も出来るようになると尚良いです。

超便利な任意のJSのイベントが書かれてるファイルを探す方法

例えばこのJSどのファイルのどこに書いてあるんだ！？という時はキャプチャのように開発ツールのeventlistenerにファイルと行が書いてあります。

これでoneをクリックした時発動するJSはindex.htmlの17行目に書いてあるというのがわかります。

JSがhead内ではなくbody閉じタグ前で読み込まれている理由

なぜかというとhtmlを読み込む前にJSを読み込んでもhtml要素の取得ができないからです。ファイルは上から順に読みますのでhtmlを読んだ後にJSの読み込みタグを記述することでhtmlを取得することが可能です。

onloadなどでhtml読み込み後実行させること可能です。 何にせよ読み込み順はとても大事なので意識するとよいですね＾＾

比較演算子

==は絶対に使わないこと。意図しない挙動になる可能性があります。
等しくないは!==です。左辺が右辺以上 である(>=)や<=が覚えずらかったのですが、右が＝と覚えるといいです。

オブジェクト、クラス、インスタンスを解説

オブジェクトはモノであり、クラスは設計図、インスタンスは実際に作った物です。例えばエンジニアという設計図に対してfrontendやbackendというインスタンスを作っていきます。

photoshop

photshopスライスのしかた3つ

・オブジェクトを選択し新規レイヤーに基づくスライスを選択（ショートカットあり）
・新規レイヤーを複製してトリミング（透過があるとき便利）
・レイヤーの目のところをalt+クリック（透過がありスライスを保存したいとき便利）

こちらを記事にしました。よろしければ参照ください。
https://frontendmemo.work/2019-03-13-174502

画像フォーマット

画像フォーマット（拡張子）の選択はサイトルールや最適化、ページ速度改善において重要です。
・jpeg→色数の多い写真
・png24→透過
・png8→色数少ないアイコン
・gif→gifアニメーション

ツール

Web Developer

コーディングしたあとの自己チェックですが、下記のchrome adonのみで
・validator(Validate HTML)
・JS無効時(Disabled JavaScript)
・画像、alt(Display Alt attribute)
・アンカーリンク、リンク（Display Link Details）
・タイトルディスクリプション(View meta tag infomation)

の確認ができるのでおすすめです

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=ja …

ダミー画像

画像を入れることは決まってるけど、何の画像かは決めてないなどありますよね。そんな時は下記サイトでサイズや色をジェネレートしてsrcで読み込めば簡単にダミー画像が表示されるので便利です。
dummyimage.com

clip-pathツール紹介

clip-pathは表示領域を決められるcssのプロパティで、どんな形にでもくり抜くことができるためデザインにこだわったサイトやアイディア次第でポートフォリオでも活躍しそう。

 

やってみての感想

 

連続ではありませんが土日を抜かしての投稿を30日続けてみての感想は結構大変でしたが、それなりに達成感がありました。

また、何よりいいねや反応をもらうことでモチベーションが維持できましたので見ていただいた皆様には感謝しております。

1投稿に収まりきらなかったり、何かと見にくかったこともあるかと思いますが、お役にたてれば幸いです。

 

また今後はしばらくWeb業界、転職、フリーランスについてツイートしていこうと思いますので、宜しければフォローお願いします。

hoshi (@funclur_01) / Twitter
フリーランスエージェントの評判やプログラミングスクールの体験を綴ったブログを運営中！400記事を公開
twitter.com

 

【無料】WebIT系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

詳細ページ
公式ページ
Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当！
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も！
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

詳細ページ
公式ページ
マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

詳細ページ
公式ページ
Web転職する フロントエンドエンジニア
シェアする
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業
↓
Webデザイナー（アルバイト）
↓
Webデザイナー（正社員）
↓
フロントエンドエンジニア（正社員）
↓
フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。
↓
【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshi
hoshilog

コメント

タイトルとURLをコピーしました