- 投稿日：2021-10-14T23:45:42+09:00
【フォーム】追加ボタンを押して関連した入力欄2つを同時に増やしていく方法
はじめに 今回以下のようなフォームは作ったので、備忘録として残しておきます。 HTML部分 create.brade.php <label>{{ __('材料') }} <a onclick=add() class="btn btn-sm btn-light">+追加</a> <div id="input_plural"> <div class="d-flex"> <input type="text" class="form-control mb-1" name="ing-name-1"> <input type="text" class="form-control mb-1" name="ing-size-1"> <input type="button" value="削除" onclick="del(this)"> </div> </div> </label> javaScript部分 main.js let inputPlural = document.getElementById('input_plural'); var count = 2; function add() { let div = document.createElement('DIV'); div.classList.add('d-flex'); var input = document.createElement('INPUT'); input.classList.add('form-control'); input.setAttribute('name', 'ing-name-'+count); div.appendChild(input); var input = document.createElement('INPUT'); input.classList.add('form-control'); input.setAttribute('name', 'ing-size-'+count); div.appendChild(input); var input = document.createElement('INPUT'); input.setAttribute('type', 'button'); input.setAttribute('value', '削除'); input.setAttribute('onclick', 'del(this)'); div.appendChild(input); inputPlural.appendChild(div); count++; } function del(o) { o.parentNode.remove(); } おわりに bootstrapを使ってちょっぴり整えているので、その点はご了承ください。
- 投稿日：2021-10-14T16:46:08+09:00
HTML&CSS_01 【RESTART】
HTML＆CSS_01 今回のテーマは「progate」の「HTML＆CSS初級編」を使って作れたものについて ※学習サイクルの詳細について知りたい方は前記事を参照ください フェーズ１_学習 「progate」「HTML＆CSS初級編」を学習 フェーズ２_記録 テキストファイル化し以下のコードに手記入でメモ書き HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <div class="header"> <div class="header-logo">Sample</div> <div class="header-list"> <ul> <li>Contents_01</li> <li>Contents_02</li> <li>Contents_03</li> </ul> </div> </div> <div class="main"> <div class="copy-container"> <h1>サンプルページへようこそ<span>!</span></h1> /* span や a はインライン要素の為、改行が行われない*/ <h2>色々なページのベースとして使う予定です</h2> </div> <div class="contents"> <h3 class="section-title">画像イメージ一覧</h3> <div class="contents-item"> <img src="https://pbs.twimg.com/profile_images/1421736526812041217/NYH8RA2G_400x400.jpg"> <p>img_01</p> </div> <div class="contents-item"> <img src="https://1.bp.blogspot.com/-mjkfErtfCTU/XXXObIPmwBI/AAAAAAABUto/0dQq-cQ5v64RR0IWbDgdlc10CgK2Or0jACLcBGAs/s1600/cat_wink_gray.png"> <p>img_02</p> </div> <div class="contents-item"> <img src="http://4.bp.blogspot.com/-1865joK51EI/Wb8gnbhjDpI/AAAAAAABGy4/ByWIh6Zt-hM-CCEzYWBxcuTJOOWz26kYwCLcBGAs/s800/pet_omocha_neko.png"> <p>img_03</p> </div> </div> <div class="contact-form"> <h3 class="section-title">お問い合わせ</h3> <p>メールアドレス（必須）</p> <input> <p>お問い合わせ内容（必須）</p> <textarea></textarea> <p>※必須内容は必ずご入力ください</p> <input class="contact-submit" type="submit" value="送信"> </div> </div> <div class="footer"> <div class="footer-logo">Sample</div> <div class="footer-list"> <ul> <li>サンプル内容</li> <li>サンプル画像引用先</li> <li>お問い合わせ</li> </ul> </div> </div> </body> </html> CSS body { /*タグ指定*/ font-family: "Meiryo UI"; /*フォント名*/ } li { list-style: none; /*リストの点消し*/ } .header { /*クラス指定*/ background-color: #26d0c9; /*背景色*/ color: #fff; /*文字色*/ height: 90px; /*縦のサイズ*/ } .header-logo { float: left; /*寄せ（左寄せ）*/ font-size: 36px; /*文字サイズ*/ padding: 20px 40px; /*パディング（ボックスの内側の余白）*/ } .header-list li { /*クラス内のタグ指定*/ float: left; font-size: 33px 20px; } .main { padding: 100px 80px; } .copy-container h1 { font-size: 100px; } .copy-container h2 { font-size: 50px; } .copy-container span { color: red; } .contents { height: 500px; margin-top: 100px; /*マージン（ボックスの外側の余白）*/ } .section-title { border-bottom: 2px solid #dee7ec; /*罫線*/ font-size: 28px; padding-bottom: 15px; margin-bottom: 50px; } .contents-item { float: left; margin-right: 40px; } img { width: 250px; /*横の幅（画像も自動で調整される模様）*/ } .contents-item p { font-size: 24px; margin-top: 30px; } .contact-form { margin-top: 100px; } input, textarea { /*タグ複数指定*/ width: 800px; margin: 10px 0 30px 0; padding: 20px; font-size: 18px; border: 1px solid #dee7ec; } .contact-submit { background-color: #dee7ec; color: #889eab; } .footer { background-color: #2f5167; color: #fff; height: 120px; padding: 40px; } .footer-logo { float: left; font-size: 32px; } .footer-list { float: right; } .footer-list li { padding-bottom: 20px; } メモ書き HTML ・span a はインライン要素の為、改行されない CSS ・font-famiry フォント名 ・list-style: none; リストの点消し フェーズ３_実践 「codepen」を使って実際にページ作成 メモ書きを行ったテキストファイルを使用する ※「0.25x」推奨 See the Pen サンプルページ by yuta-proto-biz (@yuta-proto-biz) on CodePen. フェーズ４_発信 この記事自体が「フェーズ４_発信」であるのでこの欄は「所感」とします 「フェーズ２_記録」にてテキスト出力し、メモ書きを行ったことで 理解が深まると共に「フェーズ３_実践」を行う際の「設計図」になりました 格段に作成がしやすくなったと感じます 過去記事へのリンク
- 投稿日：2021-10-14T16:04:34+09:00
プログラミングスクールの講師を2年間続けて限界が来て辞めた話
はじめに 某プログラミングスクールで二年間講師をしてました。 受講生の方からの評価点は平均より高く、最終的には全インストラクターの中から代表に選ばれる立場にまでなりました。 始めた経緯 もともと、プログラミングスクールをいつか開きたいと思っていたこともあり、業務委託契約で経験が積めそうなところに応募。 即採用していただき、正社員で働く傍、副業としてプログラミング講師に。 エンジニア歴は当時は5年 得意な言語はPHPのみでした。 コロナ禍で全てが変わった 特定を避ける為に細かな時期は記述しませんが、この復業を始めてから今も尚世界を苦しめているウイルスの流行で事が大きく変貌していきました。 というのも、私が請け負っていたプログラミングスクールでは生徒様が作成したいと言う物をベースにプログラミングを教えるスクールでした。 その中で、コロナ禍前までの生徒様達は明確に、 「ECサイトが作りたい」 「勤怠管理アプリを作りたい」 「ポートフォリオを作って、簡単な案件に挑戦できるようになりたい」 …etc のような明確としたゴールがありました。 私はその手助けをしたり、一緒に悩んだりしながらも最終的に生徒様達がプログラミングをやってよかったと言いながら旅立っていく姿が大好きでした。 違和感を感じ始めた1年前 コロナ禍でリモートワークが進み、働き方に変化が出てきた頃、ありがたい事にエンジニアという職種は一気に市民権を得た気がします。 また、将来性がなくなるような仕事も目に見えて増え、緊急事態宣言などの影響で時間が余ったという人たちが急増しました。 そんな人達を、引き入れようと当時は様々なプログラミングスクールが広告をバンバン打ち出し始めます。 「誰でもできる！」 「好きな時間に働ける！」 「高単価、高時給！」 「業界内〇〇%リモートワーク」 「この先伸びる仕事No.1！！」 はい、詐欺の広告かなんかですね。 上記のクソ広告のせいで、請け負わせて頂く生徒様のプログラミングを学ぶ理由が上記で記述した「明確な目標」から「稼ぐ手段」に変わりました。 昨日までパソコンのパの字も知らなかった人がプログラミングをする為に初めてパソコンを買い、初めて使ってみましたというレベルの方が激増することになりました。 すると、どうでしょうか 「ローマ字ってなんですか？」 「アプリってどうやって入れるんですか？」 「Zoomの使い方がわかりません。」 「インストールってなんですか？」 「携帯でプログラミングできないんですか？」 「持ってるパソコンが200x年のやつなんですけど大丈夫ですか？」 など、とてもじゃないが今からプログラミングをしようとするには思えない人たちが集まってきました。 もちろん稼げると言われる仕事があって、新しいことに挑戦している人を否定するわけではありませんし、たくさん稼ごうと思うのは悪いことではありません。 ただ、プログラミングに至っては地道な努力があってこそ稼げる物であり、何週間か勉強したからといってすぐにできる仕事ではないと感じています。 エンジニアになって一般的に稼げるのはある程度、現場を踏んで知見がついた段階でフリーとして独立した際に単価が上がるという仕組みだと思います。 会社員でバリバリとウン千万と稼いでる人はおそらく数える程しかいないんじゃないでしょうか。 それにプログラミングスクールって凄く割高ですよね。 高いが故に、お金を払えばできるようになるって思われがちなスクールの一つだと思っています。 そうです、コロナ禍になって増えた客層というのは「ジムと契約したらムキムキになれる」と思っている人達なんです。 私が実際に教えれるのは、週に1回1時間のみ ほかの時間は自分で学習をしてもらわないことには何も進められません。 ですが宿題を出しても、ほとんどの方が仕事が忙しいとの理由で進めませんし手もつけてくれません。 ですので、結果として卒業する頃には本当にちょっとだけHTMLとCSSを使ってサイトを作れるだけの人が出来上がります。 私としては「もったいないなぁ」と思い、受講生からすると「こんなにも払ったのにここまでしかできるようにならなかった！」とクレームです。 また、学習を進めてても調べ方が分からないのでエラーが出るたびに「答えを教えてください！」「なんかできません」「答えを教えてくれません」とクレームです。 他にも様々なクレームがありましたが面白すぎて書ききれません。 そして気づいた頃には、講義の日は絶対に体調を崩すようになり、急性ストレス性胃腸炎になりました。 エンジニアってわからないことに対してワクワクしながら調べて、問題を解決するのが一番楽しく私は続けています。 ですが、彼らにとっては稼ぐ手段の一つとしか見ていないことでしょう。 またどこかで、講師として戻る事はあるかもしれませんが、少なくとも今は一旦離れようと思った話でした。 これからプログラミングをやろうかなと思っている人へ まず、プログラミングという仕事に興味を持ってもらってめっちゃ嬉しいです。 自分のやっている仕事をやってみようかなと思ってくれてありがとうございます。 今、世の中の広告では「独学に限界がある」「個別指導してくれる」 など一人で勉強させないような広告がたくさんあります。 それを真に受けずにまず、自分でできるところまで進めてみてください。 少しお金はかかりますが素敵で様々なサービスがあるのでそちらを使ってみてください。 それでも無理なら、プログラミングスクールという手段も検討してみてもらえれば良いかなと思います。 ただ個人的には、プログラミングスクールにウン十万払うぐらいなら、同じ金額の家電製品買った方が多分人生は豊かになりますよ。 いやほんとに。 私が、今も初学者の時にやってよかったなと思う物を開発系のみになりますが、掲載しておきますのでご参考までに。 Udemy 多分、勉強する上で一番最強。 英語が聞けるなら英語圏の講師の動画も見れるので尚更おすすめ。 レベル別に分けておきます。 じっくり学習したい人におすすめ。 ■初学者向け フロントエンド Udemy HTML+CSS バックエンド Udemy PHP+Mysql HTML、CSS(sass)、JavaScript(jQuery)でサイトの見た目を作成してプログラムはPHPで記述するという 従来の一般的な開発方法です。 特に、PHPはまだまだ採用している企業も多く覚えることも少ない為、PHPを通してバックエンドを覚えると、この先他の言語に行った時も理解を助けてくれると思います。 ■慣れてきた人向け フロントエンド Udemy ReactJs バックエンド Udemy AWS 俗に言うサーバーレスフルスタックJS。 ReactJSと呼ばれるJavascriptのライブラリを使用してまるでアプリのようなWebサイトを構築します。 バックエンド側はAmazonが提供するAmazon Web Service通称AWSを使用します。 一年間は無料利用枠が存在しますが、何も考えずに使ってしまうとお金がかかるので注意してください。 多分この先はこの開発方法がメインになるはず。 Progate Progate home 初学者の時に一番助けてもらいました。 つまづきやすい環境構築などを全て投げ捨てて、ブラウザ完結できる最高のサービス。 月1,000円かかりますが、１ヶ月で全部やり切るぐらいのつもりでやればコスパ最強です。 とりあえずやってみたい方や、短期集中したい方におすすめ。 ドットインストール ドットインストール ホーム 1つ3分程度の動画を見て学ぶサービス。 基本無料で、プレミアプランに登録するとたくさん見れるようになる。 無料だけでも結構深いところまで知れることと、1回の動画が短いので学習の区切りがつけやすくてGood。 お金をかけずにとりあえずやってみたいという人にお勧め。 書籍 ■HTML CSS 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 Web制作者のためのSassの教科書 ■JavaScript スラスラ読める JavaScriptふりがなプログラミング 改訂新版JavaScript本格入門 ■PHP PHP7＋MariaDB／MySQLマスターブック PHPフレームワークLaravel入門 ■ReactJs 基礎から学ぶ React/React Hooks ■その他参考になった書籍 いちばんよくわかるWebデザインの基本きちんと入門 ノンデザイナーズ・デザインブック リーダブルコード 現場で困らない! ITエンジニアのための英語リーディング ストレングスファインダー さいごに ここまで読んでくださりありがとうございました。 学習する流れや、自分のやりたいことを実現するためのプロセスなどわからないことあればコメント、メールいずれでも結構ですのご連絡下さい。
- 投稿日：2021-10-14T11:40:02+09:00
ウェブページは作れませんでした 【RESTART】
ウェブページは作れませんでした（結論） 「progate」にて学習すること約1か月 「Web開発パス（Node.js)」を一通りこなしてみて とりあえず何かウェブページ作ってみるかと思った 結論、どうやって作ればいいのか解らず… 学習プロセスの見直し 「progate」だけ行ってしまうと自分の場合は インプットのみになってしまい、定着しないと反省 そこで以下のようなプロセスの仮説を立てて実行することにした 学習プロセスのフェーズ詳細 フェーズ１_学習 これまでと同じように「progate」のカリキュラムをこなすフェーズ フェーズ２_記録 「progate」で書いたコードをテキストファイル化して印刷、手書きで メモ等を加える（昭和生まれなのでアナログ手法） フェーズ３_実践 手書きメモを加えたテキストファイルを参考にして「Codepen」で作成する フェーズ４_発信 作成プロセスを言語化してQiitaの記事を作成する 人間は楽な方に流れる 計画を立ててプロセスを設定しないと どうしても楽なインプットだけに偏ってしまう それに気付かされた１か月だったと言える 過去記事