うさぎ、最近の仕事を報告する。４
こんにちは！酒うさぎです。
今日ご報告するお仕事はHTMLコーディングについてです！
先月の19日〜30日までの約2週間、大阪の新規事業のLPのコーディングをしており、先日無事リリースされたので、この2週間について話そうと思います。
今日の内容はいわゆる「初心者が〇〇やってみた」ってやつです。自分のための記録を兼ねているのでちょっと長いですが、お付合いいただければ幸いです( ´ ▽ ` )
さて、まずはサラッとどういう経緯でLPのコーディングをすることになったのかお話しします。ゴーリストのデザイン部はWebデザインも担当しているんですが、私はというと、学生時代は専らグラフィックばかりで、授業でWebデザインを受けた時もhtml/cssを理解するのがとても苦手でした。しかし入社が決まった時から、「絶対Webデザインできるようにならねば」と言う覚悟（？）はあったのです。なので、先月頭に「酒うさぎさん、LPのコーディング やりたい？」と聞かれて食いつきました。「チャンスや！！！」と思ったんですね。はい、御察しの通り、酒うさぎは座学より体で覚えるタイプの人間です。
しかしそこからが大変でした。
【初心者がhtmlコーディングをやってみた】
〜締め切り編〜
8/13〜8/16の4日間は夏休みを頂いたので、連休明けの8/19から作業開始でした。当初は23日に完了のスケジュールだったのですが、思った以上に基礎的なところの理解ができず苦しむ月火水！！
見かねたプロダクトマネージャーに「私とAさん（デザイン部先輩）にも残り半分のタスク振ろうか」と提案していただき、「締め切りの事考えたらこりゃ無理そうや」と考えていたのでその提案をありがたくお受けしました。
が、その日の日報で私が「本当は自力で締め切りに間に合わせたかった」という感想を書いたところ、プロダクトマネージャーから「締め切りずらしても大丈夫だからできるとこまでやってみようか」と連絡を頂きました。
優しい…！
と言う事で、30日までに完了させるスケジュールに切りなおしてもらって、引き続き自分の力で（と言ってもめちゃくちゃ先輩2人に聞きまくりでした）やり切る方向になりました。
〜何がわからなかったか編〜
では、初心者の私は何がわからなかったのか、どこで躓いたのかをお話ししましょう。以下は、私がわからなかったポイント一覧です！
・BEMのルール
・Githubの構造とターミナルのコマンドとブランチ命名規則
・htmlとscssのインデント揃えルール
・MDCの使い方
・paddingとmarginの違い
・相対パスと絶対パス
これは最初の2日感の私がわからなかった事と言うより、ちょっとずつなれてきても躓いたところです。全部解説していくと大変なことになるので、今回は上の２つ「BEMのルール」と「Githubの構造とターミナルのコマンド」について回想します。
BEM！これは本当に2週目に入ってもわからなくて、先輩に指摘されても理解がちゃんとできず、ネットで自分でもわかる説明がされている記事を探し回って、それを見ながら書きたい画面を紙に書いて先輩に確認してもらう、と言う事をしていました。
（汚い殴り書きですみません）
BEMの何が一番理解できていなかったかというと、その構造です。
「Blockの中にElementがあって、Elementの中で違う要素をつける場合Modifierになる」というこれがなかなかわからない。
「え、おっきい枠の中にある要素は全部Element？違う？わからないけど、とにかく使ってみよう」状態。さらに「Block名__Element名--Modifier」という名前の書き方で、アンダーバー２つ書くことを忘れる、など初歩的すぎるミスも連発しておりました…。そしてBlockの中にあるもの何でもかんでも、Element扱いで名前をつけていることもありました…。
そういうことがあったので、参考サイトを見ながら紙に書き、次に作るつもりのコーナー構成をプロダクトマネージャーに見ていただいたわけです。この紙に書いてあるのも間違っていたので、この後めっちゃ訂正していただけました！
ちなみに私がようやくBEMを少し理解できたきっかけのサイトはこちら。
このサイトは色付きの画像で構造を分けて説明してくださっているのでわかりやすかったのだと思います。説明文ではどうしてもわからない…。
そう、何が一番「ヤバイ！」と思ったかというと、BEMに限らずわからない事をググってネット上の記事を読んでも「何書いてるか理解できない」状態だった事です。「私、読み取り能力低かったのか…」と打ちのめされました（笑）勉強できないところが影響しまくってます。
そう言うわけで、結局は隣の席の頼れるA先輩に口頭で聞いて、噛み砕いて教えていただく時間が多かったです。本当にありがとうございました…。
さて、次はGithub！
ゴーリストではGithubを利用しています。このサービスはソフトウェア開発のプラットフォームです。複数人のソフトウエア開発者と協働してコードをレビューしたり、プロジェクトを管理しつつ開発を行うことができます。（ウィキペディアより）
今回のLPも、Githubからローカルに落としてきて編集→リモートにあげる、という作業の進め方だったので、この使い方がわからないと何もできません。しかしGitの構造もよくわからず、まずはそこから勉強しなければなりませんでした。ちなみに、Gitについてはプロダクトマネージャーが執筆されたブログがあります、この図解がわかりやすいのでぜひご一読ください。
そしてこの作業で使用したのがMacにもともと入っているソフト、ターミナルです。このアイコンです⬇︎
このターミナルを使って、Gitからファイルをダウンロードしてきたり、編集したファイルをアップするんですが、そのコマンドをがわかりませんでした。これは数をこなすうちに、よく使うコマンドだけ覚えてきましたが、未だにエラーメッセージが読めません（英語力の問題でもある）
ただ、今回の作業でよく使ったコマンドは都度メモっていたので、ここでご紹介させて頂きます( ＾∀＾)
ブランチを作る時
①元のブランチに切り替える
git checkout 大元のブランチ（developとか）
②ブランチを作成
git checkout -b 作成するブランチ名
ブランチの一覧を見る
git branch -a
ローカルブランチ削除
git branch -d [ブランチ名]
すでに使われているブランチ名を検索
・git branch -r
新しいターミナルを作る
Command+T
新しく続ける
Q
ローカルのリモート追跡ブランチを更新する
git fetch
ローカルのリモート追跡ブランチ（origin/develop）からfeatureブランチを作成する
git checkout -b feature/xxxxxx origin/develop
プルリクエストまでの流れ
変更点をまとめる
git add .
addする部分を選ぶ
git add -p
git add する前に変更した箇所とインデックスとの変更点が見たい
git diff
コミットメッセージを作る
git commit -m "何かわかるコメント"
プッシュしてリモートにあげる
git push origin ブランチ名
以上が、今回度々使ったコマンド達です。そして重要なのが「ブランチ名」！Gitのブランチ名には命名規則があります。BEM然り、コーディングの世界は命名規則が大切なんですね（白目）
その命名規則というのがこちら！
Gitブランチ名の命名規則
（抜粋元：gitのブランチの名前の付け方）
中央リポジトリ（例 github）＊自分で直接いじっちゃダメなやつ
* master 現在の製品バージョン。
* develop 次回リリースの開発用。開発者リポジトリ
* feature-* 新規機能の開発用。developから分岐し、developへマージする。
* release-* 次回リリースの準備用。developから分岐し、developとmasterへマージする。
* hotfix-* 現在の製品バージョンのバグフィックス用。masterから分岐し、developとmasterへマージする。
今回は常に「feature/〇〇」という名前をつけていました。本当に緊急の時の名前にhotfixを使ったりするそうです。その辺の細かい感覚がまだわからないのですが(⌒-⌒; )
【終わりに】
以上が私がこの2週間、htmlコーディングに取り組んでみて学んだことです。もっと細かい学習は山ほどありましたが、書き出すとキリがないのでそこは割愛で（笑）
ただ、その学習する手助けになったサービスがあったので、ここで紹介します。これからWebサイトを作るために、基礎的な知識を身に付けたい！という人向けです。
コーディングを始めた月火で、自分の理解力の無さが骨身に沁みたので、帰りの電車で「コーディング 講座 わかりやすい」や「子供でもわかる コーディング 」という切実さが滲み出たワードで検索しまくっていたところ、見つけたのが「Prog8」。無料で初級〜上級までhtml・cssのスキルを学ぶことができます！学習方法も画像や色が使われたわかりやすいスライドで説明されて、その後実習という流れなので覚えやすい。さらにhtml・css以外にも学習出来るコンテンツはたくさんありますよ！
（え゛っ…今気づいたけどコマンドもGitもあったんやん…）
どうやら有名な学習サービスだったようですが、私は存じ上げませんでした…でもこのサービスのおかげで、水木金から少しづつ知識がマシになっていったと思います。これから始める初心者の方にぜひオススメしたいです。
さて、改めてこの2週間を振り返ってみると、苦手なことに真っ向から向かっていったのは本当に久しぶりだったと思います。また。無茶苦茶なコーディングをする私に対して、忙しい中根気強く教え続けてくださった先輩方にほんっとうに感謝しかありません。今後修正作業や追加要素など、コードに触ることもありますが、少しづつスピードアップしたり新しいことをインプットして、最終的に初歩的なことで先輩方に質問する回数を減らしていきます。
余談ですが、これを書いている今は久しぶりにグラフィックの仕事をしています。Illustratorの安心感、半端ないですね！！！（晴れやかな笑顔）
以上！『うさぎ、最近の仕事を報告する。４』でした〜！
この記事が気に入ったらサポートをしてみませんか？