コーディングの練習

0、コーディングの練習を始める前にまず知っておいた方がいいこと

コーディングを始める前に知っておいた方がいいこと

このサイトでは実践的なコーディングの練習をしてもらうのですがその前に知っておくべき内容の解説をします。

私は全く知らない状態でコーディングを始めて色々調べる中で知った情報です。

 

レスポンシブデザインについて

Progateですが初めて学習する人に向けて作られているサイトですが情報がもはや古かったり入り方としてはいいけどやり方としてはよくない内容があります。

一番いい例がReact.jsというコースがあるのですがそこで学習する内容は完全に古く非推奨に近いので学習してはいけません。

だから恐らくProgateで勉強したと思われる人がいまだにQiitaでその情報を載せているので学習サイトとして疑問を感じます。

だからこれからProgateで別の言語を勉強する際は情報が古くないかの確認をネットでした方がいいです。

レスポンシブデザインに関してですがProgateではどの画面から作るか、ブレイクポイントをどうするかに関しては解説していません。

だからずーっとレスポンシブデザインに関してどうすればいいか分からなく分かったのが実務を始めた会社の面接の2日前です。

完全に独学で勉強していたので多分半年近く分かりませんでした。

ProgateではHTML&CSSコースの上級編でまずタブレットの画面から作りますがレスポンシブデザインはまずスマホの画面から作らないといけません。

モバイルファーストと言われる位でタブレットでサイトを見る人なんかまずいないです。

私が実務をしている会社もサイト閲覧者はほとんどスマホです。

↓は私が運営している別サイトのサイト閲覧者の比率ですがスマホが圧倒的です。

Googleアナリティクスというツールを使っていますがタブレットがいかに使われていないかが分かります

 

スマホ→タブレット→PCの順に画面を作ればいいです。(私が実務をしている会社は時間がない時はタブレットとPCの画面は同じにします)

一番小さい画面が2021年1月の段階でiphone7、8、SE2で横幅が375pxなのでそれに合わせてコーディングしています。

タブレットはどれに合わせればいいか分からないですがサイト閲覧者がほとんどいなくて重要ではないので私は768px(ipad)にしています。

パソコンは1920pxにしています。

メディアクエリはProgateに合わせると私はやりにくかったので↓にしましたがこれは自分のやりやすいやり方がいいと思います。

これは最初はスマホ画面の表示をして画面を大きくしていって768pxになったらタブレットの画面になって1024pxになったらPCの画面になる書き方です。

実務でもこのやり方をしています。

 

エディタについて

ProgateではATOMを使った説明がどこかにあったと思いますがコーディングやサイトを作るなら絶対にvscodeがいいです。

理由は色んな機能があって特にコーディングするならLive Serverが役に立ちます。

Live Serverは何ができるかというとコーディングを修正して画面を読み込む時に自分でしないといけないのを自動でやってくれます。

それとこれは最初からvscodeに入っていますがEMMETです。

これは何ができるかというとCSSの入力量を減らせます。

例えば「display:flex」と書くのを「d+f+tab」でできます。

最初はこの2つがあればいいと思いますが他にも役に立つ機能を↓で解説しています。

vscodeでコーディングする時の拡張機能
実務でvscodeでコーディングする時の便利な拡張機能の紹介 LPのコーディングをする時に効率的にできた方が時間の短縮とストレスが減ります。 実務でずーっとコーディングしている...

vscodeのダウンロードに関しての解説は↓のサイトでしています。

vscodeのダウンロードの解説をしているサイト

このサイトでコーディングの練習をする際にデザインカンプというコーディングするためのデータを使いますが「XD」というadobeのソフト(無料で利用可)を使います。

それについての解説は1回目のコーディングの練習でしていますのでそれをご覧ください。

 

デベロッパーツール

コーディングする時は絶対にGoogleのデベロッパーツールを使います。

chromeを導入していない人はダウンロードしてください。

ここからダウンロードする

macの場合はoption+command+i(解除するときも同じ)で起動します。

私はmacを使うのですがwidowsは起動方法が違うので調べてください。

↓がデベロッパーツールを開いた時の画面です、赤枠の部分にcssがあってそこを確認しながらcssが聞いているかの確認をします。

コーディングする上で覚えないといけないことはそんなにないので使いながら操作を覚えてください。

↓で使い方に関して解説しています。

デベロッパーツールの使い方を解説しているサイト