初めまして、開発本部のT.Aです。弥生では今年の3月、フロントエンジニア強化施策という取り組みが発足しました。この3月の取り組み(第一回目)を見ていたメンバーが、自分もやりたい!と参加者を集め、先月から第二回目を開催しています。私は業務上フロントに関わりないチームなのですが、「やりたい」と周囲に話していた所、参加させていただけることになりました。今回は運営メンバー3名、参加メンバー4名で施策を実施しています。簡単な自己紹介も添えているので、お時間ある方は各メンバーの欄を展開して、ご覧ください。質問すると丁寧に教えてもらえるS.UさんSMARTを開発している第一回目の参加者→今回の運営へ(前回記事)弱音を吐くと励ましてもらえる。入社から今に至るまでお世話になってます。導入がてら自己紹介を。新卒で入社し、現在二年目です。R.Tさんと同じチームでデスクトップ製品の自動テストを作成・実施しています。後は新卒の教育チームで後輩の研修や、ふりかえりを実施しています。スキル普段業務で使っているのはC#です。学生時代フリー配布のテンプレートを編集してサイトを作っていました。フロントスキルは「タグとセレクタって何?」「CSSって色変える以外に何ができるの?」というレベルでした。自分の作りたいもの(Webアプリ)を作るとっかかりを作る大学時代、演劇をしていて見るのもやるのも好きでした。社会人になってから忙しくなり、公演を見に行くことがめっきり減り...。好きな芝居は観たいけど、調べるために色んなサイト回るのは面倒くさい。そんな人(自分)のための小劇場・学生演劇に特化した検索アプリを作りたい!...と思い立ったはいいのですが、Web系の技術は種類が豊富すぎるし、Gitも開発環境も良くわからない。そのループを今年の3月くらいから繰り返していました。そんな時に知ったのが、このフロントエンジニア強化施策です。そこをきっかけにして、他(サーバーサイドとか、フレームワークとか)勉強しよう!長くなりましたが要するに、この施策をきっかけに自主学習を進めることを目標にしています。自分の中で「一から自分でデザインを考えて、調べながらサイトを作れる」ことができたら、フロントエンド少しはできると言っていいんじゃないかなと思っています。今まで、ネット上で配布されているテンプレートをいじってサイトを作ってきたため、一からサイトを作ったことがありません。何も見ずに作るのは無理でも、これを使えば実現できそう!と考えられるレベルにはなりたいです。他チームの方とたくさん話す普段はデスクトップ製品の自動テストを作成しているため、オンラインやウェブ製品の開発をしている方と関わりがほとんどありません。それらのチームの方と話して、どんな技術を使って開発しているのか知りたいです。基本定時後に行うペアプロで実施する1人がコーディング、もう1人がそれを見てこうした方がいいんじゃないか、とかを話しながら画面を作る成果物の作成が完了したら、レビューを行う最初の1週間でやったこと総まとめ第一週目は、HTMLとCSSの基礎を学べるような施策を実施しました。作ったものは全部で3つ。以下のGitに全てコミットしています。ペアプロの担当:オペレーター⇒私、ドライバー⇒D.Kさん一番印象に残っている施策です。画面自体はすぐに作成できました。display:flexを当てていました。PC用の画面はflexboxのアイテム(1)を、width:100%(横幅いっぱい)にしてアイテム(2)(3)を(1)の下に回り込ませていました。それではflexboxの良さを全く生かせていないとのこと...。頂いた指摘を元にコードを修正。上図の1(アイテム(1)(2)(3))しかdivで囲っていなかったのですが、2(アイテム(2)(3))もdivで囲み、それにもdisplay:flexを当てました。ペアプロの担当:オペレーターD.Kさん⇒、ドライバー⇒私ペアの先輩(D.Kさん)のすごさを実感した施策でした。この回は先輩がコーディングをしたのですが、指定されたスタイルをサクサク当てていくので、見ていて楽しかったです。ここで「詳細度」というものを教えてもらったのですが、なるほどと、わかった気になってしまい、次の施策で慌てることに...。ペアプロの担当:オペレーター⇒私、ドライバー⇒D.Kさんコピーペーストで部品を配置していく簡単(?)なトレーニング。お手本のデザインにならず四苦八苦しました。セレクタのトレーニングでなんとなくしかセレクタや詳細度を理解しなかったことが仇となりましたが、開発者ツールを駆使し、なんとか完成しました!まとめ施策を通じて学んだことHTMLとCSSについてflexboxを使った画面構成のやり方、レスポンシブ対応した画面の作り方を知った画面を見たときにどう作ればいいのか、というイメージがつくようになったCSSのセレクタの種類と詳細度について知ったセレクタ:種類とそれぞれのセレクタの使い方は分かった詳細度:概念は分かった。flexboxの理解はまだまだ...。実際にWebサイトを作って、理解を深めていこうと思います。とっかかりができたと自分では思っているので、繁忙期が終わったらフレームワークの勉強に手を出したいな~と思ってます!次の施策は......上の弥生カレンダーをHTMLとCSSで作成中。flexboxの新たな発見も有ったりしました。AppSyncについて勉強してみたこんにちは、弥生の八木です。...2018-12-21UWSCでデスクトップアプリの自動テストこんにちは。Ad...2018-12-18Slackのログ分析してみたこんにちは。弥生エンジニアの白井です。この記事はMisoca+弥...2018-10-09もくテク「最近のWeb技術についてワイワイ語る会」を開催しました!こんにちは。アーカイブはてなブログをはじめよう!yayoiTechさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。