shin yamaga

有限会社applepleさんで、エンジニアインターンシップをさせていただきました。 代表のかずみちさんと面談させていただいた事がきっかけで、参加させていただきました。 会社説明という目的の面談でしたが、インターン生がいると聞いた私はすぐさま『自分もインターンさせて欲しい！』とお願いし、無理を聞いてくださいました。HTML、CSS、JavaScriptの基本を抑えている事が参加の条件とのことでしたが、私はインターンに参加したい一心で「勉強しました！」と返事をし、インターンシップに参加させていただくこととなりました。実際は、JavaScriptの経験は全くなく、インターン2日前に猛勉強し後から辻褄を合わせました。（かずみちさん、すみませんでした…） 3日間の試用期間からスタートし、その期間の出来が良ければ長期インターンシップに参加させていただけるという流れです。（長期インターンシップの記事：https://www.wantedly.com/id/shin6142/items/b78caf2e-d231-42ab-a8af-0f0bd2ffdae3?fbclid=IwAR1wJnXPuwHzoka5nEQF1rgJclfCzZlV3bXWrzX91nQHm6Rck1deks46V0Y） 本記事では3日間の試用期間での経験を紹介します。 ☆3月15日〜17日（本インターン前の試用期間） 課題：”写真の枚数によって、レイアウトを変更するプログラム” Facebookの写真投稿で複数枚投稿時のように、 画像の形や枚数によって投稿後の表示レイアウトを変化させる機能をJavaScriptで実装する。（以下のブログに詳しく解説されています。→https://gaiax-socialmedialab.jp/post-25101/） HTML上で表示させているimageにJavaScript でCSSを付与するという方法です。 これにより、プログラムの知識がない人でもこのライブラリを使用すれば、自動写真レイアウト機能を使うことができます。 （Githubレポジトリ→https://github.com/shin6142/ImageLayoutAutomation） 1日目： Javascriptでの実装を始める前に、Facebookの投稿画像表示レイアウトをCSSで機能させることに取り組みました。画像が１枚の時、２枚の時、３枚、n枚...と枚数によって変わるCSSを理解した上で、 JavaScriptの実装に入るという流れです。 今回の課題ではflex デザインではなく、gridデザインが適していることに気がついたところで1日目が終了しました。 2日目： CSSでのレイアウト構造を理解した後、JavaScriptでHTML上のimage要素にCSSを付与するプログラムの実装に取り組みはじめました。 HTML上の画像枚数を取得し、height/width取得を利用した画像サイズ把握し条件分岐した結果に応じて、CSSを適応するという処理の流れです。2日目は、each文の繰り返し処理を利用して画像の枚数をeach文の繰り返し処理を利用して認識するところまで実装しました。 3日目（試用期間最終日）： 3日目はHTML上の画像height/widthを取得し、縦長画像の枚数によって最終的なCSSの適用を条件分岐する処理を実装をしました。 それぞれの画像に適したCSSを付与するため、繰り返し処理を利用してユニークなclass名を付与するなど、３日目でやっと気がつくことがたくさんありました。 成果報告＆感想： 実装したが動くことがゴールではなく、実際にそのライブラリを使用する人が導入しやすいよう、 UIやコードを整理する事が大切だというフィードバックをいただきました。 また、今までフロントエンド言語を深くと学習したことがなかっため、今回の経験はフロントエンド開発の楽しさや難しさを実感しました。今まの開発はフレームワークに頼っていたことを痛感しました。 今後の開発では、コメントを活用し、重複を避けるなどして誰もが読みやすいコードを意識します。また時間のある学生期間に、アルゴリズムなど、プログラムの基礎を学習しておきたいです。