【MUPカレッジウサギクラス限定】スキル別講義_プログラミングスキル(④～⑥)(2020年配信)

MUP-TV講義(④～⑥)約30分動画の内容です。

プログラミングとはなにか？
エンジニアとはなにか？
これからプログラミングを学ぶ、仕事にしようと考えている、
という方向けの講義です。

実際にMUPウサギクラスに入学して、
MUPｰTVをご覧いただくのが一番オススメです。

④フロントエンド編②WEBセキュリティを網羅せよ！

■バージョン管理ツール
・Git
→GitHub
1人で開発する場合でも使用することをオススメするツール

人はミスをするものなので、ミスをする前提で、
管理ツールで修正履歴を分かるようにする。

■リポジトリホスティングサービス
例.図書館はどこかしらの土地に建っている。
→この建てることをホスティングと呼ぶ。

※MUPページは、herokuにホスティングしている。

↓世の中にプログラミングを提供するサービス↓

・heroku
→使用方法は、Google先生へ

・GitHub　Pages
→プログラムを登録すると、自動的に読み込み公開してくれる。

・Firebase Hosting
→Googleが提供するクラウドサービス
スピードが速く、ドメインの紐づけが簡単、セキュリティが担保されている。

■Webセキュリティ
・HTTPS　S(Secure)
・CORS
・Content Security Policy

・OWASP Security Risks
→セキュリティチェックツールを提供してくれている。

セキュリティは、専門家がいるくらい難しいもの。
個人情報を取り扱うなら、外部の会社に依頼すべき。

※オススメ本※
体系的に学ぶ
安全なWebアプリケーションの作り方
第二版(第二版を購入すること)

⑤フロントエンド編③フレームワークを使いこなせ！

・HTML
・CSS
・Java Script
→この3つを知ってから、以下に入っていく。

■フレームワーク
雛形のこと

・React
これを使っている人が多い。
・AngularJS
・Vue.js

■シングルページアプリケーション
「1枚のページのアプリ」
JavaScriptが適宜ページを書き換えて、
複数ページあるかのように機能させること。
※Reactを使用すると、シングルページアプリケーションで作られる。

通常は、マルチページアプリケーションで、
複数のページを開いて、機能させている。
ページを開くたびに、情報通信が発生する。

《開発時に必要な用語》
■パッケージマネージャー
・npm
・yam

■CSS プリプロセッサー
→プログラムを簡略化してくれる。
CSSは、書きづらい。

・CSS プリプロセッサーで簡単に書く
↓
・CSSに書き換える
↓
・パッケージング
↓
・公開

※調べるときは、「Sass」「SCSS」でググる。

■ビルドツール

・タスクランナー
難しいコマンドが必要だが、
簡単なコマンドに置き換えするツール
「npm-scripts」

・モジュールバンドラー
「Webpack」

・コードフォーマッター
複数人で開発するときに、
各人が好きなスタイルでプログラムを書いたときに、
自動的に決められたスタイルに整形される。
「Prettier」

・プログラム静的解析ツール
「世の中にバグのないプログラムはない」
→よくあるミスパターンに基づき、
ミスを指摘してくれる。
「ESLint」

⑥フロントエンド編④WEBデザインを操るCSSとは

■CSS フレームワーク

 フレームワーク＝雛形
CSS＝見せ方

CSSのセットがある
→それなりのCSSが簡単に作れる

「reactstrap」
「Material UI」
「Bootstrap」
※これが一番有名

オリジナルのサービスにはオススメできない。
フレームワークを使って、後々に改善する。
一部だけの変更というのは難しい。

なので、
・CSS フレームワークだけを使う
か
・一から自分でCSSを書く
のどちらかを選択する。

■テスト

全てのプログラムにバグがある。
料理をする→味見をする＝テスト

・単体テスト
料理で例えると、材料を切ること(モジュール)
→この部分だけをテスト

・結合テスト
全体の動きをテスト

フロントエンドで使われるテストツール
「JEST」
※最初は、JESTを使い始めるのがオススメ。
「react-testing-library」
「Sypress」
「Enzayme」

■型チェック
料理で例えると、
”カット_食材”
→まな板が出てきたら、エラー(まな板はカットできない)

そもそもまな板が出てこないようにする。
この仕組みを作ることが型チェック。

「TypeScript」
バグを生み出しずらいプログラムがかける。
＝Javaでの変換後も安全

■知っておくと便利知識

・PWA(Progressive Web Apps)
モバイルアプリ＝プッシュ通知がある
Webペース＝プッシュ通知がない
モバイルアプリに劣らない対話アプリ

・AMP(Accelerated Mobile Pages)
とても速いWebページ
ロード(読み込み)に3秒以上かかると、
半分以上が離脱する。
GoogleではAMP対応のページは、
優遇(上位表示)される。

・モバイルアプリケーション
従来：
モバイルアプリを作る時は、
別でプログラムを作らなければならない。
↓
現在：
HTML/CSS/Java Scriptを使って、
モバイルアプリが作れる。
※ハイブリッドアプリと呼ばれたりする。

「React　Native」
→Reactの応用版のため、
新しく覚えることが少ない。
「Flutter」
「lonic」

・デスクトップアプリケーション
HTML/CSS/Java Scriptを使って、
デスクトップ用アプリが作れる。
「Electron」
Webページのプログラムをそのまま流用し、
デスクトップページが作れる。

作成したアプリを、どうやって世の中に出すか？
↓
・Firebase Hosting
簡単に公開が出来る
HTTPSにより、セキュリティが担保されている
ドメインの紐づけが簡単

次回へ続く。

■社会人の学校MUPカレッジ
https://www.takakitakehana.com/mup

■竹花貴騎(takaki_takehana)さんインスタグラム
https://www.instagram.com/takaki_takehana/

■まさゆきさん
まさゆきさんは、愛知県出身、現在は名古屋市在住、
美しいと有名な妻と可愛いと有名な娘と暮らしており、30代前半の会社員。
妻とは22歳に出会い、6年の交際を経て、2017年に結婚。2019年に第一子が誕生。
高卒で大手自動車メーカーA社に就職、
その後、健康ビジネスに参入するため東京で3年間の経験を経て、現在に至る。

幼少期は、決して裕福とはいえず、6人兄弟の末っ子として、
一風変わった家庭で育ったこともあり、「家族の愛情」に関するストーリーにはとても弱い。
高校時代に顔面麻痺、失聴する危険の病にかかり、
20代には毎月のように発熱する等の体調を崩していた。
そのため、20代前半から健康に関する本を書店とAmazonで200冊以上購入、
お金が無い時は、大型書店で何時間も立ち読みしていた。
それでも探求心が収まらず、
著者のセミナーや大学教授の講演会参加のために東京、大阪へ飛び、海外からのサプリ購入など、
自身の健康のために投資した額は、高級車1台分の価格を軽く超える程に。

現在は、「今(この瞬間)をどう幸せと感じて生きられるか」をテーマに探求しており、
人生に完成はない、と思い、自分の知識と体験を更新し続けている。
そして、2020年を機に、現在に至るまでの知識、体験を発信し始める。
「人生は習慣の結晶である」が信条の一つ。

ブログを読むことで、誰か一人でも安心できるのであれば幸いです。
今も私に付き合い、傍に付き添ってくれている妻に感謝。
最大の癒しと価値観の変革を与えてくれた娘に感謝。
そして、現在に至るまでに私を支えてくださった親族の皆様に感謝。
私に関わってくださった全ての皆様に感謝。
皆様のご多幸とご開運を心よりお祈り致します。
ありがとうございました。

まさゆき