30DAYSトライアル2nd【コーダーとして企業と仕事ができる実力をつけよう】

こんにちは、フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

ここまでの3記事で『コーディングの副業で月5万円を稼ぐ』レベルになるためのトライアルをまとめました。

ここからは、『コーダーとして企業と仕事ができる』レベルになるためのトライアルを紹介していきます。

ここからより実践レベルのトライアルになるため、難易度も大きく上がりますが、コーディングを副業から仕事へと昇華させたい方は、ぜひ挑戦してみてください👍

30DAYSトライアルの概要は↓の記事で解説していますので、興味のある方はこちらからご覧ください。

2019.03.31

30DAYSトライアル【ゼロから始めるコーディング学習】〜導入編〜

『ゼロからプログラミングを学びたい』『プログラミングを通して人生の幅を広げたい』そんな方のために、30日間でできるコーディング学習カリキュラム【30DAYSトライアル】を作りました。第一歩はこの記事から。...

前回の記事はこちら↓

2019.04.01

30DAYSトライアル1st【ポートフォリオ〜LP制作実践編】

この記事は『初心者からコーディングの副業で月5万円を稼ぐ』レベルになるための30DAYSトライアル、その後編です。サードステップであるこの記事では、ポートフォリオ制作〜実践サイト制作編までを13日間で進めていきます。...

フォースステップであるこの記事では、Webコーダーとして仕事をするために必要なスキルを解説したのち、JavaScript・jQuery〜Sassの基礎学習編までを8日間で進めていきます。

トライアル課題協力

はにわまん
WordPressが好きなフリーのWeb屋。気づけば約300件のWordPress案件を対応してきました。SE → 農家 → アフィリエイター → Web屋。生まれは三重県。

『コーダーとして企業と仕事ができる』レベルになるためのトライアルでは、課題作成をはにわまんさんと共同で行なっています。

フロントエンドの勉強をされてる方は、はにわまんさんの技術ブログ『HPcode』も必見です。

【重要】Webコーダーに必要なスキルは『模写』だけでは身につかない！

フロントエンドの独学系記事の多くは、HTML/CSSの勉強→Bootstrapの勉強→模写コーディング→クラウドソーシングで案件獲得開始、という流れで解説されています。

しかし、この手順どおりに仕事を開始した方の多くが、こんな苦しみを味わったはずです。

あれ？デザインデータが送られてきたけど、ここからどうやってコーディングすればいいんだ…？

なんとかコーディングしてみたものの、デザインとズレているとめちゃくちゃ修正をくらってしまった…涙

そう。Webコーダーとして企業と仕事するためには、HTML・CSSが書けるだけでは足りません。

デザインデータからデータの通りにWebサイトを再現するスキルが求められます。

データからの画像の切り出しや、デザイン通りにコーディングする技術、加えてjavascriptやjQuery等をつかってサイトに様々な動きをつけるスキルも必要になってきます。

これらは、既存のWebサイトを模写しているだけでは絶対に身につかないスキルです。

Web制作会社で働いたり、Web制作会社とお仕事したいと思っている方は、ぜひ今回の30DAYSトライアルを体験してみてください！

Webコーダーに必要なスキルは3つ

上にもざっくりと書きましたが、Webコーダーに必要なスキルは3つあります。

1. デザインをWeb上で再現するスキル
2. デザインカンプからコーディングできるスキル
3. 動きを再現するスキル

それぞれのスキルを、実際に手を動かしながら身につけていきましょう。

コーディング課題への取り組み方【コードに正解はない】

この実装方法が正解かどうか？…と最初の内は不安になるかと思います。

しかし、身も蓋もないことを言うと、コーディングに正解はありません。
（※綺麗なコードというのはあります）

結局はデザインカンプをWebサイトとして再現できれば、なんでもいいのです。

コーディングはどこまで勉強しても、各コーダーでコードの書き方はバラバラ。

これはプロ、アマ問わず起こりうる状況ですので、自分の中での正解をストックしておくことが大事です。

答えを求めるのではなく、答えを作る（自分の手持ちのカードとして使える状態にしておく）ことを意識して、コーディングしてみてください！

今回の課題は基本的に答えがないものばかりなので、手を動かしながら自分なりの答えを探す力を付けていきましょう( ^ω^ )

Tips1. プログラマーのためのnoteアプリ『Boostnote』を使おう

1つ前の章で「自分の手持ちのカードとして使える状態にしておく」と書きましたが、理解度の話だけではなく、物理的にも「手持ちのカード」として使えるようにしておくと効率的です。

Boostnoteはプログラマーのために作られたメモアプリで、コードスニペットを作成する機能があります。

これ以降のトライアル学習でやる内容は汎用的なものも多いので、ヘッダーの作り方を学習したら、「ヘッダー用コード」というタイトルをつけて、そのHTMLとCSSを保存しておきましょう。

そうすれば、次回からはコピペするだけでヘッダーが完成です。

いつでも引き出せるようにコードをまとめておくと便利ですよ👍

ProgateでJavaScriptとjQueryを学習しよう

Progateとは、環境設定不要でブラウザのみでプログラミングが学べる学習サイトで、学習開始までの手軽さとわかりやすい解説でプログラミング初学者にはイチオシのサービスです。
※この記事はProgate様にも掲載確認いただいております

