20160727 初めてG's Niteに参加してきたメモ
G's Nite Webなんでも勉強会【Web制作&Web開発 最前線の話を聞こう!!初心者に優しい勉強会です。】に参加してきました。
ほぼほぼスライド見ながらメモっただけの記事です。
Web初心者なので、勉強方法とか参考にしたいと思います。
【Front-endの歩き方】平田さん
・web engineerと一口に言ってもいろんな種類(mark-up, front-end, back-end, full-stack)がある。
・Step1 静的サイト開発
HTML/CSS
Step2 動的サイト開発
css/jsライブラリの活用
レスポンシブデザイン、UX/UIなど
Step3 中規模のWebアプリケーション開発
複数ページのサイト作成
Webアプリケーションアーキテクチャ
JSフレームワークの活用
Step4 フロントエンド+サーバーサイド開発
Step5 効率化を考えた開発
altjs
各種ツール活用(自動的に行ってくれるツール)
- Package Manager: nuget, npm, bower
- Task Runnner
Step6 大規模な開発
- Webアプリケーションフレームワーク
- SPA(Single Page Apprication)
処理をある程度サーバーサイドに任せちゃう
Web Enginner × Your Interest = ∞
【WEB未経験エンジニアがWEBでキャッチアップした話(仮)】 Yahoo! 磯村氏
文系→SIのエンジニア→WEB系のエンジニア の方。
1.モチベーションを上げる
・技術系の本を読む
- 言語に偏るものよりはエンジニア全体にかかわる本
- 情熱プログラマー、WEBサービスの作り方、リーダブルコード がおすすめの本
・勉強会に出る
2.モチベーションを下げない
- 言語を気にしない(開発効率とか実行速度)
- 挫折を気にしない(何回か挫折している人はたくさんいる)
- わからない事を恥じない
3.モチベーションを保つための工夫
- エンジニアとして働く
- エンジニアのいる会社で働く
- 学校に行く(※自主性がないと、卒業しても何もできない)
4.環境系・・・?(タイトル忘れた)
- 開発言語
- フレームワーク
エディタはプラグインなどがたくさんあって、カスタマイズも出来る。
- PC
+ macがおすすめ
- デバッグ
+ 変数の中身を知る関数
+ クラスやメソッド
5.効率化
- キーボードから手を離さないようにする
- 質問の仕方に気をつける
- 仮説を立てる
- インプット
- 書籍から(⭐️最初から本は挫折しやすい)
- WEBから
- すごい人から
質問する、terminalのログを見る
- アウトプット
ブログを書く、Qiitaに書く
- 人に教える
- とにかくコードを書く
【Wanna be a Front-end Professional】サイバーエージェント 宗定氏
⭐️フロンロエンドエンジニアが成果を上げるためには、ということをメインに話すとのことでした。
Webフロントでできることが爆発的に増えたため、ここ数年で複雑化してきた。
→複雑なことをやるには枠組みが必要!
プロとしてフロントエンドやるなら、全てを把握しておきたい。
フロントエンドの中では1番複雑。
まだ台頭してきてから時期が短いため、設計思想がないと大きなアプリケーションが組めない。
2.CSS
設計思想を入れると良い。
ブラウザ仕様はこれからも付き合っていく必要がある。
変数の宣言ができないなど、言語仕様が貧弱
3.コンパイル、ビルド、リリース
リリースできるような状態にすることが重要。
JSが書ければ大体わかるはず。
Jenkinsやftpについてはフロントエンドでも知識が必要になってくる。
4.パッケージマネージャー、テスト、フォーマッタ
品質を上げるためには必要。
5.その他
1〜4は技術的な面。
基本的なサーバー技術は必要。
ツール群(例:Chrome Dev Tools や Local Proxy)を使うと生産性が上がる。
フロントエンドエンジニアの身の振る舞い方
・ジェネラリスト志向が良い。
・成果視点
- 技術やスキルはツールであり、それをどう使うのか、使って何を成し遂げるのかが大切。
- 何に使うのか、結果は(自分で)コントロール、評価したい。
=============LT=================
【勉強方法について】 平井さん
基礎(あまり時間をかけないこと)
・初級本を数冊やる
・ドットインストール
実装、
・とりあえず何か作ってみる
仕様
・言語について深く知る
【ES6について】 久保田さん
・ 書き方・考え方が他の言語と同じように策定される。可読性が上がる。
クラス定義
letによりブロックスコープ
などが追加される。
ES6を使うことで、他の言語ではあたり前にできたことがJavaScriptでもできるようになる!
。。。私の場合、型あり言語ばかり使っているからES6はすごく興味ある。けど覚えること多いイメージ。あと、しばらくは変換したりスピード感には向かない感じもしている。
【IT×音楽】 藤田さん
・身近な音楽
・効率化から体験へ
【JavaScriptのライブラリを使ってみよう】 堀さん
・自分のやってみたいことが簡単に実現できる
・手軽に導入できて、すぐに試せる。
が、ライブラリで実装したところは、ライブラリに依存する。
また、アップデートが常にされるわけではない。
Chart.jsの紹介
・HTMLの知識としてはcanvasの知識だけあれば良い。
・簡単な棒グラフ程度だったら10行程度のソースコードでできる。
【VR AR MR 違いと未来について】西元さん
・今年はVR元年と言われている。
- VR
仮想現実。
完全に作られた世界に入り込む
- AR
拡張現実。
現実を拡張し、作り出した世界。
- MR
複合現実。
仮想と現実を複合し、現実世界に付け足した情報を操作できる。