webStudy20180802

This is a slides for D3 member.

Transcript

1. 今時のWebアプリの流行りについて by ゆうと さがわ コーディングチーム 定例勉強会 #1 2018/08/02
2. なんのため？ • 最新のWeb事情を知ろう • フロントエンドだけではなくバックエンドなどにも興味を持ってもらいたい • もっとWebの深い所まで潜ってみましょう ※今回紹介することはすべて覚える必要もないし メモを取る必要もありません。 すべて業務で使うとは限らないし すべて習得する必要もありません。
3. 今日話すこと - フロントエンド事情 - JavaScript - 開発環境 - Gulp, webpackなど - SPA, SSR, BFF, SSG - JSで出来ること - オススメの学習方法 - まとめ
4. 以前のフロントエンド
5. 現在のフロントエンド
7. V8で使うのはこれだけ
8. 最低限理解しなければいけないのはこれだけ
9. 一部紹介 Firebase Googleが運営するBaaS/mBaaS データベースへの読み書きや認証など、サーバでの処理を JSのみで作れるサービス。バックエンドのことは考えずにフロント集中して開発 ができる ホスティングもできるためSPAならFirebaseのみで完結できる Prettier コード整形ツール 自動インデント、文末のセミコロン自動付与 シングルクォートダブルクォートの統一 プラグインと合わせて使うことで、Git commit時に自動実行できる Go Googleが開発しているプログラミング言語 Webでは主にバックエンドに使われている シンプルな設計 非知的プログラマ向け フロントエンドの人がサーバーサイド開発によく使っている印象
10. 今日話すこと - フロントエンド事情 - JavaScript - 開発環境 - Gulp, webpackなど - SPA, SSR, BFF, SSG - JSで出来ること - オススメの学習方法 - まとめ
11. JavaScriptの歴史 • 1995年LiveScriptとして現在のJavaScriptが誕生 • 無駄なアニメーションやセキュリティ面を考慮してJSの無効化が推奨される • 2005年に非同期通信(Ajax)を用いたGoogle Mapsが発表される さらに、2010年にjQueryの誕生 → JavaScript時代の幕開け • 開発環境の変化 → ビルドツールの誕生 browserify, webpack, Gulp, Gruntなど • ECMAScript2015(ES6)の策定 → 新たな仕様の追加 (const, let, classなど) しかし、ブラウザ側の対応が追いついていない状態 • そこでbabelの登場 → ES6で書いたコードをES5に変換 • さらにAltJSの登場 Typescript CoffeeScriptなど
12. 非同期通信 Ajax • Google Mapsのような画像の遷移のない通信方法 • 必要な一部分だけをサーバと通信を行う • 非同期通信にはAjaxという仕組みが必要 引用: http://j-net21.smrj.go.jp/develop/digital/entry/001-20090304-05.html
13. なぜAltJSが必要なのか • JavaScriptの問題点 ◦ クラスの概念がない ◦ 型チェック機能がない • コードの可読性、保守性の向上 • JavaScriptよりも少ない記述でコードが書ける
14. ES5 var __extends = (this && this.__extends) || (function () { var extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; return function (d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; })(); var Person = /** @class */ (function () { function Person(thaName) { this.name = thaName; } return Person; }()); var Student = /** @class */ (function (_super) { __extends(Student, _super); function Student(name, grade) { var _this = _super.call(this, name) || this; _this.grade = grade; return _this; } return Student; }(Person)); var Caroline = new Student("Caroline ", 3);
15. Typescript class Person { name: string; constructor(thaName: string) { this.name = thaName; } } class Student extends Person { private grade: number; constructor(name: string, grade: number) { super(name); this.grade = grade; } } let Caroline = new Student("Caroline ", 3);
16. 今日話すこと - フロントエンド事情 - JavaScript - 開発環境 - Gulp, webpackなど - SPA, SSR, BFF, SSG - JSで出来ること - オススメの学習方法 - まとめ
17. Gulp • タスクランナ • コンパイルなどの自動化 • SCSS → CSS, ES6 → ES5など自動で変換するツール gulp.task('css', function(){ return gulp.src('client/templates/*.scss') .pipe(scss()) .pipe(minifyCSS()) .pipe(gulp.dest('build/css')) });
18. webpack • モジュールバンドラ • JS CSS 画像などを一つのJSファイルにバンドル（束ねる）するもの • バンドルする際にSCSS → CSS, Typescript → ES5などに変換できる <link rel="stylesheet" href="style.css"> <script src="js/main.js"></script> <script src="js/jquery.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/moment.js"></script> <script src="js/bundle.js"></script>
19. npm • パッケージマネージャ • インストールしたり消したり実行したり • Gulpやwebpackなどもnpmでインストールしnpmで管理される • package.json ◦ インストールしたパッケージはバージョンと共に記載される ◦ 実行するスクリプトを記述（webpack, gulp --watchなど） • その他 ◦ yarn
20. CLI • CLI(Command Line Interface) ⇔ GUI(Graphical User Interface) • CLIとはコマンドを入力して操作する方法 • コマンドを入力して開発環境を構築 $ npm install -g @vue/cli $ vue create YOUR_APP_NAME Vue.jsの開発環境を構築する場合 $ npm install -g @angular/cli $ ng new YOUR_APP_NAME Angularの開発環境を構築する場合
21. vue-cli ui • Vue.jsの場合GUIでも開発環境を構築できる(DEMO)
22. CodeSandbox • CodeSandbox (https://codesandbox.io/) • Web上のエディタ • React.js, Angular, Vue.jsなどのフレームワークを用いた開発環境を たったの２クリックでWeb上に構築できる • SPAの開発を始めるには最適 • その他 ◦ CodePen JSFiddle
23. 今日話すこと - フロントエンド事情 - JavaScript - 開発環境 - Gulp, webpackなど - SPA, SSR, BFF, SSG - JSで出来ること - オススメの学習方法 - まとめ
24. SPA (Single Page Application) • JavaScriptでDOMを操作することでページ遷移を実装 • サーバとの通信はAjaxやSocketが用いられる • Angular Vue.js React.jsなど 引用: http://www.atmarkit.co.jp/ait/articles/1602/19/news030.html
25. SSR (Server Side Rendering) • JavaScriptをサーバ内で実行し、HTMLを生成 • SEO対策 • 初期レンダリングのパフォーマンス改善
26. BFF (Backends For Frontends) （割愛） • アーキテクチャ設計 • フロントエンドのためのバックエンド 引用: http://www.atmarkit.co.jp/ait/articles/1803/12/news012_2.html
27. SSG (Static Site Generator) （割愛） • 静的サイトジェネレーター • 例 VuePress 引用: http://www.atmarkit.co.jp/ait/articles/1803/12/news012_2.html
28. 今日話すこと - フロントエンド事情 - JavaScript - 開発環境 - Gulp, webpackなど - SPA, SSR, BFF, SSG - JSで出来ること - オススメの学習方法 - まとめ
29. 何でもできます
30. たとえば • サーバーサイド(Express) • デスクトップアプリ(Electron) ◦ Skype, VSCode, Atom, Discord, Slack • ネイティブアプリ、ハイブリッドアプリ(cordova, ReactNative, monaca) ◦ Facebook, Instagram, Skype, Pintrest • ゲーム(Cocos2d-x) • CLIアプリ(commander) • コンピュータグラフィックス(WebGL) • VR(WebVR)
31. Monaca • JSでAndroidやiOSアプリを開発することができる • Web上のエディタでアプリ開発ができる
32. コンピュータグラフィックス • WebGLを用いたWebサイトも増えている ◦ ポートフォリオやコーポレートサイトなど • 3Dモデルの描画も可能 http://www.birdman.ne.jp/ https://codepen.io/al-ro/pen/XBXWjm
33. 今日話すこと - フロントエンド事情 - JavaScript - 開発環境 - Gulp, webpackなど - SPA, SSR, BFF, SSG - JSで出来ること - オススメの学習方法 - まとめ
34. 学習方法 ドキュメントを読む わからない部分は調べる アプリを作ってみる とりあえず動かしてみる 有名なフレームワークだと日本語のドキュメントで わかりやすく整備されている場合が多い CodePenなどを活用し、まずはコードを書いてみる この時点ですべて完璧に理解する必要はない ドキュメントだけではすべて理解できない可能性がある コードを書いて実行してエラーがでればそのエラー内容で検索 オススメはQiitaのAPIを叩いて記事一覧を取得するWebアプリ メニューを作ってタグ毎に表示したりルーティングや ページ遷移を実装したりいろいろ拡張してみる
35. QiitaAPIアプリサンプル
36. 興味のあることから始めよう Webサイトを公開したい Expressでサーバーサイド開発 デスクトップアプリを作りたい Electronでデスクトップアプリ開発 ゲームを作りたい Cocos2d-xなどのゲームライブラリを触ってみる スマホアプリを作りたい monacaやcordovaを使ってアプリ開発 業務を効率化したい commanderなどのライブラリを使いCLIアプリ開発 ゴリゴリ動くサイトを作りたい Three.jsを使ってWebサイト制作 画面の中の嫁に会いに行きたい WebVRで開発して会いに行きましょう
37. まとめ - フロントエンド、フルスタック化問題 - 開発環境の変化 - AltJSの誕生 - JSはなんでも出来る とりあえず作りたいモノを作ってみましょう！ わからなければ調べましょう。 きっと答えが見つかるはずです。
38. 参考 • https://qiita.com/kohashi/items/43ea22f61ade45972881 • https://speakerdeck.com/sottar/hurontoendoenziniagachuan-etaizui-jin-falseshi-qing • https://qiita.com/Mic-U/items/c900a6f62862954d62e0 • https://qiita.com/hisamura333/items/e3ea6ae549eb09b7efb9 • https://persol-tech-s.co.jp/hatalabo/it_engineer/222.html • http://j-net21.smrj.go.jp/develop/digital/entry/001-20090304-05.html • https://qiita.com/takanorip/items/82f0c70ebc81e9246c7a • https://greative.jp/page/guidebook-spa-ssss-1/