プログラミングスクール受講してみた

Transcript

1. 株式会社Gear8 プログラミング スクール受講してみた SHUNYA ISHIZUKA
2. もくじ 自己紹介 プログラミングスクールに通っている話 WEBデザイン概論、HTML&DartSass まとめ [スクールに通っている気づき] 質疑応答
3. 自己紹介 【名前】石塚竣也 いしづか しゅんや 【役職】フロントエンドエンジニア 【Gear8歴】今年入社5年目+少しインターン 【業務内容】HTML/CSS/Wordpressのマークアップ/クライア ントとのMTG参加/撮影同行等 【休日の過ごし方】カメラ、温泉、キャンプ、ゲストハウス Facebook Twitter Instagram
4. 温泉・キャンプ カメラ
5. ゲニウス・ロキが旅をした ゲストハウスの名前 江別市大麻東町13-32（大麻 銀座商店街） 住所 https://www.ebetsu- kanko.jp/archives/sightseein g/4729.html 宿泊したい方はこちらまで
6. 今年1月から プログラミングスクール を受講してます
7. SUNABACO
8. 受講概要
10. 【1月中旬】 Illustrator、Photoshop画像加工 【1月下旬】 XDでのワイヤー作成、プロトタイプ 【2月上旬】 HTML&DartSass、jQuery 【1月上旬】 WEBデザイン概論、色彩・配色 レイアウト、タイポグラフィ 【2月中旬~下旬】 Vue.js、Vue CLI、Firebase 【3月】 卒業制作、Vue.jsで1サイト作る スクールの カリキュラム 1月〜3月まで、こういうの学んでます。
15. 受講のきっかけ
16. 受講のきっかけ Twitterやウェビナーでよく目にする、 Nuxt.js、Vue.js、Firebase等のHTML ではない言語を学ぶきっかけがない Web制作のトレンドに 追い付いていない 入社して早５年... もう一回基礎から やり直したいと思った スクールが自宅近くに あった 札幌や東京のプログラミングスクール をオンラインで受けることが多い中、 江別にスクールがあった 実務ベースで仕事を覚える事が多かっ たが、もう一度初心に戻ってわからな いことを整理する時間がほしいと思っ ていました。
17. 改めて初歩から やり直してます
18. 【1月中旬】 Illustrator、Photoshop画像加工 【1月下旬】 XDでのワイヤー作成、プロトタイプ 【2月上旬】 HTML&DartSass、jQuery 【1月上旬】 WEBデザイン概論、色彩・配色 レイアウト、タイポグラフィ 【2月中旬~下旬】 Vue.js、Vue CLI、Firebase 【3月】 卒業制作、Vue.jsで1サイト作る スクールの カリキュラム
19. ②HTML&DartSass → -セマンティック・ウェブ 　 - Atomic Design 　 - DartSass ①WEBデザイン概論 →Web史を紹介1990年代初期：古代〜現代まで 2点に絞って 共有します
20. ①WEB概論を紹介します
21. Question1 世界初のWebサイトは何年 に公開されたでしょう？
22. Anser1 世界初のWebサイトは1991年8月6日に公開。 まだ30周年ほどしか経っていません。 ソフトウェア名は、「WWWクライアント」 ページ名は、「World Wide Web」 イギリス人のティム・バーナーズ＝リー博士 が特許を取らずにオープンソースとして公開した のが、世界中にWebサイトが広まるきっかけ。
23. 「Photoshop 1.0」 の誕生 今では必須なPhotoshopも、1990年に Adobe Systemsから、オープンソース で公開 https://creativebits.org/the_first_version_of_photoshop/
24. この頃のWebサイトは、テキストしか表示できません😭
25. Question2 1993年、初めて画像の表示出来る ブラウザが誕生しました。 そのブラウザの名前は？
26. Anser2 1993年 初めて画像の表示出来る 「Mosaic（モザイク）」というブラウザが誕生。 https://ja.wikipedia.org/wiki/NCSA_Mosaic
27. 世界初のWebバナーは、 1994年10月にウェブマガジン「HotWired」が設置しました。
28. ウェブサイト世界基準 [W3Cの設立] W3Cは、HTML、XHML、XML、または CSSマークアップ言語のスタンダードを開 発し公開。 ウェブページの共通基準がつくられました https://www.w3.org/
29. Amazon.comサイト の誕生 1994年7月5日に、Amazon.comで最初の オンラインストアが立ち上げられました。
30. 1995年以降の Webデザインの特徴 配色、テーブルベースのレイアウト、GIF 画像の利用や訪問者数のカウントなども 可能になりました。
31. hetemlが90年代サイト を再現 懐かしさに浸りたい方はどうぞ https://heteml.jp/uso/top/index.html
32. 1990年代後半 Flashデザイン全盛期 90年代後半、ウェブデザインを変革する新しいイノ ベーション「Flash」が導入 Flashの登場によって3Dボタンや色を変化させるナ ビゲーションなど、ウェブデザインの可能性を大き く拡張された しかし、セキュリティが脆弱性があり、 Adobe Systemsは2020年末でFlashの提供を終了
33. 2000年代初頭 「ユーザビリティ」重視 2000年代になりCSSへの対応が普及し、 レイアウトの自由度が上がった。 余白を使ったデザインや、世界で初の「レスポンシ ブデザイン」は、このころ自動車メーカーの 「Audi」が導入
34. 懐かしい90年代から現代の Webサイトの移り変わりを ざっくりお見せします。
35. Wikipedia（ウィキペディア）2001年
36. Google（グーグル）1998年
37. YouTube 2005年
38. Twitter（ツイッター）2006年
39. Yahoo（ヤフー ）1994年
40. Facebook（フェイスブック）2004年
41. 2007年以降のWebデザイン
42. iphoneの登場によりスキューモフィズムデザインが身近なものに
43. 2013年以降からはフラットデザインが主流に
44. 2013年頃、Windows8がメトロデザインを採用
45. 2022年現在の主流はマテリアルデザイン
46. Question3 最近見かける立体的で質感のあるこちらは何？
47. Anser3 正解は、ニューモーフィズム でした。
48. Anser3 New（新しい）＋Skeumorphism（スキューモーフィズム） ＝Neumorphism（ニューモーフィズム）
49. Webサイト/デザインの 移り変わりはとっても早いです
50. 昔のサイト懐かしいなと思った人 は、当時見ていたWebサイトを 教えてほしいです...笑 僕はおもしろフラッシュばかり見 てました
51. HTML&DartSass、jQuery → -セマンティック・ウェブ 　 - Atomic Design 　 - DartSass WEBデザイン概論 →Web史を紹介1990年代初期：古代〜現代まで 次はHTML.CSS について
52. ②HTML&DartSass
53. 個人的悩み① HTMLをW3C に遵守してしっかりかけているか 入社したときから、既存サイトの修正をしたり、新規でWeb構築を始めるけど、 HTMLのタグやアクセシビリティに意識してかけているのか...ちゃんと書きたい〜 スクールで解消したかった
54. HTMLにはちゃんと マークアップ基準があります！ モダンなHTMLの書き方 〜Semantic が止まらない〜 https://devlog.atlas.jp/2017/10/30/1662
55. セマンティック・ウェブとは？ "セマンティック・ウェブ（英: semantic web）は W3C のティム・バーナー ズ＝リーによって提唱された、ウェブページの意味を扱うことを可能とする 標準やツール群の開発によってWWWの利便性を向上させるプロジェクト。"
56. 要は「HTMLを”意味”にもとづいて マークアップしよう」という考え方 <div> <h1>タイトルです</h1> <p>内容です</p> </div> これらのタグはそれぞれ、「見出し」「段落」という情報（意味）を持って いる。
57. セマンティックHTMLにする意味 セマンティックにするメリットは、主に2つ ①検索エンジン最適化 →検索エンジンが理解しやすいように、マークアップの構 造化する必要がある。 ②アクセシビリティ →ウェブサイトの文章を読み上げるスクリーンリーダー が、解析しやすいようにする
58. セマンティックHTMLをわか りやすく解説しているサイト 【コードキッチン】 https://code- kitchen.dev/tags/%E3%82%BB%E3%83%9E%E3 %83%B3%E3%83%86%E3%82%A3%E3%83%83 %E3%82%AFHTML/
59. セマンティックHTML をチェックするサイト Gear8サイトでチェックしたところ、Altの指 定や、sectionを使っているのにhタグが無い とのエラーがでる。 sectionはhタグがないとセマンティックでは ない。知らなかった... とかとかあります。リリースチェックでやる べきか。 【Nu Html Checker】 https://validator.w3.org/nu/
60. 個人的悩み② CSSの設計の流行を追えているか。 なんとなくCSS3を使っていて、あっという間にdisplay:gridや、aspect-ratio のプロパティなど、CSSで出来ることが増えている。最新のCSS設計ってどうなの〜 スクールで解消したかった
61. Atomic Design CSSの設計には「Atomic Design」 の考え方があるとのこと。 Atomic Design とは コンポーネント単位で定義していく UI デザイン手法。 コンポーネントに細かいレイヤーがあり再利用可能性 を上げることができる。
62. Atomic Design ・Atoms（原子） ・Molecules（分子） ・Organisms（有機体） ・Templates（テンプレート） ・Pages（ページ） UIの構造を次の5段階で考える。
63. Atomic Design
64. Atomic Design
65. Atomic Design
66. Atomic Design
67. Atomic Design
68. Atomic Design それぞれをパーツ分けして、 再利用しやすいCSS設計にする 必要がある。 CSS設計ってどんなのがあるの？
69. Atomic Design 実はいま出ているCSSは、 ・OOCSS ・BEM ・SMACSS ・MCSS ・PRECSS ・FLOCSS と主に6種類くらい。
70. Atomic Design ・OOCSS ・BEM ・SMACSS ・MCSS ・PRECSS ・FLOCSS 僕らの最近は、おそらく「PRECSS、FLOCSS」 入社当時は、「BEM」が多かった。 スクールに通うまで、使っているCSSが 何系なのか理解してなかった...
71. Atomic Design ちなみに、今社内で使っている「LibSass」も、 2022年10月もサポート終了になる。 ※ @importがつかえない →M1のMacの開発環境で、npmのパッケージ 「node-sass」が使えないことが原因。 以降は「Dart Sass」に移行が必要。 →エンジニアチームで以降検討中。
72. まとめ
73. ①外部の情報を得る機 会が増えた Gear8のエンジニアは、 今は社内で3人なので、新 しい情報は各自で仕入れる しかない。 スクールに通う メリット ③ ②
74. ①外部の情報を得る機 会が増えた Gear8のエンジニアは、 今は社内で3人なので、新 しい情報は各自で仕入れる しかない。 スクールに通う メリット ③ ②Twitterのフォロワ ーが自然と増えた スクール生との繋がりや、 ハッシュタグを付けてのツ イートで、角度の高いつぶ やきができる。
75. ①外部の情報を得る機 会が増えた Gear8のエンジニアは、 今は社内で3人なので、新 しい情報は各自で仕入れる しかない。 スクールに通う メリット ③ ②Twitterのフォロワ ーが自然と増えた スクール生との繋がりや、 ハッシュタグを付けてのツ イートで、角度の高いつぶ やきができる。
76. ①外部の情報を得る機 会が増えた Gear8のエンジニアは、 今は社内で3人なので、新 しい情報は各自で仕入れる しかない。 スクールに通う メリット ③実務経験がある人ほ ど、学びがあるかも 経験0の状態で、デザイン、コ ーディング、Vue.jsの開発を2 ヶ月で学ぶのは大変だと思 う。現役の学生さんすごい。 ②Twitterのフォロワ ーが自然と増えた スクール生との繋がりや、 ハッシュタグを付けてのツ イートで、角度の高いつぶ やきができる。
80. 気になる方は、ぜひスクールに 申し込んでみてください。 目標は社内でVue.jsの実績を 獲得するところです。 ありがとうございました！