2019年6月29日こんにちはカレイドです。前回は【プログラミング】独学から実務へ移って1週間で感じた壁と学び【前編】こちらの記事で実際の実務に取り組み始めてから感じた最初の壁について話しました。あぁこの役割は絶対必要だなって思った瞬間でした。細かいCSS正直自分の中では一番苦労しました。一通りHTML/CSSは手に付けてはいたのですが、細かい違いがダイレクトにユーザーの画面に反映されます。SPA(シングルページアプリケーション)においては1枚のページを複数のファイルにまたがって構成をするので、全体を把握しながらコーディングする必要があります。1つの画面表示に一つのファイルである場合は順番にCSSを適用していくだけで良いのですが、ファイルが複数にまたがっている場合にはそうはいきません。理由は下のコンポーネント(部品)は再利用されるからですね。わかりずらいので図で説明します。順を追って話していきます。通常のHTMLファイル1枚の場合まずは皆さんがよく見る通常のWEBページ1枚を想定してください。前回のGoogleの物でも構いません。あれが1枚のHTMLファイルとして再利用されることがない場合には上から順にアイテムを配置しながらcssを適用していけばオッケーです。思考の流れと適用が同じ方向なのであまり難しくはないです。HTMLファイル1枚といってもある程度再利用化する仕組みはあるのですが、私のイメージだとあまり細かく分けられている印象はないです。上のメニューバーとかは別で分けられて作っていたりしますが、その中のパーツ一つ一つまで分けられていることは少ないと思います。(もし分けていたら申し訳ないです)HTMLファイル1枚の中に複数の部品を配置する場合(再利用性を考慮)次にSPAの場合です。こちらは細かいパーツごとにファイルがわけられています。それらを集めて一つのListItems私の場合はアトミックデザインと呼ばれるデザインパターンを採用しています。詳しくは割愛しますがこれも、大規模なプロジェクトになるとそのコンポーネントの再利用具合や、例外が生じます。ある程度の経験則と今後の拡張性を把握する必要があります。私はそういった経験がまだほとんどなかったのですごい難しかったです。Listitemsの中にListItem+Dividerのような形にするのか。一つとしてはListItemの外側にmarginやpaddingとして空白をいれるのか、それともListItems側から内側に余白のPaddingを入れるべきなのか。いう細かい部分を自分がおろそかにしていたこともあってかなり難しかったです。1例ですが例えば最後のアイテムの下にはDividerは表示されないはずですよね?ですので最後の要素だけは別の対処が必要とかそういうものをあまり意識していなかったので微調整がすごい難しかったです。これはほんの一例ですので、今後も多分おろそかにしていたCSS部分が出てくるんじゃないかなと思います。誰でも陥いる難所、議論が生まれる場所なので正解はないこの話を聞いてじゃあ正解は結局何なんだと思った人もいると思います。私自身どれが正解はないと思っています。メンバー同士の意見のすり合わせ、今後の展開の共有が大事だと思っています。実際この個所は最初はListitemsの方に組み込んでいて最後の要素かどうかを判別してDividerを入れていました。レビューで内側のListItemの中にDIviderをいれたほうがスマートとなったので内側に入れようとしました。step1ListItemsの方でその要素が最後かどうかをチェックしてListItemへその内容を引き継ぐstep2ListItem側でそれをチェックしてDividerをつけるか否かをチェックする。次のレビューで、今回はListItem側はItem単一を示すからDividerには関与しないほうがいいということで元に戻しました。paddingはListItemでつけるのではなくてListItems側でつけることによって制御しようとなっていったん終わりました。(実際このパターンはかなり難しかったです)最終形は他のパーツとの組み合わせも兼ねて社員さんにお任せしたんですが、paddingは内側制御の方が理解がしやすかったのか、外側からはつけられていませんでした。コードのわかりやすさを取るかパターンを意識するかおそらくデザインパターン的には外から制御がいいのでしょうが、実装の難易度とわかりやすさの観点から中で制御したんだと思います。外からつける場合には内側にもつけて外からもつける必要があります。なると再利用化をしたときに小さくして配置したりする場合にはうまい具合に伸縮してくれません。px指定が多すぎる場合には固定されてしまうので柔軟な動きが取れません。以上のことを踏まえてたぶんそういう設計にしたんだと思います。一つわかるのはみんなそれぞれ実装の意図があって闇雲に実装しているわけではないということです。大事なのはなぜその実装をしたのかをきちんと考えているかどうか、そしてチームとして一番いい決定をキチンと下せるかどうかだと思います。これから磨いていくべきスキルの確認ここまでで5日間の流れはほぼ終了です。怒涛の一週間を終えて改めて学ばなければいけないなと思ったことをまとめます。ロジック部分には入っていないですが、ロジックは同実装しても最終的な結果は同じです。CSSと最初のコンポーネント設計はそのあとの設計に直結してきます。CSSの充実これからフルスタックとして働いていくときにはなぜその形がいいか正確に答えられるになる必要があります。ここが柔軟にできるとクライアントへの提案の幅も広がると感じています。逆にバックエンドはクライアントには直接影響する場所ではないのでやはりフロントを磨いていくべきだと思いました。Materiarl-UIなどのCSSプロパティを柔軟にいじってより見やすい形に出来るように。TypeScriptによる型設計で開発のスムーズさをそして各パーツにわたって設計を行う時にはTypeScriptと呼ばれる型指定を行っていくことでテキストエディタvscodeのオートコンプリートをうまく活用できるようになるので開発がスムーズになります。ちなみに他の会社から1件お話を頂いているのですがそこでもTypeScriptはやはり必要みたいです。これからJavaScriptを学ぶ方はぜひTypeScriptも一緒に学んでみるといいと思います。5日間を通して感じたこと、絶対に必要な存在まずは、独学からの実務への壁を一歩大きく超えた気がします。これからどんなプロジェクトに携わるとしてもリーダーのように、今どのようなコンポーネントが作成されていて、どのように活用しているかをしっかり把握している役割が絶対にいないと駄目だなと思います。開発スピード的に翻訳役は現時点での内容把握に徹するべきだなと思いました。スクラムマスターやリーダーみたいな存在の価値ってものを改めて認識しました!(私のチームは10人ほどしかいなくかなり役割がかぶってしまっている状況です)今回もデザイナーさんと開発の部分でうまく共有できていない部分があったり、開発同士でうまく共有できていない部分があったり(確か即興で僕のために課題作ってくれたみたいです)実際の現場でもこういう進捗のすり合わせっていうのが大事になってくるんだと改めて感じました!前編後編のまとめいかがでしたでしょうか。最初はいるときに生直速度が圧倒的と言われましたが、事実簡単だよって言われて渡されたものの中でも今までの自分のレベルと実務のレベルの壁を大きく感じました。それを圧倒的にフォローしてくれる仲間の温かさも感じられてチーム開発ってすごいなって改めて思いました。スタート一週間で会社に泊まって勉強するぐらいにはなれました。最新記事カレイド1994年生まれ。埼玉出身→20卒で最短で外資ITへ内定し来年4月入社予定です。4ヶ月本気でプログラミングを独学し、オリジナルアプリManehabiをリリース。独学プログラミングの進めや、自分の就活時代の攻略法や学びについてまとめています。コメントをキャンセルメールアドレスが公開されることはありません。生活を豊かにするWindows15年一筋の私がMacBookProを購入したお話【Mac最高】こんにちはカレイドです。Proを購入して早2週間以上過ぎようとしています。...プログラミングJavaScriptからReactへ。前回の記事では本当に初期の初期。これから一生付き合っていくことになるである基本部分についてのJavaScriptをご紹介しました。【Udemy】50講座以上取った筆者がおすすめ英語字幕講座と勉強法を解説してみる.評判のいいPyQに登録して実際に体験してみたのでレビューしてみる。2020年1月6日カレイド1994年生まれ。埼玉出身→20卒で最短で外資ITへ内定し来年4月入社予定です。4ヶ月本気でプログラミングを独学し、オリジナルアプリManehabiをリリース。独学プログラミングの進めや、自分の就活時代の攻略法や学びについてまとめています。