Go to Qiita Advent Calendar 2024 Top
LoginSignup
16
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@baraninngilyou

新卒1年目の私が配属2ヶ月で学んだこと

Last updated at Posted at 2018-07-30

前回の記事

新卒1年目の私が配属3ヶ月で学んだこと
に続いての記事です。
前回の記事では、トレンド入りさせていただいたりコメントも頂けたりしてとても良い刺激になりました。

配属後2ヶ月が経ったので、再び学んだことをまとめていきます。

2回目の自己紹介

kamisama.png

…聞こえますか……新卒フロントエンドエンジニアのみっつーよ……あなたの心に直接呼びかけています……2ヶ月経って学んだことを書くのです……続けて書くのです……

という脳内音声が聞こえたので2ヶ月目も書いちゃいます★

職場ではHTML/CSS/JavaScript ( jQuery ) を書いており、今はマークアップを極めるべくお勉強中。周りの方々の手厚いサポートのおかげで少しずつ、人間としてもエンジニアとしても成長中！（多分）

人と話すのは苦手だけど、人と関わるのは大好き！
そんな私をよろしくね！

2ヶ月目にやったこと

マークアップ課題

1ヶ月目と同様にマークアップ課題をこなしました。
flexboxの扱いにも慣れ、だいぶスムーズにコーディングできるようになった気がする。
課題の中で私は、inputボタンの代わりに画像を使用したいといったときに、以下のように記述した。

<ul class="picture-area">
  <li class="picture-item">
    <a class="picture-link" href="#">
      <img src="./img01.png" alt="">
      <input class="checkbox" type="checkbox" value="check" checked>
    </a>
  </li>
  <li class="picture-item">
    <a class="picture-link" href="#">
      <img src="./img02.png" alt="">
      <input class="checkbox" type="checkbox" value="check">
    </a>
  </li>
</ul>

クリックをするたび画像を入れ替えるJSは以下のように書いた。

$('.picture-link').on('click', function(e){
  var target;
  if(e.target.tagName === 'INPUT'){
   target = e.target;
  } else {
   e.preventDefault(); //イベントキャンセル
   target = $(this).find('.checkbox');
  }
  $('.checkbox').prop('checked', false);  //  全部のチェックを外す
  $(target).prop('checked', true);  //  押したやつだけチェックつける
 });
});

ここで意図した動きを実装することができ、満足していたがコードを見てもらうことでご指摘を頂いた。

<ul class="picture-area">
  <li class="picture-item">
    <input class="checkbox" type="checkbox" value="check" id="card1" checked>
    <label for="card1" class="picture-label">
      <img src="./img01.png" alt="">
    </label>
  </li>
  <li class="picture-item">
    <input class="checkbox" type="checkbox" value="check" id="card2">
    <label for="card2" class="picture-label">
      <img src="./img02.png" alt="">
    </label>
  </li>
</ul>

このように、inputタグとlabelタグで包んだlabelをリンクさせることで、aタグやjsタグを書く必要が無くなる。inputタグの使い方も奥が深いので後々まとめて勉強したい。

補足(7/31)

Akoarum_K さんよりコメントを頂きました。

ご存知かもしれませんが、label要素の中にinput要素を含めることでfor、id属性を省略することも可能です。

