背景
– 現在教えている方々に発表の機会を与えて経験を積んで欲しい
– 自分の得意分野 or 伝えられることを知ってもらい自身の武器にしてもらいたい
– 勉強会を通して交流を持って頂き、コミニュケーションをとってもらいたい

と思います

1ヶ月ぐらい前から決まっていて、手を挙げてくれたかたが発表してくれます

## タイムテーブル

22:05 ~
## 「モンハンで理解する非同期処理の書き方」
– @_syoyamamoto_

22:35 ~
## 「センスじゃなく理論で作れる配色の基本」
– @uki1x

23:05 ~
## 「Why フリーランス people?! 〜ママの考える最適な働き方〜」
– @fuwafuwahappy

【ゆる募】#もりけん塾 #勉強会 に参加したい方
– 時間: 7月24日22:00 – 23:30
– 場所: Discord
– 発表者: @_syoyamamoto_ @uki1x @fuwafuwahappy

ふむふむと聞くだけでok
※参加希望される方はRT & 発表者をフォロー後こちらにコメントください〜
前回の様子https://t.co/b2ly5M0pNl

続く pic.twitter.com/JtFWQ5ll3E

— フロントエンドエンジニア (@terrace_tech) July 21, 2021

です

よろしくお願いいたします

最近では利用規約をユーザーが実際に見たかという実装が必要になるケースがあります。ただのcheckboxをtrueにする実装だけだと法律上意思を持っていないとみなされるのかもしれないです。
機能的にそれを「見た」とするためには…

今回の課題仕様は
利用規約リンクを押したらモーダルをopenにして、その中で利用規約を表示、スクロールして下まで行った or 一番下が現れた場合 checkboxをtrueにします
これを実装するにはどうしたらいいでしょう(下記コードは @GT0b4 さんのにscroll箇所だけ修正を加えたものです)

1. scrollで判定する場合

2. intersectionObserverで判定する場合

検証は、デバイスを変えて、trueになる瞬間がコンテンツ下が画面に含まれていることを確認します

scrollの場合

interSectionObserverの場合

https://medium.com/@jbbpatel94/difference-between-offsetheight-clientheight-and-scrollheight-cfea5c196937

【nodenvを使おう!】nodenvをハンズオンで設定する勉強会をしました

### 前提

– Macユーザー winの方はnvm-windowsっていうのがあるみたい(こちらとかこちら)
– ある程度コマンドに慣れている

昨夜nodenvを使うための勉強会をしました

node周りをどこで何で教えるか、簡単に教えるにはっていうところで模索するところがあったが
今回はnodenvを使って教えてみることにした

本家ドキュメント
ドキュメント

実はPATHを通すとかの話はフロントエンドに限らず開発者としては当たり前に知っていなくてはいけないことで
そこの知識は自分自身、フロントエンドエンジニアになってから、もっというとフリーランスになってから改めて勉強しなおしたところで、
これを早く知っていればもう少し理解が早かったなという思いから
見習いの方々にいち早く触れてもらおう、理解してもらおうという試みでした

ハンズオン資料

anyenvという他プログラミング言語のバージョン管理もありますが、それを伝えようとするとちょっとややこしくなりそうだったので
nodenvのみを取り扱いました

anyenvで管理する方がいいのかもしれないですがここではnodenvとshell周りの知識を伝えたいかったので単純化しました

実は昨日の勉強会は次の勉強会の前提知識になるので出た方はラッキーだったのです
shell、.bash_profile, .bashrc or .zshrcなどの設定、環境変数、パスを通すみたいなのはフロントというより開発者として必須なので

— フロントエンドエンジニア (@terrace_tech) May 29, 2021

塾生の感想

昨日は #もりけん塾 勉強会でした。nodeとはなんぞや、から始まり、フロントエンドエンジニアとして働くのであれば、必ず必要になってくる知識が盛り沢山な内容でした。shell, .bash_profile, .bashrc, .zshrc 聞いたことないワードがいっぱい出てきたので今日は復習から始めます@terrace_tech https://t.co/cupxngNimw

— あみ – フロントエンドエンジニアになりたい (@ami_webdev) May 29, 2021

この辺りの知識全然なかったので参加して本当に良かったです。
一人一人の画面みながら丁寧に分かりやすく説明してくださるとても良い先生です

「どこで躓いたか教えて下さい。絶対助けるので」
って言ってた先生がカッコ良すぎた。#もりけん塾@terrace_tech https://t.co/v0F4GTSpOZ

— やまもとしょう@インハウスデザイナー兼コーダー (@_syoyamamoto_) May 29, 2021

昨日こちら参加しました
今までぼんやり理解してた所だったので改めて教えていただたいて点と点が線になりました。環境構築をする時に目にするワードばかりだったので、早く｢自分のもの｣にしたいです#もりけん塾@terrace_tech https://t.co/I6hfJgie5N

— もなか@JS詰まるとパン作る人 (@ruby443n) May 29, 2021

昨日は、もりけん塾（@terrace_tech )nodeを管理するための勉強会を開いていただきました。
案件でgulpを使う時、nodebrewを使うと毎回nodeバージョンを切り替えないといけなかった。しかし、nodenvを使えば自動的切り替えてくれるとのこと実務で早速使おう！

