こんにちは。
元銀行員エンジニアのきたしょー（@KitamuraShohei）です。
プログラミング６ヶ月目の成果報告です！
- 収益：162,000円
- 新規案件受注：0件
- 勉強時間：224時間
プログラミング６ヶ月目は４ヶ月目に受注したWordPress案件のコーディングからWordPress化までを行いました。
「WordPress化は時間がかかるかもな〜」と不安だったのですが、特につまずくこともなくすんなり納品することができました。
【プログラミング５ヶ月目】WEBデザインに初挑戦したら大苦戦しました！
本記事では、プログラミング６ヶ月目を振り返ります。
▼総制作費100万円超【豪華10大特典】プレゼント▼
プログラミング６ヶ月目はWordPressオリジナルテーマ制作案件に取り組みました
プログラミング６ヶ月目は主にコーディングとWordPressオリジナルテーマ制作に取り組みました。
これまでWordPressについては当ブログで記事を執筆したり、有料テーマやプラグインを導入する程度の経験しかなかったので、いきなりオリジナルテーマを作れるのか不安でした。
ですが、思ったよりWordPress化は簡単でしたね。
むしろ、HTML/CSSコーディングしたファイルをWordPress化するよりもレスポンシブ対応を含めたコーディングの方が10倍大変だったくらいです。
本記事ではこれからWordPress案件のデザインカンプ制作後からの作業について解説していきます。
WordPress案件を受注してからデザインカンプ制作までの作業については以下の記事にまとめてるので事前に読んでおいてください。
【あわせて読みたい】プログラミング５ヶ月目の成果報告
【プログラミング５ヶ月目】WEBデザインに初挑戦したら大苦戦しました！
デザインカンプ制作からWordPress案件を納品するまでの流れ
１：デザインカンプをコーディングする【テスト環境】
デザインカンプが完成したら、テスト環境に適当なファイルを作ってコーディングします。
ここで注意して欲しいのは、いきなりお客様のサーバー上（本番環境）にファイルをアップロードして制作作業しないこと。
最初から本番環境で制作作業してしまうとURL検索したときに制作途中のサイトが閲覧できる状態になってしまいます。
お客様に作りかけのサイトを見せて迷惑を掛ける可能性があるので、まずはサーバー上にテスト環境を構築してからサイト制作していきましょう。
話を戻すと、ぼくの体感としては、デザインカンプ通りにコーディングしていく作業が一番大変でした。
一般的に定型化されたデザインならコーディングしやすいのですが、コンテンツの配置が独特なデザインはやはり難しいです。
エンジニア界隈には「HTML/CSSはプログラミングじゃない！」という声もありますが、ぼくはHTML/CSSは立派なプログラミングと感じてます。
デザインカンプ通りにコーディングしたり、細かい箇所までレスポンシブ対応するのはマジで難しいんですよね。
マジでちょっとした箇所がズレる。
「たくさんの言語を扱えるようになりたい」というプログラミング初心者の気持ちも分かりますが、まずはHTML/CSSを正確に扱えるスキルを身に付けることが大事だと痛感しました。
２：HTML/CSSファイルをWordPress化する【テスト環境】
コーディングが終わったら、テスト環境にWordPressを導入して、HTML/CSSファイルをWordPress化します。
WordPressは一般的なHTML/CSSサイトとは違って、ヘッダー、フッダー、サイドバーなどの各パーツごとにファイルを分ける必要があります。
WordPress化でのポイントはWordPress独自の関数を使いこなせるかどうか。
HTML/CSSファイルのコードをWordPress独自の関数に置き換えていく必要があるんですね。
とはいえ、コードを覚える必要はなくてGoogleで「WordPress 〇〇」と検索すれば出てくるので安心してください。
WordPressオリジナルテーマを制作するにあたり、functions.phpをカスタマイズするならPHPを読めるスキルは必要ですよ。
３：初期設定やプラグインを導入する【テスト環境】
WordPressのオリジナルテーマが完成したら、初期設定やプラグインを導入します。
４：WordPressをテスト環境から本番環境に移行して動作チェックを行う
WordPressにてサイトが完成したら、テスト環境から本番環境に移行して動作チェックを行います。
テストで記事を投稿してみたり、画面を伸び縮みさせてレスポンシブ対応を確認したり、不備がないかをチェックしていきましょう。
- 実は簡単！WordPressのテスト環境の作り方と本番への移行法
５：お客様に確認してもらいOKが出たら納品完了
WordPressでオリジナルテーマを完成したら、お客様にサイトを確認をしてもらいます。
OKが出たら納品完了です。
ぼくがプログラミング５〜６ヶ月目で制作したサイトはこちらになります。
【あわせて読みたい】WEB制作案件を受注してから納品するまでの全工程
WEBサイト制作案件の受注から納品までの流れ【フリーランス&副業向け】
WordPressに取り組むならPHPを読めた方がいい
ゼロからWordPressオリジナルテーマ制作案件をやって思うのは、WordPressをやるならPHPも読めた方がいいってこと。
以前、以下のようなツイートをしました。
今月はずっとWordPressやってるけど、PHPはあまり関係ないかなという印象です。そもそもWordPressはコードが読めない人やPHPが分からない人のために存在するので、HTML/CSSがある程度理解できたら、すぐにWordPressに取り組んでいいと思う。学習順序としてはHTML/CSS→WordPress→PHPがおすすめです😌
— きたしょー@元銀行員エンジニアブロガー (@KitamuraShohei) July 25, 2019
上記ツイートに対していただいたコメント。
私も昔そうだと思って同じ順序にしていたのですが、PHPの基礎が分かっていなければWPの独自関数を思うように使いこなせない事が分かったので、今のカリキュラムの順序はHTML/CSS→PHP→Worpdressに変更しました。PHPの基本構文やDBぐらいは分かった上でやったほうがスンナリ入りやすいかな〜 https://t.co/1StRg8qfGX
— こうやん🐟池袋でプログラミングスクール８月 日曜コース開講準備中 (@kou_yan) July 26, 2019
このように先輩エンジニアから指摘してもらってやっと思い出したんです。
「そういえば、WordPressをやる前にPHPを勉強してたな」って。
いま思えば、プログラミング３ヶ月目に約500ページの参考書でPHPを勉強してたんですよ。
要するに、ぼくが特につまずくことなくWordPress案件をこなせたのは事前にPHPを学習していたからなんですね。
WordPressをやる前にPHPの勉強はしておいた方がいいです。
とはいえ、PHPをゴリゴリ書けるレベルまでは必要なくて、PHPをある程度読めてコードをいじれるレベルであればOK。
WordPressの技術的な情報はGoogleで検索すればほとんど出てくるので、サンプルコードを理解して少し改造できるレベルであれば特に問題はないですよ。
反省点はHTML/CSSコーディングにおけるクラス名の付け方が不規則だったこと
本案件での反省点はクラス名の付け方に秩序がなかったことです。
同じレイアウトの箇所には同じクラス名を使ったり、命名するクラス名がなくなって「inner1」「inner2」のように「クラス名+番号」をつけたりとクラス名の付け方にルールがありませんでした。
なので、コーディングの最中に1箇所レイアウトを変更したら、同じクラス名をつけている他のレイアウトも総崩れしてしまう事態に見舞われたんですよね。
コーディングするページ数が多くなるとクラス名が被ることはだれもが経験したことがあるはず。
クラス名の付け方について良い方法がないかGoogleで検索してみたら、この世にはCSS設計手法というルールが存在することを初めて知りました。
「やはり他のコーダーさんも同じ悩みを抱えていて、その悩みを解決する手法はすでにあったのか！」とコーディングが終わってからようやく気が付いたんですね。
ぼくはこの反省を生かしてこれからクラス名の付け方についてはBEMあたりを使っていきます。
プログラミング初心者の方もいまはよく分からないかもしれませんが、世の中にはCSS設計手法というルールが存在するということだけでも頭に入れておくといいですよ。
プログラミング６ヶ月目：勉強方法はWordPress案件/参考書３冊
プログラミング６ヶ月目はスキルアップのために以下の勉強をしました。
- コーディング・WordPress
- 参考書：WordPress
１：WordPress案件への取り組み
WordPress案件を受注してから納品するまでの全行程、デザインカンプ制作、HTML/CSSコーディング、WordPress化に取り組みました。
やはり実践が一番スキルアップするのは間違いないですね。
２：いちばんやさしいWordPressの教本
WordPressの概要について学習するためにこちらの参考書を読みました。
内容としては１時間ほどでサクッと読める超初心者向けでしたね。
WordPressを触ったことがない方は読んでみる価値ありですが、すでにご自身でブログを運営している方は読む必要はありません。
３：WordPressレッスンブック
こちらの参考書を使って実際にWordPressの自作テーマを作りました。
自作テーマの作り方が初心者にも分かりやすい文章で書かれているので、WordPressのテーマをいじったことがない初心者にはかなりおすすめです。
４：WordPressのカスタマイズがわかる本
こちらはWordPressのテーマ作成について詳しく学びたい方向けの参考書です。
WordPressの専門用語が多くて、WordPress未経験者には難しい内容だったので、レベル的にはWordPress案件をこなしたことがある中級者向けといった感じですね。
ぼくがWordPress参考書を3冊やってみて思うのは、WordPress初心者は「WordPressレッスンブック」のみで十分だということ。
WordPressの情報はネット上にたくさん落ちているので、あとは案件に取り組みながらググって学んでいけばOKです。
プログラミング７ヶ月目は月収25万円を目指します！
ぼくのプログラミング６ヶ月目の振り返りが少しでもあなたのお役に立てたなら大変嬉しいです。
７ヶ月目は案件が落ち着きそうなので、これまでに作ったポートフォリオを整理して心機一転営業しまくりたいと思います！
目指せ月収25万円です！
引き続き、プログラミング頑張っていきます！！！
【あわせて読みたい】プログラミング７ヶ月目の成果報告
【プログラミング７ヶ月目】ようやく月収20万円を突破しました！
プログラミングに関する人気記事
プログラミング未経験者が月収100万円稼ぐまでの過程を実況する！
プログラミング初心者が月15万円稼ぐまでの全ステップ【完全保存版】
本気でおすすめできるプログラミングスクール５選【現役エンジニア厳選】
▼総制作費100万円超【豪華10大特典】プレゼント▼