最初に、Webサイトに動きをつけるために以下の2つの言語を学びましょう。

• JavaScriptというプログラミング言語
• jQueryというJavaScriptライブラリ

JavaScriptはフロントエンド ・サーバーサイドともに使えて、近年もっとも勢いのあるプログラミング言語のひとつです。

色んなことができる便利な言語ですが、最も身近な例としては、『HTML・CSSで作られたページの要素を操作して動きを付ける』という使い方です。

よくある「ページトップに戻る」ボタンや、テキストがフワッと浮き出てくるようなエフェクト、画像のスライダーなどもJavaScriptで作られています。

JavaScriptの使い方を抑えて、リッチなWebサイトを作れるようになりましょう❗️

それではまず、JavaScriptの基礎を学ぶために、Progateで以下のコースを受講してください！

• JavaScript Ⅰ
• JavaScript Ⅱ
• JavaScript Ⅲ

※「JavaScript Ⅳ」以降はやる必要はありません。

JavaScriptの学習（Ⅰ～Ⅲ）が終わったら、jQuery（初級編～上級編）を学習しましょう！

• jQuery 初級編
• jQuery 中級編
• jQuery 上級編

JavaScript・jQueryはこれまでやってきたコーディングとは違い、変数や関数など、プログラミング的な要素が入ってきます。

毛色が違うので少し難しいと思いますが、サイトにアニメーションをつけて行く上で必要な言語ですので頑張りましょう( ^ω^ )

ProgateでSassを学習しよう

Sassとは「Syntactically Awesome StyleSheet」（構造的にイカしたスタイルシート）の頭文字をとって名付けられた、CSSの拡張言語です。

その名の通り、CSSをより楽に書くための言語なんですが、Sassで書くとベタでCSSを書くより圧倒的に早いです👍

Sassの書き方には2種類あって、Rubyのようにインデント形式で書いていく『Sass』スタイルと、CSSと同じようにカッコでくくる『SCSS』スタイルがあります。主流は『SCSS』スタイルなので、この書き方を学んでいきましょう❗️

まずはProgateのSassコースを１周してください。

• Sass 学習コース Ⅰ

学習のときに意識するポイントとして、Sassのメリットもまとめておきます。

• 入れ子（ネスト）形式で書ける
• 変数が使える
• 継承（@mixin, @include）でコードの繰り返し記述を防げる
• 『&』記号で擬似要素が書ける
• ファイルを分割管理できる

いきなりサクサクと使いこなすのは難しいので、まずは入れ子・変数・&記号だけでも使えればOK。

.items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.items li {
  display: inline-block;
}

.items li a {
  color: #333;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.items li a:hover {
  color: #gray;
}

@media screen and (max-width: 767px) {
    .items {
        /* .itemsに対するレスポンシブ表示の記述 */
    }
}

//変数を定義。これを使い回す。
$color-a: #333;
$color-a-hover: gray;

.items {
  list-style: none;
  margin: 0;
  padding: 0;

  @media screen and (max-width: 767px) {
      /* .itemsに対するレスポンシブ表示の記述 */
  }

  li {
    display: inline-block;

    a {
      text-decoration: none;
      //変数利用
      color: $color-a;
      display: block;
      padding: 12px;
      // ホバー時の挙動
      &:hover {
        //変数利用
        color:$color-a-hover;
      }
    }
  }
}

この3つだけでも、レスポンシブ表示の記述や擬似要素の指定がかなり楽になるので、CSSをベタ書きしていた頃に比べると断然早くなりますよ👍

また、Sassはそのままだとブラウザで読み込めないので、Sassで書いた内容をCSSに変換する『コンパイル』という処理が必要になります。

デイトラ1stでVScodeを導入していると思いますので、コンパイルを自動でやってくれる拡張機能『Easy Sass』を入れておきましょう( ^ω^ )

• VSCode(Visual Studio Code)で簡単にSASS/SCSSファイルのコンパイルができる拡張機能「Easy Sass」がお勧め

これからCSSを書くときは、ぜひSassで書くようにトライしてみてください👍

JavaScript・jQuery〜Sassの基礎学習編まとめ

以上、デイトラ2ndのDAY1〜DAY8までのまとめでした。

JS・Sassともにプログラミングの要素が入ってきますので、少し戸惑うかと思います。

ですが、変数や関数を使いながら効率的にコードを書いていくこの作業こそ、プログラミングの醍醐味です。

最後は気合いと根性で書くしかないHTML・CSSと違った楽しさを感じられると思います。

これを楽しいと思える方は、コーディングに留まらず、サーバーサイドの勉強を始めるのもいいかもしれませんね( ^ω^ )

まぁここまではデイトラ2ndの準備運動といった感じです（笑）

次のまとめ記事から、本格的に『コーダーとして企業と仕事ができるレベル』になるためのトライアルに入っていきます！お楽しみに☺️

2019.04.19

30DAYSトライアル2nd【デザインデータからコーディング〜よく使うパターンを練習しよう】

この記事は『コーダーとして企業と仕事ができる』レベルになるための30DAYSトライアル、その中編です。フィフスステップであるこの記事では、デザインカンプからのコーディングのやり方と、よく使うコーディング表現の練習をしていきます。...

それでは！！