ビジネスサイドが知っておくべきエンジニアの役割についての話
•
1 like•220 views
ビジネスサイドの若手に向けて、システムの基礎知識として「エンジニアの役割」について話した資料です。
Recommended
More Related Content
Similar to ビジネスサイドが知っておくべきエンジニアの役割についての話
Similar to ビジネスサイドが知っておくべきエンジニアの役割についての話 (20)
Recently uploaded
Recently uploaded (7)
ビジネスサイドが知っておくべきエンジニアの役割についての話
- 4. 今日 話したいこと ビジネスサイドとして知っておくべきシステム面の基礎知識について、 主に「エンジニアの役割」についての話をします ● エンジニアってなんで役割が違うの？ ● サーバーサイド・フロントエンド・モバイルって何？ ● って何？ わからないことがあれば適宜質問してください。一通り話し終わった後にも質問タイムを設けますので、そ こで質問いただいても大丈夫です。
- 10. 区分けはただの趣味範囲の話 ● 多くのプログラミング言語の基礎は同じ ○ 慣れていれば、ちょっとやれば他の言語も書ける ● 他方、言語やフレームワークの好みがある ○ 好きな分野をやっていたい ○ 最先端にい続けるためには分野を絞るしかない 呼び名の違いはあれど、コアスキルは大差ありません。趣味範囲の違 いに寄って呼び名が分かれているに過ぎません。
- 12. ● ブラウザはこの３つしか解釈できず、全ての サイト、 アプリケーションはこの つで作られている ○ HTML ○ CSS ○ JavaScript ● で作られるページを量産するために、 や などのプログラムや、データベースが存在 基礎知識のおさらい
- 14. 年代 ● ○ ほとんどの が手書きで書かれていた（個人サイトなど） ● ○ 画面に色を付けたりする程度の使われ方だった ● ○ ほとんど何も使われていなかった それぞれ出来ることが少なかったのが 年代
- 15. 年代 ● ○ プログラムで作られることが増えていった ● ○ 表現できる色 形が徐々に増えていった ● ○ など、サーバーとの通信で使われることも増えていった それぞれの守備範囲が変わっていったのが 年代
- 16. 年代 ● ○ によって作られるケースが増えていった ● ○ 要素を動かす等の使い方も増えていった ● ○ データを元に を組み立てるようになっていった ○ や などのフレームワークが増えていった の守備範囲が大きく広がったのが 年代
- 17. 年代 ● ○ 生の がそのまま書かれることは皆無になった ● ○ で書かれるケースも増えていった ● ○ だけで アプリケーションを実現 ○ を使わずに でやりたいことを実現 それぞれをより柔軟に書けるようになっているのが 年代
- 21. 性能 ブラウザの性能が上がることで、 ブラウザ上でのプログラムの実行 （ の実行 複雑な の解釈）がより容易になった。そのことにより、 が用いられることが増え、 ブラウザ上でより複雑な処理を行える ようになった。 ※ 実態としてはもっと色々変わっているが、大まかに集約すると「性能」というワードになる
- 22. ● モバイル ≒ 超高性能な ブラウザと捉えて良い ● 高性能が故に、よりサクサク より色んな事ができる ● 基本的な仕組みは ブラウザを用いる場合と変わらない モバイルについての補足
- 24. ● 主にサーバー側で処理を書く人 ○ や などの言語を使う ● ブラウザで表示する を効率的に生み出すための処理 を作ったり、データベースから取得したデータを ブラウザ表 示するための処理を作ったりする ● データベースとWebブラウザの中間に位置する事が多い サーバーサイドって何する人？
- 25. ● 主に ブラウザで動くプログラムを書く人 ○ や が主な利用言語 ● サーバーサイドエンジニアの人がデータベースから取得したデー タを、 ブラウザに表示する部分の処理を書くことが多い ● ブラウザ上での見た目を整えるプログラムを書くことも多い フロントエンドって何する人？
- 26. ● フロントエンドとほぼ同じことをモバイルで行うだけ ● ブラウザとモバイルでは保持すべき基礎知識が全く異なるた め、実際の仕事内容は大きく違う モバイルエンジニアって何する人？ ※ モバイルの中にデータベースを保持したりすることも多く、サーバーサイド フロントエンドのような役割になることも多い
- 29. 情報 や などのファイルへの参照 コンテンツのタイトル のような情報だけでなく、 といった他のファイルへの参照などが含まれている。 参照されたファイルは ブラウザへ都度ダウンロードされる。 ※ 勿論、画像や動画などのファイルへの参照もある
- 30. の の例。色々な や への参照がある。
- 31. の では、 ほどのデータが表示されている（ 時点）
- 34. ● ブラウザ上に表示された特定の のみを、サーバーと 通信して得られた 等で置き換える技術 ● 全てのページを読み込み直す必要がないため効率的 ● 他方、ページの遷移が発生した場合などは、遷移先のページを読 み込み直すす必要がある ※ 実装によっては で遷移先のページ全てを置き換える等も勿論可能だが、割愛
- 35. ● を「構造」と「データ」に分ける ● 「構造」部分は全て先に読み込んでおき、「データ」を別途サー バーから取得する ● 取得した「データ」と「構造」を で組み合わせ、「 ブ ラウザ上」で「 」を生成する ● 初回読み込みの量は増えるが、以後の読み込みは「データ」のみ となるため軽量 ● ページ遷移という概念がなくなる（ゆえにシングルページ） （ ） ※ 実装によっては で遷移先のページ全てを置き換える等も勿論可能だが、割愛
- 40. Any questions?