— ヤス (@yasu_front) May 29, 2021

もりけん塾学習用(利用規約雛形)

こちらの会員登録作成の課題のための利用規約雛形です。

※もりけん塾学習の為以外の実際のサービスに使われても一切責任は負えません。

こちらをコピペして課題に取り組んでみてください。

“`

利用規約

この利用規約（以下，「本規約」といいます。）は，＿＿＿＿＿（以下，「当社」といいます。）がこのウェブサイト上で提供するサービス（以下，「本サービス」といいます。）の利用条件を定めるものです。登録ユーザーの皆さま（以下，「ユーザー」といいます。）には，本規約に従って，本サービスをご利用いただきます。

第1条（適用）

1. 本規約は，ユーザーと当社との間の本サービスの利用に関わる一切の関係に適用されるものとします。
2. 当社は本サービスに関し，本規約のほか，ご利用にあたってのルール等，各種の定め（以下，「個別規定」といいます。）をすることがあります。これら個別規定はその名称のいかんに関わらず，本規約の一部を構成するものとします。
3. 本規約の規定が前条の個別規定の規定と矛盾する場合には，個別規定において特段の定めなき限り，個別規定の規定が優先されるものとします。

第2条（利用登録）

1. 本サービスにおいては，登録希望者が本規約に同意の上，当社の定める方法によって利用登録を申請し，当社がこれを承認することによって，利用登録が完了するものとします。
2. 当社は，利用登録の申請者に以下の事由があると判断した場合，利用登録の申請を承認しないことがあり，その理由については一切の開示義務を負わないものとします。
   1. 利用登録の申請に際して虚偽の事項を届け出た場合
   2. 本規約に違反したことがある者からの申請である場合
   3. その他，当社が利用登録を相当でないと判断した場合

第3条（ユーザーIDおよびパスワードの管理）

1. ユーザーは，自己の責任において，本サービスのユーザーIDおよびパスワードを適切に管理するものとします。
2. ユーザーは，いかなる場合にも，ユーザーIDおよびパスワードを第三者に譲渡または貸与し，もしくは第三者と共用することはできません。当社は，ユーザーIDとパスワードの組み合わせが登録情報と一致してログインされた場合には，そのユーザーIDを登録しているユーザー自身による利用とみなします。
3. ユーザーID及びパスワードが第三者によって使用されたことによって生じた損害は，当社に故意又は重大な過失がある場合を除き，当社は一切の責任を負わないものとします。

第4条（利用料金および支払方法）

1. ユーザーは，本サービスの有料部分の対価として，当社が別途定め，本ウェブサイトに表示する利用料金を，当社が指定する方法により支払うものとします。
2. ユーザーが利用料金の支払を遅滞した場合には，ユーザーは年14．6％の割合による遅延損害金を支払うものとします。

第5条（禁止事項）

ユーザーは，本サービスの利用にあたり，以下の行為をしてはなりません。

1. 法令または公序良俗に違反する行為
2. 犯罪行為に関連する行為
3. 本サービスの内容等，本サービスに含まれる著作権，商標権ほか知的財産権を侵害する行為
4. 当社，ほかのユーザー，またはその他第三者のサーバーまたはネットワークの機能を破壊したり，妨害したりする行為
5. 本サービスによって得られた情報を商業的に利用する行為
6. 当社のサービスの運営を妨害するおそれのある行為
7. 不正アクセスをし，またはこれを試みる行為
8. 他のユーザーに関する個人情報等を収集または蓄積する行為
9. 不正な目的を持って本サービスを利用する行為
10. 本サービスの他のユーザーまたはその他の第三者に不利益，損害，不快感を与える行為
11. 他のユーザーに成りすます行為
12. 当社が許諾しない本サービス上での宣伝，広告，勧誘，または営業行為
13. 面識のない異性との出会いを目的とした行為
14. 当社のサービスに関連して，反社会的勢力に対して直接または間接に利益を供与する行為
15. その他，当社が不適切と判断する行為

第6条（本サービスの提供の停止等）

1. 当社は，以下のいずれかの事由があると判断した場合，ユーザーに事前に通知することなく本サービスの全部または一部の提供を停止または中断することができるものとします。
   1. 本サービスにかかるコンピュータシステムの保守点検または更新を行う場合
   2. 地震，落雷，火災，停電または天災などの不可抗力により，本サービスの提供が困難となった場合
   3. コンピュータまたは通信回線等が事故により停止した場合
   4. その他，当社が本サービスの提供が困難と判断した場合
2. 当社は，本サービスの提供の停止または中断により，ユーザーまたは第三者が被ったいかなる不利益または損害についても，一切の責任を負わないものとします。

第7条（利用制限および登録抹消）

1. 当社は，ユーザーが以下のいずれかに該当する場合には，事前の通知なく，ユーザーに対して，本サービスの全部もしくは一部の利用を制限し，またはユーザーとしての登録を抹消することができるものとします。
   1. 本規約のいずれかの条項に違反した場合
   2. 登録事項に虚偽の事実があることが判明した場合
   3. 料金等の支払債務の不履行があった場合
   4. 当社からの連絡に対し，一定期間返答がない場合
   5. 本サービスについて，最終の利用から一定期間利用がない場合
   6. その他，当社が本サービスの利用を適当でないと判断した場合
2. 当社は，本条に基づき当社が行った行為によりユーザーに生じた損害について，一切の責任を負いません。

第8条（退会）

ユーザーは，当社の定める退会手続により，本サービスから退会できるものとします。

第9条（保証の否認および免責事項）

1. 当社は，本サービスに事実上または法律上の瑕疵（安全性，信頼性，正確性，完全性，有効性，特定の目的への適合性，セキュリティなどに関する欠陥，エラーやバグ，権利侵害などを含みます。）がないことを明示的にも黙示的にも保証しておりません。
2. 当社は，本サービスに起因してユーザーに生じたあらゆる損害について一切の責任を負いません。ただし，本サービスに関する当社とユーザーとの間の契約（本規約を含みます。）が消費者契約法に定める消費者契約となる場合，この免責規定は適用されません。
3. 前項ただし書に定める場合であっても，当社は，当社の過失（重過失を除きます。）による債務不履行または不法行為によりユーザーに生じた損害のうち特別な事情から生じた損害（当社またはユーザーが損害発生につき予見し，または予見し得た場合を含みます。）について一切の責任を負いません。また，当社の過失（重過失を除きます。）による債務不履行または不法行為によりユーザーに生じた損害の賠償は，ユーザーから当該損害が発生した月に受領した利用料の額を上限とします。
4. 当社は，本サービスに関して，ユーザーと他のユーザーまたは第三者との間において生じた取引，連絡または紛争等について一切責任を負いません。

第10条（サービス内容の変更等）

当社は，ユーザーに通知することなく，本サービスの内容を変更しまたは本サービスの提供を中止することができるものとし，これによってユーザーに生じた損害について一切の責任を負いません。

第11条（利用規約の変更）

当社は，必要と判断した場合には，ユーザーに通知することなくいつでも本規約を変更することができるものとします。なお，本規約の変更後，本サービスの利用を開始した場合には，当該ユーザーは変更後の規約に同意したものとみなします。

第12条（個人情報の取扱い）

当社は，本サービスの利用によって取得する個人情報については，当社「プライバシーポリシー」に従い適切に取り扱うものとします。

第13条（通知または連絡）

ユーザーと当社との間の通知または連絡は，当社の定める方法によって行うものとします。当社は,ユーザーから,当社が別途定める方式に従った変更届け出がない限り,現在登録されている連絡先が有効なものとみなして当該連絡先へ通知または連絡を行い,これらは,発信時にユーザーへ到達したものとみなします。

第14条（権利義務の譲渡の禁止）

ユーザーは，当社の書面による事前の承諾なく，利用契約上の地位または本規約に基づく権利もしくは義務を第三者に譲渡し，または担保に供することはできません。

第15条（準拠法・裁判管轄）

1. 本規約の解釈にあたっては，日本法を準拠法とします。
2. 本サービスに関して紛争が生じた場合には，当社の本店所在地を管轄する裁判所を専属的合意管轄とします。

以上
“`