```

私のコードでは<label>の外にinputを置いていたため、forでリンクさせていましたがそもそもlabelの中に入れてしまえばそれも必要ないようです。

Qiita記事投稿

これらの記事を書きました。

その後で構造化マークアップについて勉強したので、もう1本追加しました。

セマンティックウェブと日頃から耳にしていても、実際にはなんのことなのか分からなかったので勉強になりました。

今回の記事で記事を書くのも4本目になります。
とっても楽しく書いているので、引き続きQiitaでアウトプットを続けていこうと思います。

ライトニングトーク

毎週行われている定例会にて、前回発表したQiita記事の内容を基にLTを行いました。
話した項目としては以下の通り。

  1. 記事について
  • 人事研修について
  • 勉強になったこと
  • 課題について
  • 今後の記事について

の5点です。
掘り下げて書いていこうと思います。

1. 記事について

Qiita記事を書くことになった経緯や、実際の反響について共有しました。
参加者が実際に記事を読んで感想を言ってくれたりして刺激になりました…！

2. 人事研修について

人事研修で受けたロジカルシンキング研修にスポットを当てて紹介しました。

説得力のある話をしたいときに必要なこととしては、

  • 要約力
    話をまとめ、相手に伝えやすいように工夫すること。

  • 縦の論理
    話の根拠となる理由がきちんとつながっていること。

  • 横の論理
    もれなくダブりなく根拠が積み上げられていること。

の3点がある。

image.png

それぞれができていないときにどう言った話し方になるのか、以下で例を挙げる。

要約NG
（例）コーラは美味しくて、ひんやりして、炭酸が強くて、どんな料理にも合って…　
（反応）→で、何が言いたいの？

要約ができていないと、コーラがなぜ美味しいのかという理由の部分は分かっても、結局何が言いたいのかが伝わってきません。伝えたいという熱意があっても、理由を並べ立てるだけではいけませんね。

縦の論理NG
（例）コーラは美味しいですよね。だからコーラを飲むべきです！
（反応）→なんか話飛んでない？

縦の論理ができていないと、段階を踏んで根拠を示すことができずに、聞いている側はなんでそうなるの？と話が飛んだように感じてしまいます。なぜ美味しいのか、なぜ飲むべきなのか、まずはなぜそう思うのか根拠を出し切りましょう。

横の論理NG
（例）コーラは美味しい。冷たくて美味しい！あなたも飲むべきです。
（反応）→同じこと何回も言ってる…話が抜けてる？

横の論理ができていないと、根拠はきちんと挙げられていても重複してしまっており説得力に欠けます。本来ならコーラが美味しくて、他の人に勧めたくなる理由はいくつかあるはずなので、ここではその理由に至る過程を説明するべきです。

3つの理論を踏まえた正解
コーラは美味しい。
なぜなら、冷たくて、炭酸で爽快感を得られて、お酒を飲むより安いから！
だから、みんなコーラを飲むべきです。

このように、3つの理論を意識しながら話すことで説得力が増し納得してもらえるようになります。論理的に話すことは難しいですが、仕事をしていく上では大事なことです。

同じ話を繰り返したり、根拠を提示し忘れがちなのでこの話が身に沁みました。
他にも色々やったんですが、やっぱり難しいです！

3. 勉強になったこと

前回の記事でdl,dt,ddの扱い方についてコメントでご指摘いただいたので改めて勉強しました。

  • dlは説明リスト
  • dtは説明用語リスト
  • ddは詳細説明要素

と呼びます。

複数の定義語に対する一つの定義説明をする場合、以下のように書くことができる。

<dl>
  <dt>Firefox</dt>
  <dt>Opera</dt>
  <dt>Google Chrome</dt>
  <dd>これらはWorldWideWeb（WWW）の閲覧に利用されるWebブラウザである。
  フリーソフトとして、無料で提供されており、自由にダウンロードすることができる。</dd>
</dl>

また、dl要素内でそれぞれの名前と値のグループをdiv要素で包むことができる。

<dl>
  <div>
    <dt>Firefox</dt>
    <dd>ファイアフォックス</dd>
  </div>
  <div>
    <dt>Opera</dt>
    <dd>オペラ</dd>
  </div>
  <div>
    <dt>Google Chrome</dt>
    <dd>グーグルクローム</dd>
  </div>
</dl>

参考URL：https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl

4. 課題について

実際に組んだページを見せながらできなかったこととできるようになったことの2項目について話しました。振り返ってみると、6月に配属されてから7月中旬までに、課題として7個のサイトをコーディングしていました。（思っていた以上にいっぱい書いてた）

フィードバックでは、かなりコーディングスピードが早いと褒めていただきました。
次の目標は、一発で文句なしのコーディングをすることです。頑張ります。

5. 今後の記事について

今後書いていきたい記事としては以下のものを考えてます。

  • フロントエンド関連本まとめ
    最近いろんな本を読んだため、どの本で何を勉強できたかまとめたい。

  • アクセシビリティ・SEOについて
    改めてきちんと勉強したいので、色々調べてまとめたい。

  • jQueryについて
    作ったものについて書いたりしたい。

  • AIスピーカのカスタマイズ関連
    GoogleHomeでIFTTTを使ってTwitterやLINEと連携させたのでその話を新卒らしく噛み砕いて書きたい！あとは、これからやりたいことなど。

  • Webアプリケーションもどきとか
    JSONと仲良くなったので、JSONデータを使って動作する何かを作りたい。サーバ側も勉強したい。

3ヶ月目にやってくこと

  • エンジニアとしても社会人としても圧倒的成長をするために目標を明確にする
  • インプットとアウトプットを活発にする
  • 興味のある勉強会に参加してみる
  • 他のエンジニアと喋ってみる
  • ひたすらコーディング！！デザインカンプと実際に組んだサイトがきちんと合っているかピクセル単位で確認する
  • ブラウザチェックきちんとをする（特にIE）、バリデータチェックも
  • jQueryおよびJavaScriptの文法に慣れて自力で一から作れるようにする

以上です。ありがとうございました。

16
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?