もくもく会

【第1回 現役コーダーと交流できる!もくもく模写コーディング会】を開催しました。

※このイベントは2018年10月20(土)に開催しました。

「開催してみて」のことは記事の後半部分に記載しているので、開催しての気づきを読む方は以下のリンクを押すと移動します。

—-本文はここから—-

こんにちは。のぶ(@n0bu0810)です。

今こそWeb制作会社で働けている私ですが、看護師→海外留学→Web制作会社(今)といろんなことを経験してきました。

Web制作会社に入ったのも30歳になってから。30歳を超えると「転職は厳しいものになるよ。」と耳にタコができるぐらい周りの方に言われ続けました。

html,cssの学習を始めて、参考本や参考サイトを見ながらコーディングができるようになってきた頃、ぶつかった壁があります。それは、、、

のぶ
のぶ
「どんなサイトを模写すればいいのかわからない!」

という壁でした。

独学で質問できる方がおらず、頼るものがネットのみになってしまった時にぶち当たってしまう壁ではないのでしょうか。

実際に公開されている企業のサイトはたくさん動いて難しそう。といって簡単なものってなるといつも同じデザインになってしまうし。ってかデザインできないし。

のぶ
のぶ
「どなたか課題を出してくれませんか?」

と切実に思っていたことがあります。一通りこなして次のステップに進む時期がきた。。。と思っていた矢先にとあるもくもく会に参加したことがきっかけで横のつながりが少しずつ増え始めモチベーションにも繋がっていきました。

私が当時受けたご恩をしっかりと還元していきたい!ということを常々思っていたのですが、この度「一緒にコーディングのもくもく会を主催してみよう!」という素晴らしい方々と出会うことができ、今回コーディングのもくもく会を開催することになりました。

名付けて【現役コーダーと交流できる!もくもく模写コーディング会】です。

【第1回 現役コーダーと交流できる!もくもく模写コーディング会】

【概要】

こちらが用意した練習用のデザインカンプを元に、もくもくと模写コーディングする会です!

模写コーディングのレベルとしては、Progateの初級レベルで組めるように調整しています。
Progateでは基礎を学び、模写コーディングで「実践力」を見につけましょう。

