ハセブロ勉強会 2020/05/03~05/04 エンジニアに必要な行動力と視点を変える技術【Googleも採用している仕事術を紹介】
こんばんは。
本日はハセブロ勉強会 2020/05/04の内容の復習記事です。
【この記事はこんな人におすすめ】
- エンジニアになりたてで、これからキャリアアップを目指す方
→この記事が自分のエンジニアとしての働き方を見直すよいきっかけになると思います。
- エンジニアの働き方に興味がある方
→この記事が自分が持っているエンジニアの働き方についての理想と現実のギャップがないか確かめる機会になるはずです。
- ハセブロプログラミングコミュニティ参加者
→復習用にこの記事をご活用ください！
誰よりもわかりやすく、役に立つような記事になるよう精進しますので今後ともよろしくお願いします。
前回までの復習
WEB系エンジニアに求められる能力
- 問題解決能力
- コミュニケーション能力
- 前提を疑う能力
1.問題解決能力について
問題＝理想と現実のギャップ
ex.模写
こんなサイトを模写したい(=理想)
技術的にわからない箇所がある(=現実)
→サイトを模写するために技術を学ばなければならない(=問題)
問題解決の基礎
- 問題に気づく
- あるべき姿を設定する
- なぜ問題が発生したか考える
- 解決策を考える
- 解決策を実行する
- 問題が解決できるか検証する
問題を解決するための考え方
- 仮説思考
情報をたくさん集めるのではなく、限られた情報から仮説を立てて検証することを繰り返す
- 問題を見極める
視野を広く持ち、空気に流されないことで確証バイアスを避け、問題が発生するきざしに気づく
↓こちらの記事も参考にどうぞ↓
2020/05/03 行動する技術
さて、前回まででWEB系エンジニアに求められる3つの能力のうち1つ目の"問題解決能力"について見ていきました。
2020/05/03の回では2つ目の"コミュニケーション能力"について扱いました。まず最初に今回の重要ポイントを紹介します。
問題解決の鍵はスピードと周りを巻き込むこと-ほとんどの重要な問題の解決は他者の協力を必要とする
エンジニアって一人で黙々と黒いPC画面(エディタ）の前でカタカタ…ってしているイメージがありませんでしたか？
こんなやつです
このイメージから「エンジニアになれば黙々とコードを書いているだけでお金がもらえるかもしれない」というイメージを持っていらっしゃる方もいるかもしれません。
しかし実際の現場では黙々とコードを書いているだけで仕事が終わることはありません。コードを書くのは仕事の手段1つにすぎないのであってそれが全てではありません。
もし「エンジニアは黙々とコードを書いているだけ」というイメージをお持ちの場合はいますぐ捨ててください。
じゃあ「コードを書く以外に何が必要なんだよ」って話ですけどその1つが「コミュニケーション能力」です。今回の勉強会の内容でいうコミュニケーション能力とは、特にチームのメンバーとのコミュニケーション能力をさすと思います。
なぜコミュニケーション能力が必要になるかというと、なるべく速く、なるべく正確にサービスを提供するためでしょう。（どの仕事でも当たり前のことではありますが）
チームメンバーとのコミュニケーションによって"周りを巻き込み"、スピーディに仕事をすることで問題を解決し、お客様により良いサービスを提供するのです。
周りを巻き込むためにコミュニケーション能力が必要である以上、相手の立場に立って考えることは欠かせません。
SPRINT - 多くのことをより速く Googleの仕事術
周りを巻き込み、チームで仕事を進める時の進め方の例としてSPRINTというのをを紹介します。まず、SPRINTとは何か？ですがちょうど参考になる記事がありましたのでそちらを引用させていただきます。
スプリントは、月曜から金曜までのたった5日間で、問題の洗い出しからアイデア出し、プロトタイプの制作、そしてユーザーテストまで行ない、最大の成果を生み出す開発プロセスだ。
グーグル式仕事術「スプリント」を今すぐあなたがやるべき理由 | SPRINT 最速仕事術 | ダイヤモンド・オンラインより引用
５日間でそこまでできんの？と正直思ってしまいます。
記事によるとスプリントでなぜ５日間でこれだけのことができるのか、ポイントは3つ。
- 問題の洗い出しに時間をかける。目標をしっかり見定めることでその後の仕事のスピードが桁違いにあがる
- 解決策を考える時は一人ずつアイデアを持ち寄る。個人でアイデア出しをする方がチーム全員でアイデア出しをするよりも量・質ともに優れた結果を出せるようである。(1958,イェール大学の研究結果より)また、個人で作業をすることで責任感とプレッシャーが増し、仕事の生産性をあげるよう駆り立てられる。
- プロトタイプの作成は完璧を求めない。ユーザーテストでは仕事の方向性がわかればよいので必要な部分だけさくっと作成すれば十分ということ
「毎日会社に行って仕事をしているはずなのにどうもプロジェクトが進んでいる実感がない」…というチームこそ実践してほしい仕事の取り組み方ですね。
2020/05/04 視点を変える技術
WEB系エンジニアに求められる3つの能力のうち、ここまでで最初の2つ「問題解決能力」と「コミュニケーション能力」について扱ってきました。
2020/05/04の回では3つ目の前提を疑う能力について深掘りしていきます。
なぜ前提を疑うのか？
エンジニアは"0から”を作り上げる仕事だからです。エンジニアはそれまでになかったものを0から作り上げて、社会に価値を提供する仕事ということです。
0から作り上げる上ではそれまでの常識や当たり前の考え方(=前提)が障壁となります。だからこそ"前提を疑う"必要があるのです。
前提を疑い、視点を変える
前提を疑うことで"それまでになかった"価値を生み出すことができます。
その時には論理的な思考力だけでなく想像力と直感が必要になります。悲しいかな、人は問題に直面すると真正面から頭を使って解決しようとする癖があるようです。しかし実際には新しい価値を生み出すには想像力と直感が必要なんですね。
RPGなどをやっているときに、なかなか倒せない敵がいたとします。そして倒せもしないのに「何度かやれば勝てるはずだ！」と信じて挑んでは倒され、挑んでは倒されを繰り返した経験はありませんか？そして挙げ句の果てに別の街でもらえるアイテムを使えばさくっと倒すことができた、みたいな経験をしたことがありませんか？
問題を解決するため鍵は問題に正面からぶつかり続けるだけでは見えてこないようなものだったりするのです。RPGの例で言えば、別の街でもらえるアイテムの存在は「何度かやれば勝てるはずだ！」と信じている人には見えてこないわけです。だからこそ、一度問題から離れて、視点を変えることが必要なんですね。
アイデア発送のフレームワーク - 質問チェックリスト SCAMPER
視点を変える技術の1つの例として、SCAMPERというのを紹介します。
SCAMPERとは簡単にいうと
7項目48の質問リストを用いて短時間で多くのアイデアを出す方法です。
項目は以下の7つになります。
- 入れ替える(Substitue)
- 組み合わせる(Combine)
- 当てはめる(Adapt)
- 変更する(Modify)
- 他の用途に用いる(Put to other uses)
- 排除・縮小する(Eliminate)
- 並べ替える(Rearrange)
ちなみに全48の質問はこちら。これは覚えなくてもよくて、紙に印刷してすぐ使えるようにしておくとよいそう。
| SCAMPER Questions（出典：『creativity UNBOUND』 ※翻訳は筆者ら） | チェック | |
|---|---|---|
| Substitute（代える、代用する） | S1）代用可能な部分はどれか | |
| S2）何を代わりに使うことができるか | ||
| S3）ほかに誰を含めることができるか | ||
| S4）ほかにどんなグループを含めることができるか | ||
| S5）代わりにどんなプロセスを使うことができるか | ||
| S6）代わりにどんなマテリアル（モノ）を使うことができるか | ||
| Combine（組み合わせる） | C1）何を組み合わせることができるか | |
| C2）ブレンドする（混ぜ合わせる）ことはできるか | ||
| C3）どんな種類のアンサンブル（取り合わせ）を使うことできるか、創ることができるか | ||
| C4）部分同士を、どのように組み合わせることができるか | ||
| C5）目的同士を、どのように組み合わせることができるか | ||
| C6）アプリケーション（応用方法）同士を、どのように組み合せることができるか | ||
| C7）マテリアル（モノ）同士を、どのように組み合せることができるか | ||
| Adapt（適応させる） | A1）これは、ほかのどのような考えを思い付かせるか | |
| A2）何かほかに、これに似たものはないか | ||
| A3）過去に似た状況はないか | ||
| Modify（修正する） | M1）さらにTwist（ひねり、コトの意外な曲折）を加えることができないか | |
| M2）その意味あいを、どのくらい変えることができるか | ||
| M3）色や外形を、どのくらい変えることができるか | ||
| M4）サウンド（音、騒音、音声）を、どのくらい変えることができるか | ||
| M5）何を加えることができるか | ||
| M6）高さ・高度をどれくらい増やせるか | ||
| M7）重さをどれくらい増やせるか | ||
| M8）強度をどれくらい増やせるか | ||
| M9）頻度をどれくらい増やせるか | ||
| M10）価値をどれくらい増やせるか | ||
| M11）何を減らすことができるか | ||
| M12）何を縮小することができか | ||
| M13）何を簡素化することができるか | ||
| M14）控えめに言うことができるのは、どんな部分か | ||
| M15）サイズをどれくらい小さくできるか | ||
| M16）重さをどれくらい軽くできるか | ||
| Put to other uses（ほかの使いみち） | P1）そのままで、何かほかへ使えないか | |
| P2）もし一部を変えたら、新たに生まれるほかの用途は何か | ||
| P3）ほかにどんなマーケットが受け入れるか | ||
| Eliminate（省略する、除去する） | E1）何を、取り除くことができるか、省略することができるか | |
| E2）ある部分がない時、どうやって実行するか | ||
| E3）何を犠牲にできるか | ||
| E4）あげてしまえるものは、何か | ||
| Rearrange（再調整する） | R1）ほかに、どんなパターンが使えるか。 | |
| R2）ほかに、どんな配置が使えるか | ||
| R3）ほかに、どんなレイアウトが使えるか | ||
| R4）何を交換できるか | ||
| R5）何を置換できるか。言い換えられるか。 | ||
| R6）何を、再結合できるか | ||
| R7）逆にしたらどうなるか | ||
| R8）上下逆さまにしたらどうなるか | ||
| R9）内外を裏返したらどうなるか | ||
SCAMPER法――「10分以内にアイデア3つ出さなきゃ」をかなえる方法 (1/4) - ITmedia エンタープライズより引用
具体的な使い方は記事を参考にするとこんな感じです。
例えばですが、ダイソンの羽なし扇風機を例にとると、
- M3）色や外形を、どのくらい変えることができるか
- M11）何を減らすことができるか
- E1）何を、取り除くことができるか、省略することができるか
このあたりにチェックがつきそうです。
こうやって予めこの質問表に沿ってアイデア出しをすると決めていれば迷わなくて済みます。しかも1つの質問につき5秒しか要さないので新しいアイデアを出したいけど考える時間がない人にはうってつけですね。
復習
今回はWEB系エンジニアに求められるコミュニケーション能力と前提を疑う能力を深掘りしました。
要点をおさらいしましょう。
- 重要な問題の解決には他者の協力を必要とする。他者を巻き込むためにコミュニケーションをし、スピーディに仕事をすべし
- エンジニアは0から新しい価値を生み出す仕事。そのため前提を疑う必要がある。前提を疑うために、視点を変える技術を養うべし
- 上記2つを成し遂げるために、仕事の進め方の枠組みを有効利用せよ。SPRINT,SCAMPERなどはその一例
エンジニアが一人で黙々と黒いPC画面(エディタ）の前でカタカタ…ってしているイメージがあった人、エンジニアになって自分の専門性を手に入れるぞ！と意気込み、技術的な勉強に打ち込んでいた人にとっては考えさせられる内容だったのではないでしょうか。
コードを書く技術力が同じであるなら、こういった仕事の進め方そのものに関わる点がエンジニアとして他の人と差別化を図るポイントになります。他の職種でも同じですよね。知識があるだけじゃどうにもならんのですわ。
改めて、コードを書くことはエンジニアの仕事の1つにすぎない
ハセブロオンラインサロン、改め長谷部雄介エンジニア養成所ではただコードを書く技術の習得のみならず、こうしたエンジニアとしてはたらく上で必要な考え方、仕事の取り組み方まで学べます。
完全無料ですのでぜひ興味のある方は下記リンクをチェックしてみてください！
ここまで読んでくださった方、ありがとうございます。
今後もプログラミング、読書、教養などを中心にみなさんのお役に立てるような情報を発信していきますので今後ともよろしくお願いします。
この記事が参考になった方はブラウザを閉じる前にポチッと押して頂けますと幸いです。
Twitterのフォローの方もよければよろしくお願いします！
【WEBページ制作】
— 26日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月6日
❗️NEWSページを更新❗️
工夫した点
✅背景画像フルサイズは見にくいと感じたのでheaderのみに背景画像を指定
改善したい点
✅Menuは横並びの方が統一感あっていい
✅header画像がNEWSっぽくない#プログラミング初心者と繋がりたい #駆け出しエンジニアと繋がりたい pic.twitter.com/eiOVdfN2MD
ドットインストール 詳解CSS 基礎文法編-3 【初心者がつまずきやすい！複雑な要素の配置】
ドットインストールまとめ記事、前回に引き続き「詳解CSS 基礎文法編」を扱います。
全3回で完結。完結編です。
↓先に第2回目の記事の復習をされることをおすすめします↓
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
- プログラミングをこれからやろうと思っているが難しそうで手が出ないと感じている方
- プログラミングの基礎学習を始めて数週間~1ヶ月の方
- ドットインストールを使ってプログラミング学習をしている方
→復習用に本記事をご活用ください！レッスン項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
また、基礎文法編のまとめが完結したら記事内に登場する技術を使ったWEBサイトを作って公開します。
そういった情報を見逃したくない方はぜひ読者登録してお待ちください！
【marginの相殺】
・上の要素にmargin-bottom(①)下の要素にmargin-top(②)を配置
・垂直方向のmarginが重なるとmarginは合計にならず、小さい方を打ち消して大きい方の値が優先される。これをmarginの相殺という。
box1(オレンジ)の下に20px,box3(赤)の上に10pxのmarginを設定するとmarginは合計して30pxではなく大きい方が優先されて20pxとなる
【display】
①inline
通常縦に配置されるblock要素を左から詰めて配置する(inline要素にする)
②inline-block
inline要素はサイズ指定が無効…③
サイズ指定して左詰にする場合に用いる
④none
要素を表示しないことができる
box3をbox要素からinline要素に変換。するとwidthとheightの設定が反映されず、コンテンツ("box3")の幅に設定される
【position】
①static
通常通り要素を配置した時の位置
②relative
staticの位置を基準とし④のように方向+pxを指定して動かした位置に配置
③fixed
ウィンドウの左上を基準とし②同様方向+pxを指定して動かした位置に配置。スクロールしても固定される
box2が画面左上を基準に上下左右に30pxずつ離れたところに固定される。fixedとは「固定される」という意味
【絶対配置】
・position:absolute;…①
親要素がstaticかstatic以外かで配置が変わる
ここで親要素box2のpositionはrelativeとstaticでないが(②)このとき親要素を基準に③で指定した方向とpx分だけ動く。
※-5pxとは指定した方向とは逆方向に5pxの意
relativeに設定した親要素box2を基準にする。top,rightから-5px動くので結果5pxずつbox2からはみ出た形になる。
【親要素のpositionがstaticの場合】
画面全体を基準に指定した方向から指定px分だけ動いた位置に配置される
この時position:fixed;と異なり、スクロールに合わせて動くことはない
親要素box2をstaticにしたのでrectクラスは画面の左上を基準に動く
【z-index】
重なり合う要素の順番を指定する。数字が大きい方が上にくる。画像ではbox1~box3に順に3,2,1とつけている。
特に指定しなければ文書上で後に書かれたものが上にくる
本来はbox3>box2>box1の順で重なるが、z-indexを指定することでbox1>box2>box3の順に変更
【box-sizing】
①box-sizingを用いるとborder(③)やpaddingを含めてwidthやheightを指定することができる。ここでは、box2にbox-sizing: border-box;を用いているのでborderを含めて同じサイズ(②)で揃えることができる
フチ付きのボックスのサイズを整える際に役立つ
【calc】
プロパティの値に計算式を与える
①ではbox1(左揃え)、box2(中央揃え・②)、box3(右揃え・③)の3つについて20pxの間隔を保ちながらブラウザの幅と一緒に幅を変化させている
※四則演算記号は+,-,*,/の順に加減乗除で前後に半角スペースをあける
①ブラウザ全体の幅(100%)から40pxを引いて3で割った幅という条件に合う形で3つのboxの幅が変動する。ここで3つのボックスがそれぞれ中央揃え、右揃えになっていることにより40pxの振り分けは画像のようにボックス間に20pxずつになる
【影】
・box-shadow
ボックスに影をつける
数値2つで上下左右の大きさ、rgbaで色を指定…①
3つ目の数値で影のぼかし具合を指定…③
4つ目の数値で影の拡大率を指定…④
・text-shadow
同様にテキストに影をつける
ただし4つ目の数値は指定できない
box1の影(①)よりbox2の影(③)の方がややぼかしがかかっている。またbox2の影よりbox3の影(④)の方が引き伸ばされている
【背景のスタイリング】
①image
url()で背景に画像を指定
②size: cover;
背景を縦横比を維持したままウィンドウサイズに合わせて伸縮させる
③position
②の伸縮の起点。無ければ左上が起点になる
④background
一括指定。positionとsizeは”/“でまとめる
headerの背景に画像を設定(④)。伝えたい内容を象徴するような画像を配置してWEBページを印象付けたい
【float】
・通常の配置から外して要素を指定方向に寄せる…①
・floatさせた要素の後に続く要素は本来上に詰められるが、clearプロパティでfloatさせた要素より下に配置…②
・floatとclearの方向は同一にする…③
※clearはblock要素にしか適用できない
いままでは画像とテキストは縦に並べるしかなかったがこれで画像とテキストを横に並べることができる。テキストが横に長くなりすぎないので読みやすくなる利点もある。
【復習】
今回はドットインストール「詳解CSS 基礎文法編」の#23~#33を扱いました。
記憶に定着するように簡単に復習しておきます。
ちょっと多いですが、全て独立した内容なので1つ1つ使えるようになっていきたいものです。
✅marginが重なる時は大きい方が優先される(marginの相殺)
✅displayプロパティを使って要素の並びを整える。box(縦)inlie(左詰)inline-block(左詰で、widthやheightを反映させる)
✅positionを使って特定の要素を固定したり一部の要素だけ動かして強調することができる
✅z-indexを使って自由な順番で要素を重ねることができる
✅box-sizingを使って装飾ありのboxと装飾なしのboxを綺麗に並べることができる
✅calcを使うことで複雑な余白の設定をすることができる
✅box-shadow,text-shadowで影をつけることができる
✅background-imageで背景画像を設定
✅floatを使ってテキストと画像を横に並列することができる
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
【#ブログ更新】
— 28日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月3日
ドットインストール「詳解CSS 基礎文法編」の続きです！
前回記事と併せて基礎学習の復習にお役立てください👍#プログラミング初心者 #プログラミング初心者と繋がりたい #ブログ初心者 #ブログ初心者と繋がりたいhttps://t.co/SPXp5eHW1d
ドットインストール 詳解CSS 基礎文法編-2 【初心者がまず押さえるべきお洒落なデザインを作るための基礎】
ドットインストールまとめ記事、前回に引き続き「詳解CSS 基礎文法編」を扱います。
全3回で完結。
↓先に第1回目の記事の復習をされることをおすすめします↓
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
- プログラミングをこれからやろうと思っているが難しそうで手が出ないと感じている方
- プログラミングの基礎学習を始めて数週間~1ヶ月の方
- ドットインストールを使ってプログラミング学習をしている方
→復習用に本記事をご活用ください！レッスン項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
また、基礎文法編のまとめが完結したら記事内に登場する技術を使ったWEBサイトを作って公開します。
そういった情報を見逃したくない方はぜひ読者登録してお待ちください！
【vertical-align】
行幅に対する垂直方向の配置を決定
・baseline(画像の点線,デフォルト)
・bottom：baselineを基準に下に揃える…①
・top：baselineを基準に上に揃える
・middle：英小文字の中央に合わせる
・数字：baselineからの距離。正の数が上
①でimgタグ(画像)を行の下に揃えるように指定。点線が baseline
【リストの装飾】
・list-style-type
リストの先頭につける印を変更。
デフォルトは”・"
①circle：⚪︎
③img: url()：特定の画像
④lower-alpha：アルファベットa,b,c…
⑤none：なし
・list-style-position
リストを行内での配置
②inside：行の内側
①でリストの先頭を・→⚪︎に修正。positionをinsideにすると項目名の先頭に⚪︎が合わせられる。
画像左の②は⑤の誤りです。失礼しました。
補足：
list-styleプロパティを用いることでtype,image,positionをまとめて任意の順序で指定できる。
ただし値を省略すると画像の初期値に自動で設定されるので注意が必要
・(type disc)を外(position outside)に配置する、画像はなし(image none)が初期設定
【クラスセレクタ】
①同じ要素が複数ある場合にclass属性を指定することで別々のスタイルを指定できる
②css上では”.(class属性の値)”と指定する
③同じp要素でもclass属性の異なる(ない)ものはスタイルが適用されていないことがわかる
infoクラスにcolor skyblueを適用し、文字色が水色に
【width,height】
①数値で指定
②割合で指定
親要素に対する比率になる。ここでは親要素(200px)の50%としたので100pxとなる
③overflow
テキストがwidth,heightの都合で収まらない場合の処理
・hidden：隠す
・scroll：要素内でスクロール可能にする
widthとheightは画像左参照。③内はスクロールできる
【border】
①width(太さ),style(線の種類),color(色)を別々に指定
②borderプロパティで一括指定
③top,bottom,left,rightで上下左右別々に指定
④noneで下だけ線をなくすことができる
⑤border-radiusで角を丸めることができる
画像左の水色のボックスを見ると下の線だけ色がない。また角が丸まっているのがわかる。
【padding】
・方向と合わせてしてpaddingを指定…①②
・paddingのみで指定。指定値の数でpaddingの指定の仕方が変わる
1つ：上下左右…③
2つ：上下と左右…④
3つ：上、左右、下…⑤
4つ：上から時計回り…⑥
paddingはWEBページのままだとわかりにくいのでディベロッパーツールで確認するのがおすすめ
【margin】
・方向別指定…①
・一括指定…②
※指定値の数と指定方向の関係はpaddingと同様
・auto
余白を指定した方向に割り当てる。左右のmarginをautoにすると中央揃えができる…③
marginは要素の外に作られるので見た目にもわかりやすい。①と②は記法が異なるだけで実行結果は同じだが、cssは下に書いたものに上書きされるというルールなので実際にWEB上に反映されているのは②
【復習】
今回はドットインストール「詳解CSS 基礎文法編」の#12~#22を扱いました。
記憶に定着するように簡単に復習しておきます。
✅vertical-align：要素の行内での配置を指定できる
✅list-style：リストの先頭の印の種類や位置を変更できる。画像も使用可能
✅要素にclass属性をつけ、.(クラス属性の値)とすることで同じ要素が複数ある場合でも別々にスタイルを指定できる
✅ボックスモデルの性質①：width(幅),height(高さ),border(境界線)をそれぞれ指定できる。
✅ボックスモデルの性質②：padding(内側),margin(外側)で余白を設定し、ボックスの配置を調整できる
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
ハセブロ勉強会 2020/05/02 -問題を見きわめる【○○に気をつけましょう】
おはようございます。
本日はハセブロ勉強会 2020/05/02の内容の復習記事となっております。
【この記事はこんな人におすすめ】
- エンジニアになりたてで、これからキャリアアップを目指す方
→この記事が自分のエンジニアとしての働き方を見直すよいきっかけになると思います。
- エンジニアの働き方に興味がある方
→この記事が自分が持っているエンジニアの働き方についての理想と現実のギャップがないか確かめる機会になるはずです。
- ハセブロプログラミングコミュニティ参加者
→復習用にこの記事をご活用ください！
誰よりもわかりやすく、役に立つような記事になるよう精進しますので今後ともよろしくお願いします。
前回までの復習
今回の内容は「WEB系エンジニア実務シリーズ」の続きです。
4/30 初回「WEB系エンジニアに求められる能力とは？」
↓以前復習記事を投稿しておりますのでそちらをご確認ください↓
5/1 第2回「問題解決に必要なこととは何か？」
この回は参加できていなかったので、議事録を元に書きます。
【問題解決の基礎】
★問題＝理想と現実のギャップ
問題を解決するための6ステップ
- 問題に気づく
- あるべき姿を設定する
- なぜ問題が発生したか考える
- 解決策を考える
- 解決策を実行する
- 実行した結果を検証する
★仮説思考
問題の原因は”多分”こうなんじゃないか？と仮説を立てて検証していくということ。上記プロセスでは仮説思考が大切。
人はつい情報をたくさん集めて考えようとしてしまいがちだが、情報が多すぎると効率よく意思決定できないことがある。それよりはむしろ限られた情報から仮説を立てて検証を繰り返していく方が効率が良い。
具体的にどういうことか、私自身の経験も踏まえつつ説明します。勉強会に参加できていないので、実際に説明された内容とは異なると思いますが、自身の経験も踏まえる方がより具体性が伴うと思いますのでお許しください。
3.で問題の原因を考えると複数出てくるはずです。4. の解決策もおそらく複数出てくるでしょう。仕事を進める上ではその中からどれが正しい原因で、どう解決すべきなのか？を決める必要があります。そのような時仮説を立ててはまず1つやってみる、そして合わなければ他の方法を試す。それを繰り返して解決策を決定していくことが大切です。
私は前職でバックオフィスでエクセルを使ったデータ作成の仕事をしていましたが、その際数十人、数百人のフロント部門の人たちの「誰が見てもわかりやすいデータ」を作成する必要がありました。経験もないですし、納期は決して緩くはないです。作ったデータに問題点が見つかることも少なくなかったです。(例：数値の計算結果が正しくない、元データと比べて抜け漏れがある、など）
その時に必要だったのが仮説思考でした。仮説を立てて「これが原因じゃないかと考えているんですけどどうですか？仮説の理由はこうです」と上司に説明してました。すると上司から「それでいい気がするけど、ここには気をつけたほうがいいんじゃない？」「その仮説でデータが正しくなる？？」などと助言をいただけるので助言を元に仕事を進める(or仮説を立て直す)ようにしてました。
問題を完全になくすことはできなかったものの、仮説を立てることで仕事がスムーズに進むようになるという点に関しては同感です。
私もついGoogleで「エクセル グラフ 見やすい」などと検索してしまうことが多かったです。しかしたくさん情報を集めて正解を見つけようとすると決められないことがあります。私の経験上それは考慮すべき条件が増えて情報の優先順位がつかなくっていることが原因じゃないかなと思います。検索にも時間がかかるので結果的に仮説検証を繰り返す方が効率がよくなります。
他に問題解決に必要なことはなんだろう？
少し自分のことを書きすぎました。
ここから今回の勉強会の内容です。
まず全員で仮説思考の他に問題解決に必要なことはないだろうか？と考えました。
実際に出た意見(一部)
・先入観にとらわれず、客観的な視点をもつこと
・問題に対し正確な説明ができること
・もし自分がエンジニアでなかったら…という視点
・商品を作る目的を考え直す
ちなみに私は「問題がユーザーに与える影響を考える」と答えました。
この記事を読まれたあなたはどう考えましたか？
問題解決に必要な、問題をみきわめる能力とは？
問題を見みきわめる能力とは一言でいうなら問題が発生しそうだ！と気づく能力のこと。
勉強会では"きざしに気づく"という言葉で言い換えられていました。
ではきざしに気づくためにはどうすればよいか？
大切なことは3つ
- 問題の存在を認める
- 真理から遠ざかる
- 本当に正しい方向か考える
このままではやや抽象度が高いと思うので補足します。
1.問題の存在を認める
問題が発生しそうな時にまず問題を問題として受け入れること。
人は自分にとって都合の悪い情報を自然にシャットアウトしてしまう本能がある(後述)。
2.真理から遠ざかる
特に、自分の中でこれが正しいと思っている結論があると1.の本能が強く働く。そのため一度そこから遠ざからなけれれば、問題に気づくことができない。
3.本当に正しい方向か考える
また真理から遠ざかるためには今進めている仕事の方向性が本当に正しいか考える必要がある。以下の2つの視点が大切。
- 今の進め方は本当にお客様にとって最善か？
- 楽なやり方で妥協していないか？
これら3つに気をつけて、ぜひ問題の発生を未然に防げる優秀なエンジニアになりたいものです。
確証バイアスに気をつけよう
確証バイアスとは
人間は自分の考えを検証する際に自分にとって都合のいい情報ばかりが目に入り、逆に都合の悪い情報には注目しない傾向があるということ
※勉強会の内容を元に科学辞典を参考に修正
例：作成したコードにエラーが見つかった時
Aさんは提出したコードのエラーが発生したので原因と考えられる箇所をすぐ修正した
→しかしエラーは他の箇所にも影響を及ぼしており、自分が原因と考えていた箇所は間違っていた。その影響を考慮していなかったために後々追加で修正が必要に！
都合の良い情報：目の前のエラーの解決につながりそうな手がかり
都合の悪い情報：自分が発見した箇所以外のエラーの発生原因
この例でAさんはとにかく目の前のエラーを解決することに必死になってしまった。原因と考えられる箇所をを発見したことで確証バイアスがかかり、発見した箇所以外のコード、エラーの根本原因に目を向けられていなかったことが問題。
★問題の根本原因を解消できているか？他にも発生しそうな問題はないか？を疑う！
確証バイアスを避け、問題解決できる優秀なエンジニアになるために
★視野広く、空気に流されない
確証バイアスの問題点
自分の中に既に結論があると結論に反する情報をシャットアウトしてしまう。
→問題に気づくことができない。
例：会議
知識や経験豊富な人が「この議題については問題ないよね」というと、会議の参加者はみんなその議題について問題ないと認識してしまいがち(確証バイアス)
→なぜその議題は問題ないのか？を疑う(=視野広く、空気に流されない)
→問題発生のきざしに気づくことができる
復習
今回は前回よりもかなりディープな内容でした。
要点をおさらいします。
- 問題発生のきざしに気づくにはまず問題を問題として認めることが必要
- 確証バイアスが問題を問題として認めることを阻害している
- 視野広く、空気に流されないことが確証バイアスを避けるために必要。今の進め方はなぜ問題がないのか？お客様のためになっているのか？疑う姿勢を見せよう
普段はTwitterやブログでプログラミング・読書・教育をメインに発信しています。
ツイートにリアクションしてくださる方、いつもありがとうございます。とても励みになってます。
これからもプログラミング学習・読書を中心にお役に立てるような情報を発信していきますので参考になった方はフォローよろしくお願いします。
ドットインストール「詳解CSS 基礎文法編」-1 【文章を効果的にみせる文字のスタイリングを知ろう】
ドットインストールまとめ記事、今回から「詳解CSS 基礎文法編」を扱います。
全3回で完結。
↓先に下記の記事でHTMLの復習をされることをおすすめします↓
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
- プログラミングをこれからやろうと思っているが難しそうで手が出ないと感じている方
- プログラミングの基礎学習を始めて数週間~1ヶ月の方
- ドットインストールを使ってプログラミング学習をしている方
→復習用に本記事をご活用ください！レッスン項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
また、基礎文法編のまとめが完結したら記事内に登場する技術を使ったWEBサイトを作って公開します。
そういった情報を見逃したくない方はぜひ読者登録してお待ちください！
- 【CSSとは】
- 【CSSによるスタイルの指定方法】
- 【cssの宣言】
- 【スタイルの継承】
- 【CSSの継承】
- 【ディベロッパーツール】
- 【文字の装飾】
- 【フォントの指定】
- 【行の高さを指定】
- 【line-heightの単位の有無】
- 【復習】
【CSSとは】
Cascading Style Sheetsの略
Cascading=cascade+ing
cascadeは名詞で(waterfallより)「小さな滝」
それが動詞になって「滝のように流れる」
という意味。
つまりCSSとは「親要素から子要素にstyleが滝のように流れるシートの組」を意味する。
こんな感じでスタイルが親要素(河口)から子要素(滝壺)へ流れていくわけです
【CSSによるスタイルの指定方法】
①head内にstyleタグを用意して書く
②要素にstyle属性を書き直接指定
③linkタグhref属性でcssにリンクを飛ばす
※cssの指定の結果は④
※VSCodeでは書いたリンクに該当するファイルがない場合Command+クリックでフォルダおよびファイルを作成できる。めっちゃ便利です。
htmlにリンクするcssを指定。これでスタイルはcssに、WEBページの枠組みはhtmlにまとめられるのでスッキリする。②のようにhtmlの要素にstyle属性を付ければスタイリングできるのだけどこれでは煩雑。またstyle属性では指定できないスタイルもある。
②はstyle属性で、④はcssのcolorプロパティで文字色を指定。それぞれ結果は同じようになる。
【cssの宣言】
・css内で①のように{}の外にある、スタイルを指定する要素のことをセレクター、{}の中身を宣言という(②)宣言の後は;をつける
・font-size …③
文字サイズを指定
・同じ宣言を複数すると後に書いたものが優先される…④
h1に文字色水色が一度指定されているがその後再度文字色について赤色と指定したので赤色が優先されている。フォントの大きさ12pxはpタグより小さくなる。
【スタイルの継承】
①親要素にcssを指定すると含まれる子要素すべてにスタイルcolorが適用される。これをスタイの継承という
②border
pxで線の太さ、solidは線の種類色を指定して境界線を引く。colorと違い継承されない
文字色は親要素(body)から子要素(h1,p)に継承されている。一方borderは継承されていない。
【CSSの継承】
①inherit
継承できない宣言につけることで無理やり継承できる
borderを無理やり継承。枠の中に枠ができた。
補足
CSSの継承の有無はMDNでプロパティを調べてあげるとわかる
colorプロパティ。先ほど実際に確認したように継承されます。
【ディベロッパーツール】
・Elementタグ
要素を選択または要素上で「右クリック→検証」で調べる…①
・Stylesタブ
スタイルの場所…②
スタイルの継承…③
ブラウザが標準でもつスタイル…④
・Computedタブ
設定されたプロパティの一覧を見られる…⑤
模写コーディング(既にあるサイトの写経)の際はディベロッパーツールを用いてどの要素にどのスタイルが適用されているのか調べるとよい
設定されているスタイルの一覧。こんなスタイルが設定されているんだなという感じで見てもらえればOK
【文字の装飾】
①font-size
文字のサイズ。単位px(ピクセル)で指定
②text-aling
テキストの配置。centerで中央揃え
③font-weight
テキストの太さ。太さはbold>normal
④text-decoration
lint-through：打ち消し線
underline：下線
none：装飾なし
h1のように中央揃えにするだけで一気にページタイトル感が増します。ここまでの内容で文字だけのサイトなら十分な仕上がりになるはず！
【フォントの指定】
①文字コードの指定。文字化けを防ぐ
②フォントの指定
③指定したいフォントを”,”で区切って表示優先度順に記述。機器の都合でフォントがない場合2番目以降のフォントが使われる
④ゴシック体系のフォントをまとめて指定
文字コードの指定は欠かせません
補足：総称フォントファミリー
serif：明朝体系
cursive：筆記体
fantasy：装飾書体
monospace：等幅文字
これらをfont-familyプロパティの最後に指定しておくことで、万一指定したいフォントがすべてない場合に対応できる。
参考
【行の高さを指定】
・line-heightで行の高さを指定(②)その際テキスト(16px,①)は上下の中央に配置されるので画像のケースでは(48-16)/2=16pxずつ上下に余白ができる
・行幅をテキストに対して3倍に指定。単位はem…③
横並びに複数の要素を配置したい場合などに知っておくとよいです。詳しくは後のレッスンでやります
【line-heightの単位の有無】
・単位あり
親要素の行幅の”数値”(ここでは64px)が継承される…①
・単位なし
親要素の行幅の”設定”(ここでは文字サイズの2倍)が継承される。自然な仕上がりになるのでこちらの方がよく用いられる…②
文字サイズの比率などをそのままデザインに反映する場合は②を使うとよいです
【復習】
今回は「詳解CSS 基礎文法編」の#1~#11を扱いました。
- linkタグでrel属性をstylesheet、href属性でファイル名を指定し、htmlとcssを紐づける
- 要素名などを指定して{}内にスタイルを記述
- 親要素から子要素にスタイルが継承されるものとそうでないものがある。inheritで無理やり継承可能。継承の有無はMDNで調べる
- ディベロッパーツールでスタイルがどう適用されているのか調べよう
- 文字、行の高さに関するプロパティを使えるようになろう
普段はTwitterでプログラミング・読書・受験勉強等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
【あなたは大丈夫？】WEB系エンジニアに求められるスキルとは？ ハセブロ勉強会復習 2020/04/30
ハセブロ勉強会0430 学習経過報告
この記事が長いと感じる方向けに下記ツイート内に板書画像を貼っております。よければそちらをご覧ください。
【ハセブロ(@hasebe_yuusuke )勉強会】
— 31日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年4月30日
2020/04/30
テーマ
WEBエンジニアに求められるスキルとは？
結論
・問題解決能力
・コミュニケーション能力
・前提を疑う力
詳細は写真にメモを貼ったのでご覧ください！#プログラミング#プログラミング学習#プログラミング初心者と繋がりたい pic.twitter.com/Q9y7OkGKjj
NEWS
・エンジニア経験のある方がコミュニティに参加してくださいました！
エンジニア経験5年目の方、そして20年以上の経験のあるベテランさんまで参加してくださっています。
話題性に興味を持ってくださっている方、とりあえずプログラミングはじめてみたけど何からやればいいのかわからない方、私のように初めて数ヶ月たったけど学習した内容に自信が持てない方などいろんな動機でみなさん集まってくださっています。
ぜひ覗きにきてください！
ハセブロプロジェクトとは？
前回の記事にまとめております。
こちらの内容は毎回の勉強会で繰り返し説明してくださっているので新しく参加した方でもついていけるようになっています。
↓記事はこちら↓
本日のトピック
「WEB系エンジニア実務シリーズ1 -WEB系エンジニアに求められるスキルとは？」
タイトルにもあります通りです。
勉強会では参加者の方がこの質問に対して自由に回答する時間がありました。
そこで出た意見としては
- お客様に対する提案力
- プログラミングの幅広い技術
- 自走力
などがありました。
WEB系エンジニアに求められるスキル
では具体的にみていきましょう。
WEB系エンジニアに求められるスキルはずばり
- 問題解決能力
- コミュニケーション能力
- 前提を疑う能力
です。
ちなみに私の回答は
「設計書をコードにする能力」
でした。全然違いますね。精進せねば…（泣)
順に見ていきましょう。
問題解決能力
【Point】
一文でまとめるならこういうこと
- 理想と現実のギャップを把握し
- 情報を集め
- 分析し
- 行動を起こす
能力
それぞれ詳しく見ていきましょう。
1.理想と現実のギャップの把握
ex.ポートフォリオ
理想＝自分のことを最も効果的に表現すること
理想通りの結果になるようにコードを書く
but
現実＝画像がうまく配置されない、縦横比が想定している通りにならない
「問題解決能力」の「問題」とは、理想と現実のギャップのことである。
2.,3.情報を集めて分析する
ただし、情報を集めるだけではダメ
集めた情報のうち1. の問題を解決することにつながるものはどれか？
を考え、そして試す
この作業の繰り返し＝分析
分析をする際は理想をなるべく具体化して考えることが大切！
4.行動する
1.~3.を繰り返して行動につなげる
これについてはあまり具体的には説明されていなかったように思います。
コミュニケーション能力
【Point】
一方的に言いたいことを話さない！
大切なのは聴くこと(傾聴)・聞くこと(質問)
ex.コードレビュー
エンジニア
★自分が書いたコードの意図を説明できるようにする！
ex.「ここのコードはこういう意図で、これはこういう意図で書いたんですけど、結果ここがこうなってて、これがこう困っています。これは試したのですが…」
レビュー者
★納得するまで聴く(聞く)
ex.「これはどういう意図で書いた？どういうことで困っている？何を試した？…」
前提を疑う能力
【Point】
ゼロベースで描くこと
エンジニアは今までなかった新しいものを作り出す仕事
→前提は必要か？前提がなぜ必要なのか？こういったことを考えることが必要。その際、過去の成功体験を捨てることも必要
ex.Wordpress
確かに便利で、実際シェアも高い。しかしブログやサイトを作る際に本当にWordpressでないといけないのか？
ex.QBハウス
それまでの男性向け理髪店の常識：カット＋髭剃り＋スタイリング+etc.
↓
この前提を疑い、
とにかくカットに特化！駅近10分程度で電車の待ち時間でカットができる理髪店として急成長
ex.ポートフォリオ制作
WEBエンジニアの就職活動＝ポートフォリオサイトで自分を表現
という前提を疑う
学習内容をブログに掲載して見せる、ブログをAPI連携してアプリにしてアプリを見せるなど、自分を表現する手段は他にもあるはず
補足：エンジニアマインド-質問の仕方について
【Point】
具体的に質問する！
- 質問
- 環境
- 症状
- インストール方法
- 試したこと
これらは最低限揃える
×エラーが出て動かないです。
⚪︎エラーが〜の時に発生しました。環境はこれで、…をインストールして、ターミナルにはこう入力しました。これも試したのですがダメでした。この状況を解決するための手段をご教示いただけますでしょうか？
※その後backlogの運用について説明がありました。コミュニティ内部向けなので割愛させていただきます。
今後もブログで勉強会について発信していきます。
普段はプログラミング・書評(ビジネス・教育)についてTwitter、ブログで発信しております。
この記事が参考になった方はぜひフォロー・読者登録していただけますと幸いです。
よろしくお願いします！
【Twitter1ヶ月目-経過報告】
— 31日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年4月30日
60人の方にフォローいただきました！
ツイートに反響をいただくこともあり、楽しく続けられてます😊
フォローしてくださっている方、ありがとうございます。
目標は
「2021年3月31日までに1000人」
にします。
これからもよろしくお願いします🙇♂️#Twitter初心者 pic.twitter.com/KYLVhtvC50
完全無料で初心者にもおすすめ！「ハセブロプロジェクト」のプログラミング勉強会に参加してきた
参加した経緯
【本日の勉強会】
— はせべ社長@年商5,000万エンジニア (@hasebe_yuusuke) 2020年4月27日
HTML、CSS、JavaScript
ランサーズの案件を実際に
見ながらアドバイスします
コミュニティ内の企画多数！
毎日勉強会21時スタート
完全無料コミュニティ
メンバー募集1,000名 (現在 190名)#プログラミング学習#プログラミング初心者#駆け出しエンジニアと繋がりたい
プログラミングを初めて4ヶ月なのですが、ずっと一人で学習してきてそろそろ人と一緒に学習する場所が欲しいと感じていました。
そんな自分の気持ちを察したかのように突如としてタイムラインにこのツイートが流れてきたので、真っ先に飛びつきました。
ハセブロプロジェクトとは？
長谷部 雄介（はせべ ゆうすけ）プロフィール｜haseblog
こちらのページから引用させていいただきます。
概要
未経験から年収1,000万エンジニアになるハセブロプロジェクト
※ハセブログHPより引用
理念
今よりもっと、新しい未来をつくる
・ものごとを決めつけない
・心構え次第で変わることを知る
・未来のことは、必ずゆとりをもって考え、世界を新しい目で見る奇跡は起こそうと思って起こせるものではないが、行動そのものに徹底的に集中していれば、自分の中に奇跡が生まれてくる。「かっこよく、かわいく、みんなが好きなことを仕事にして楽しく働けますように」と願いを込めて、2020年3月20日にスタートしました。
理念にシリコンバレーをはじめ、世界各国でエンジニア教育をおこなっています。
・学費完全無料
・24時間365日オープン
・経歴不問#ハセブロ プロジェクトは
「42 Tokyo」をお手本にしています。
※それぞれはせべ社長Twitterより引用
特徴
- プログラミング学習の進め方
大枠としては以下の通り
- 自分がやりたいこと、実現したい目標、現在の取り組みなどをまとめた個人カードをTrello上で共有
- はせべ社長およびメンバーからコメントがあり、状況を整理
- SlackおよびTrello上で相談、質問しながら案件探し→営業→案件獲得まで自分で進めていく
目標設定や案件の種類などは基本的にあまり決まっておらず、個々人のスキルやビジネススタイルに合わせて相談しながら設定していける。
- 完全無料！一切費用かかりません
- その他取り組み
・勉強会(毎日21:00~22:00)
・WEB制作案件の共同受注
・はせべ社長との個別面談
・飲み会(月1)
など…
2020/04/28 勉強会の内容と感想
概要
- はせべ社長の経歴
- ハセブロプロジェクトとは
- IT業界のビジネス構造
- 大手WEB制作会社の求人から考えるエンジニアの仕事と求められるスキル
- フリーランスに求められるスキルや経験
- エンジニア就職を目指す方向就職支援型プログラミングスクールの紹介
- コミュニティの概要
- 寄せられた意見・質問への回答
- 質疑応答
1.はせべ社長の経歴
2.ハセブロプロジェクトとは
簡単には上に書いた通り
- 2020年3月スタート
- WEB制作サービス(ハセブロプログラム上位5%通過した方のみで構成される完全フルリモートのサービス)
- 今後の目標：2025年までに在籍1000名・年商100億円、2030年までに在籍50000名・年商5000億円
3.IT業界のビジネス構造
発注元＞一次請け＞二次請け＞三次請けの流れで仕事の発注、受注が行われる
- 発注元
職種：社内SE
企業：事業会社(ex.国、日経グループ)
年収：〜750万円
仕事：構想策定/保守・運用
- 一次請け
年収：650~1000万円
仕事：案件定義/基本設計
- 二次請け
職種：SE/プログラマ
企業：システム開発会社/SIer子会社(ex.TDCソフト)
年収：400~650万円
仕事：詳細設計/開発/テスト
- 三次請け
職種：SE/プログラマ/テスター
企業：中小企業
年収：300~400万円
仕事：開発/雑多なテスト
4.大手WEB制作会社の求人から考えるエンジニアの仕事と求められるスキル
ex.株式会社キノトロープ
JAXA、セブンイレブン・ジャパン、近畿日本ツーリストなど大手会社のWEB制作実績あり
求人の例(エンジニア)
システムエンジニアのところにある
「仕様書を見てクラスを作成できる方」というのは
設計図を見てそれをコードに落とし込める方と言う意味。
5.フリーランスに求められるスキルや経験
ex.年収600万円
必須スキル
- JavaのFWでのシステム開発
- Javascriptでの開発が得意な方
業務
- 詳細設計
- プログラミング
- 単体テスト
6.エンジニア就職を目指す方向け就職支援型プログラミングスクールの紹介
インターノウス株式会社/エンジニアカレッジ
国内最大級の就活直結型 ITエンジニアスクール エンジニアカレッジ
7.コミュニティの概要
上に書いた内容について説明がありました
8.寄せられた意見・質問への回答および過去コミュニティで発信されたイベントの再告知
- コミュニティ運営の改善について
★あるあるエラーとその解決法の共有方法
【コミュニティメンバーから出た案】
・Slackでエラー内容共有、Trelloで課題解決の進捗管理
→Trelloで進捗管理すれば忘れられることがなくよいのでは？
・エクセルでQA表を作成
→エラー内容の共有は文書だけよりもソースコード実行画面の画像がある方が好ましく、エクセルだと貼り付け画像が増えると重くなるので不適か
・WEB上で課題共有
→上記のエクセルの課題を解消できるのでは
【はせべ社長の提案】
backlogの使用
タスク管理、ファイル共有もできるプロジェクト管理ツールBacklog
タスク管理やファイル共有ができるツール。日経グループでも使用されている。
メリット
・エラ〜ログのスクリーンショットの添付が可能
・git hub連携可能
・スタンダードプラン2400円/月~ (ただし制限あり)
※スタンダードプランだと1つのプロジェクトに30人しか参加できない。コミュニティ用にはせべ社長がアップグレードプランに加入してくださるのでコミュニティメンバーは無料です
9.質疑応答(コミュニティ議事録より引用)
- 『個別面談はどうやって申し込めば良いですか？』
⇨一次募集は終了して5月中旬まで埋まっているので、また募集します。募集したら是非応募して下さい。
- 『ちなみに勉強会の内容を個人のTwitterやブログで学習用に発信してもよろしいでしょうか？』
⇨是非どんどん発信して下さい。この活動をどんどん外にもアピールしていきたいので、どんどん呟いて下さい。
感想
- 完全無料なのでとてもありがたい！特にbacklogを無料で使わせていただけるなんて普通じゃありえないのでたくさん使わせていただきます。
- 自分と同様にプログラミングを頑張っている人がたくさんいることや彼らの学ぶ動機について知ることができた。
- プログラミング講師の社会的存在意義の大きさ、就職した後自分が担う業務の責任の大きさを実感した。
今後ハセブロ勉強会やコミュニティのことも発信していきますので参考になったと感じた方はポチッと押していただけますと幸いです。
よろしくお願いします！
また、Twitterでもプログラミングについて発信しているのでよければフォローよろしくお願いします！
ハセブロ(@hasebe_yuusuke さん)の勉強会初参加!
— とぅーご@プログラミング講師の卵🥚 (@togo_mentor) 2020年4月29日
【本日の概要】
・はせべ社長の経歴とビジョン
・エンジニアの仕事内容、求められるスキル
・コミュニティについて過去に寄せられた意見、質問等に関する回答
・その他質疑応答
でした。
明日復習記事をブログに投稿します！#今日の積み上げ
