Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

新卒デザイナーが、ちょっとだけコードが分かるようになった話

More than 1 year has passed since last update.

Ateam Lifestyle Advent Calendar 2019の8日目は株式会社エイチームライフスタイル @snd-07 が担当します!
初めてのQiita投稿です。ぜひ最後まで読んでください♩

自己紹介

2019年4月に入社しました。
マーケター、デザイナー、エンジニアで構成されたチームで、サイト改善をしています。
デザイナーである私は、ビジュアルデザイン作成〜マークアップまでが業務範囲です。

今回は、私がちょっとだけコードがわかるようになった経緯、やったことを話します:grinning:

伝えたい人

  • 新卒
  • コードあまり触らないデザイナー
  • 上記の人と関わるエンジニア

入社したての私

  • 入社したての頃は、一人で困らず書けるものはHTMLとCSSだけでした。
  • 他の言語は、ほぼ呪文・・:imp:
  • 「少しは勉強した方がいいよなぁ」と思いつつ、行動にうつせないまま過ごしていました。

今の私

  • 半年で、ソースコードを見てもわかることが増えた!
  • 今までだったらエンジニアに頼んでいた作業も、自分でやれるように。
  • プログラミングに興味がわき、プライベートでも勉強したりするようになりました。

どうやって今の私になったの?それは・・・

  • なんでもTRYしてみたから!
  • 最初はたった一行を変える所からはじめました。
    • チャレンジするハードルを下げる。
    • チャレンジできるようになってから、やるレベルを上げていきました。

例えば、こんなことにTRYしました

  • ERB→Reactにコードを変更する作業

    • サイトをReactに変更することになり、調整が必要になった。
    • 「やってみてもいいですか?」と手をあげてみた。
  • サイトのコード変更に応じての、e2eテストコード(Cypress)の修正

    • 今テストコードを書き直さないと、自動テストができない。
    • 「自分で直してみます!」と言ってみた。

どうやってやりきったのか?

  • 最初は、教えてもらうがまま&調べたままに書く。

    • 素直にそのまま書いてみます。
  • わからなくなったら、聞きにいく。

    • 他の例などを真似てみればできるものもあれば、真似するだけじゃうまくいかないこともあります。
    • ひとまずエラーが出たらgoogle翻訳してみました。
    • それでもわかなかった時は、聞きに行きました。
  • 土日は、Progateで基礎を勉強しました。

    • 少しでも基礎的なことは知っておこうと思い、Progateの有料会員に登録。
    • 「あの時教えてもらったことはこれか!」、「これ、Progateでやった!」というタイミングがあり、やってよかったと思いました。
  • 自分でやれることはやって、分からないことは詳しい人に聞くことで、やりきりました。

エンジニアは、こんな風にわかりやすく教えてくれました

  • 「~~っていう言葉はわかる?」「ここまでわかる?」と、段階を踏んで教えてくれました。

    • デザイナーは、1つ1つの単語から分からないこともしばしば。
    • どこまでなら分かるか?とコミュニケーションを取りながらだと、うまくいきました。
  • 紙に書きながらだったり、実際のコードで説明してくれました。

    • 口頭だと、認識のずれが起きることもありました。
    • 説明にもらった紙を貰うことで、復習にもなりました。
  • 「覚えるもの」なのか「背景まできちんと知るべきものなのか」分けて教えてくれました。

    • 「ここは、覚えるもの」「ここは、こういう仕組み」と、区別してくれるおかげで、「なんで?」の疑問が減りました。
  • その場でコードを触りながら教えてくれると、再現性がありました。

    • どうやってエラーを見ているのかなどがわかったからです。
    • そうやって調べるんだな、という発見も。調べ方の幅が広がりました!

そうやって、やってみた結果

  • 教えてくれると、わかる!:relaxed:

    • 感覚的に、理解できるようになりました。
      • 1からは書けないけど、書いてあることをなんとなくわかるようになった、という感じ
    • もう、コードを見ても怖気付きません。
  • できることが増えたので、普段の業務も幅が広がった。

    • 作業効率がアップした。スピードが早くなった。
  • 自分が「できること」をやる→今「やるべきこと」をやる、という動きに

    • 小さい修正を、エンジニアの手を煩わせずに、デザイナーだけでやれるようになりました。
  • エンジニアへのリスペクトがさらに強まった

    • こんなに(これ以上に)難しいことをいつもやっているんだ・・と実感することができました。

伝えたいこと

  • とりあえず、やってみる!

    • やってみたら、意外とできることもあります。
    • できなかったとしても、必ず何か新しい学び・知識が増える。
  • 実際に手を動かすことの大切さ

    • 聞いてるだけ・読んでるだけより、理解が深まることを実感しました。

今後

  • もっともっと「できること」を増やしていきます!

    • 何でもチャレンジさせてくれる、教えてくれる環境に感謝し、大切にしていきます。
    • 教える方の立場になれるくらい、インプットをしていきたいです。
    • いつか誰かに相談されたらいいなぁ。。その時は、今を思い出して親身に応えたいです。
  • チームみんなで最大成果を出す!:fire:

    • うまくチームで分担しながら良いサービスを作って行きます!

まとめ

最後まで読んでくださりありがとうございました!:grinning:

Ateam Lifestyle Advent Calendar 2019の10日目は、@hurikake06 がお送りします。
明日もぜひ読んでくださいね!

“挑戦”を大事にするエイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。
https://www.a-tm.co.jp/recruit/

snd-07
名古屋の新卒デザイナーです。ISTJ。 普段はnoteにいます。https://note.com/snd
life-a-tm
人生のイベントや日常生活に密着した比較サイト、情報サイト等様々なウェブサービスを企画・開発・運営
https://life.a-tm.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away