3人の現役のコーダー
はにわまんさん(@haniwa008)
笹さん(@SasaYukiya)
のぶ(私)(https://twitter.com/n0bu0810)

が参加するので、コーディングで分からないことがあれば、いつでもご質問ください!

コーディングの勉強は孤独になりがちです。モチベーションを保つためにも、ゆる~く交流していきましょう。

(もくもく模写会で作成したコードやサイトは実績としてご自由にお使いください)

【対象者】

  • Progateの初級レベルをクリアしている
  • デザインを元に1からコーディングしてみたい
  • 現役コーダーと交流したい

※ 0からのコーディングが余裕!って方はご遠慮ください…

【開催日】

2018年10月20日(土)

【スケジュール】

13:00 ~ 13:15 自己紹介
13:15 ~ 13:30 ルール説明・コーディング準備
13:30 ~ 15:30 もくもくと模写コーディング
15:30 ~ 16:00 コーディング例の紹介や質疑応答

お時間ある方は、終わってから軽くお茶でも!

【持ち物】

・ノートパソコン

※ VSCode、Sublime Text、Atom、Bracketsなど、コーディングしやすいテキストエディタを入れておいてください!

【参加費】

500円

【主催者】

はにわまんさん

【プロフィール】
WordPressが好きなフリーのWebコーダー。「HPcode」というコーディングやWordPressに関するブログを運営しています。キーワード「模写コーディング」でGoogle検索結果1位!(※ 2018年9月27日時点)

笹さん

【プロフィール】
今年Web制作会社に新卒入社したWebコーダーです。デザイン系の大学出身なので少しだけデザインもできます。HTML、CSSなどWebに関する知識は入社するまで独学でした!
仕事をしながら趣味でWordPressをいじっています。(近日公開予定)

のぶ(私)

【プロフィール】
三十路未経験がWeb制作会社のWebエンジニアにキャリアチェンジ。プライベートでも wordpressに取り込み中。ハマりやすく飽きやすい性格だけど、Web制作は楽しく続いてます。柚子胡椒大好きです。

開催してみて

これまでは開始時間ギリギリに参加して思うままに過ごしていたのですが、初めて主催する側に回ってみて気づきがたくさんありました。その気づきをまとめておきます。

情報共有ツール

今回、主催者は3名でした。この企画が上がった時は、カフェで話していた時に企画が持ち上がりその場でカンプを作成していました。(あのスピード感は素晴らしかった)。
その後は、「ChatWork(チャットワーク)」というアプリを使って、情報共有をしていきました。

参加者への情報共有

  • カンプ(jpgとpsd)
  • 今回のコーディングのルール
  • 必要ファイル
  • コーディングのサンプルをまとめたもの

これらをdropboxに載せておき、そのURLを僕のブログで記事を作成してdropboxへのリンクを作りました。

良かった点

情報共有方法

URLの手入力ってとっても面倒ですが、リンクからダウンロードファイルを見つけてもらえればすぐに必要なデータを渡すことができます。また、この記事の中にコーディングのルールやタイムスケジュールなどを同時に記載しておいたので、パワーポイントなどの準備もせずに情報を共有できたのは良かったなって思います。

参加者の方の疑問に対応できた

当たり前といえば当たり前なのですが。参加者の数が多くて疑問をまったく解消することができないという最悪のパターンは回避することができました。

進行役を経験できた

人前で話したり、タイムキーピングするという経験がほぼ皆無だったので、貴重な機会でした。これは数こなしてもっとできるようになっていきたい。

参加者の方同士でもコミュニケーションが生まれていた

教える側と教わる側ってどうしても上下関係になってしまいがちなのですが、横のつながりになった方が質問などをしやすいんですよね。モチベーションにも刺激にもなるし。コーディングしながら参加者の方の中でも会話がうまれていたので、何かのきっかけになればいいなって。

改善すべき点

コーディング時間約2時間は短すぎた

今回は、ヘッダー・メインビジュアル・コンテンツ・フッターを作りました。参加者の方の実力や経験もバラバラだったので、最低でも今回見本のカンプを完成するぐらいの時間をとるべきでした。完成した人には+αで別の課題を出す。というやり方が良いのかなー。要反省。

解説時間が短すぎた

解説の時間はもうちょっととりたかった。疑問点はその都度聞いていただいていたのですが、わからないことをみんなでシェアすることで気づかなかった疑問を自分自身に問いかけることができるから。

力にばらつきがある中どうやって達成感や次に繋がる何かを見つけて帰ってもらうか。

できない悔しさより達成できた喜びをお渡ししたかった。

懇親会の準備不足

もくもくした後に場所を変えて懇親会を行おうとしたのですが、16時頃のカフェはどこもいっぱいで場所を探して歩き回ってしまいました。開催時間とその後の場所をどうするかっていうのを考えないといけなかった。皆様には申し訳ないことをしました。

イベントの告知方法

平日のお昼頃に突然のイベント告知だったので、次はイベントの事前告知をして開始時間も土日のお昼ぐらいがいい。事前に告知することでなんとなく申し込むっていうのを無くせるはず。

教えるって難しいけど楽しい

  • どれくらいの理解力があるのか
  • どこがわかっていないのか
  • 使うパソコンはmacだけではない
  • エディターも違う

質問をされて瞬時にこれらに気づかないといけないから、自分自身がよっぽど理解していないとしっかりと質問に対して返答をすることができません。
教えるって難しいけれど、それが何かのきっかけになって前に進む手伝いができるなら嬉しいよね。

参加者の方の声

とても嬉しいコメントをいただいたので、本人様の承諾を得てキャプチャを載せます。このような声をいただけると次もやりたいな。もっと頑張ろうって気持ちにさせてもらえます。本当にありがとうございます。

まとめ

主催者側として反省点がたくさんあるけれど、参加された方皆様が何か一つでも学びがあったようなので、それだけで開催できて無事に終了できて良かったなって思っています。

私自身がhtml,cssの初学者だった時に、もくもく会からどんどんWeb業界の方とのつながりが増えていくという恩を受けたので、この恩をどんどん引き継いでいきたい。

どんな形になるかは未定ですが、知識は自分自身の中だけに抱えていてもどうしよもないので何らかの形でこのような学習会は今後も行なっていきたいです。

もっともっと伝えられることが増えるように。もっともっと技術で表現できることが増えるように。また明日からコツコツコードを書いていきます。

ほー
ほー
お疲れさまでした

第2回目を2018年12月に開催いたします。
https://changethejob.com/moku2_event02/