矢印

結構細かくやります。

流れはご自身が課題に感じていることを共有してもらいます

その課題に対して自分が課題を与えます

またそれに伴い

githubとgitを学んでもらいます(わからない方は教えたりします)

コードは全部github上で管理してもらいます。

(入塾の際にgithubアカウントを作ってもらいます)

できたらプルリクエスト(コードレビューをうけるもの)を出してもらいます

自分がそのコードに対して修正提案をします

塾生はそれを修正してより完成度をあげてもらいます

これらは初学者のうちから学んでおくとかなりアドバンテージがある状態で現場に臨めます

そこのリアルな価値観を得てもらいます

レビューはこんな感じです

現場に入った時と同じ作業を経験でき、お作法なども事前に知ってもらいます

こちらはsandboxです。

実際にコードを書いてもらってそれをみたりします。

コードレビュだけではなく

githubからフォルダを実際に落として

ブラウザ上でレビューしたりもしています。

かなり細かいので勉強になると思います

もりけん塾はこんな感じで活動しています

# [もりけん塾] 課題の素材。無料ローディング画像 loading-circile.gif

こちらから

もりけん塾 フロントエンド エンジニア養成課題5の回答zipフィル

解答を得る前に本当に考え尽くしましたか?

– わからなくて悩むことはかなりあります。1,2日かかることもあります。
– 解答ではなくやったことのプロセスやいろいろなアプローチの発見が大事だったりします

チェックシート
– すでにどこかにエラーが表示されていませんか？ -> 答えを言ってくれています。そのままググればよいこともあります
– 何がわからなかったか言語化しましたか？
– 分からないことを誰かに伝えましたか？(誰かに伝えることで論理的になり自分で気づくこともあります)
– 仕様を見にいった？
– 英語記事も調べた?

こちらからどうぞ

役に立ったなと思っていただけたら是非フォロー、広めていただけたら嬉しいです。