『未経験から7日間でコーダーとして現場投入させるまでのカリキュラムを忘れないようにメモっとく』をWordPress風にぱくってみる

  • ブックマーク
  • -
    コピー
concrete5 japan の代表の菱川さんが未経験者を採用する時に教えることのカリキュラムをメモってたのを思い出してチームメンバーに共有するために記事をシェアしたのですが、WordPress を主戦場とする僕としてはちょっとカスタマイズしたかったのでパクリながらオリジナル風に書きます。 また、新たにヘルプしてくれる仲間に事前知識をいれておいてほしくて「こんな事を自己学習しといてね」って言えるようなドキュメントを目指しています。
菱川さんの投稿はこちら

担当してもらう予定の領域

  • HTML/CSS コーディング
  • JavaScript はそこそこで(動きのエフェクトやカルーセルを仕込める程度)
  • WordPress のテーマ開発 (HTMLをWordPressテーマの組み込み)
基本的には変わらずです。最後の WordPress のテーマ開発がくわわったくらいかな。

本人のスペック

こんな人だったらokってことかな?これの対象者ってことっぽい。今回の僕のパターンでは昔インフラエンジニアをかじったけど今ホストをやっている人ということであまり参考にならないので書かなくていいか。いや、ちょっと書いとくか
  • インフラエンジニアだったので黒い画面の基本コマンドは分かる
  • PC,Macの操作は慣れている
  • HTML,CSS,JSには明るくない
んーこんなところかな

カリキュラム

その1

  • Macのセットアップ
    • うちもMacが標準OSなのでMacのインストールと設定はやってもらう
    • 自分でいろいろいじって使い心地に慣れてもらう
  • appear.inやZoomのビデオ会議ツールの説明とテスト
  • Slack,Backlogコミュニケーションツールの説明
  • エディタの導入と説明

その2

ここらへんはほぼパクリかな。うちの場合は Progate_ や ドットインストールを使って覚えてもらう感じです。
3分毎に分かれている無料の動画教材
エディタのインストールが不要のプログラミング学習サービス

その3

だめだ…。ココらへんでこの記事を書くのに挫折しそうになっている。だんだん適当になってきいます。
  • Homebrew でツールをインストール
    • Gitのインストールと説明
    • MySQLのインストールと説明
    • Node.jsのインストールと説明
  • WP-CLIのインストールと説明

その4

冒頭に紹介した記事をなぞってパクる予定だったのに全然別物になってしまっている。 jQuery プラグインを導入してみる
  • ヘッダーを作る
    • position を使ったレイアウトの練習
  • ulを使ったナビゲーションのマークアップとスタイリング
    • 先頭のマークを消したり、縦に並べたり横に並べたりのアレ
  • jQuery基礎(座学)
    • 社内外から今から教えるのにjQuery?というツッコミがあったが、既存サイトではまだまだ使われてるしconcrete5もまだjQueryに依存してるし…。いいじゃん、jQuery教えたって!
    • 資料は公式のjQuery Learning Centerを使います。
  • jQuery プラグインを導入してみる
    • 実戦でよく使うライブラリに慣れておくことと、JavaScriptに対する恐怖感を和らげるため、簡単に動くというイメージを持ってもらう
    • Swiper – Most Modern Mobile Touch Slider : https://idangero.us/swiper/
    • liabru/jquery-match-height: a responsive equal heights plugin : https://github.com/liabru/jquery-match-height

その5

参考記事だと6日目。フリーのデザインデータをDLしてそれをもとにマークアップしてもらうらしい。 これは僕もよくやるんだけど、僕のチェック不足なのかうまくいかなくてオンジョブで進めちゃうことが多いんだよね。
なぜSketchかというと、タイポグラフィやカラーリングなどある程度のCSSはSketchが教えてくれるため、実習の時間短縮が可能だからです。カラーピッカーで色を取ったり、フォントサイズを合わせたりは、1回やれば十分。

https://qiita.com/hissy/items/e781a62ff6521803a230
  • Sketch or Photoshop の基本的な使い方
    • スタイルの取り方とパーツの書き出し方程度
  • Flexboxの解説
  • CSSでの実現手法についてディスカッション
  • 黙々と作ってみる
    • 余白、フォントサイズ、グリッドについて、デザインと実装の差分について逐次指摘して直させる

その6

もう疲れてちゃって最初の目標とはずれてきてしまっているけど後少し。とりあえずお7日目の内容をコピーして貼って、少しカスタマイズします。
  • フォームのマークアップの概要(座学)
  • 引き続き黙々とコーディング
    • 随時デザインとの違いについて指摘
      • ピクセルパーフェクトの話をする
      • こんなのもあるらしい『PerfectPixelを使えばデザインカンプを完全再現したコーディングができる! | HPcode : https://haniwaman.com/perfect-pixel/』
  • 納品クオリティの担保
    • 入れるべきChrome拡張
      • HTMLエラーチェッカー
        • 閉じタグ漏れなど、初学者にありがちなミスをサクッと指摘してくれるため、重宝します。
      • HTML5 Outliner
        • マークアップにあたっては、デザインの再現だけでなく、文書構造としても適切であることが求められます。アウトラインを可視化できるこのツールは非常に便利です。
      • Web Developer
        • JavaScript を無効にした状態での確認、ブラウザデフォルトCSSの無効にした状態での確認、alt属性値の可視化、あたりが初学者にとって必要な機能ですが、それ以外にも様々な便利な機能があり、フロントエンドエンジニア全てにおすすめできる拡張かなと思います。
    • バリデータ
  • セマンティックの基礎

その7

参考記事が8日目で終わりかと思ったらまだあった…。ちょっと集中力の限界がきています。 その後は実際に WordPress のサイトの組み込みに進んでいきたいのですが、ワークフローも大事だと思うのでワークフローとテンプレートタグ、テンプレート階層などが理解できる教材を調べて送ります。 Schoo (スクー) という動画のオンラインスクールで昔にちょっと出た教材などがあったので、そちらがおすすめ。
それ以外には執筆した書籍を渡して読んでもらう感じにします。
あんまり売れなかったけど体系的に制作の流れが分かる本
ってな感じで以上になります!
  • ブックマーク
  • -
    コピー

この記事を書いた人

Susumu Seino

1988年 東京都足立区生まれ。瀬戸内海の小島と東京に拠点を持ち、2020年からは夫婦でアドレスホッピングを計画しているデジタルノマドな日本人。デジタルパブリッシング代理店のアニューマの創業者です。