taisablog

taisa's engineer blog

「 フロントエンド 」 一覧

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月前まで JSとjQueryのみ 毎回ノリで書いていた(もちろんカオスにならないように最大限工夫はしてるけど) 流れが早いからモダン情報のキャッチアップはタイミングを見計らっている けど2017年中にはなんとかしたい やるなら一気にやりたい 始める前まではこんな感じだったけど、そろそろいってもいいかな?ということでやり始めた。 速習後 もともとは既存プロダクトをどうにかするつもりで始めていたけど、タイミングよく新規プロダクトを立ち上げることになったので採用した。何もしてなかったらかなり勇気が必要だったと思う。 ES6 React VueJS Webpack Babel PostCSS Go PHP(継続) 3ヶ月でやった事 JavaScript(ES5)を速習する ES6を速習する React(でSPAを)速習する マークアップを速習する Podcastで速習する 勉強会で速習する チームメンバーと速習する JavaScript(ES5)を速習する オライリー本で速習 JavaScriptパターン ―優れたアプリケーションのための作法 Amazonより 「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」や他の本もいいけど個人的にはこの本がお薦め(発売時期がよい)。 ※デザインパターンの章は他に「JavaScriptデザインパターン」という書籍があるしここでは読み飛ばしてもよいと思う。 ES6を速習する WEB+DB PRESS Vol.87で速習 WEB+DB PRESS Vol.87 Amazonより 非常に分かりやすく端的に説明されていてとてもよい。 (こんなツイートも↓) 『JavaScript: The Good Parts』と『WEB+DB PRESS Vol.87 第1特集』のあわせて250ページ未満でES6までの全体像をつかむ速習コースのご提案 http://t.co/doPQ7V4enw http://t.co/NKTGz3syk7 — Takuto Wada (@t_wada) 2015年8月10日 React(でSPA)を速習する WEB+DB PRESS Vol.97 Amazonより React+Flux、クライアントサイドルーティング、サーバサイドレンダリング、webpackについて丁寧に説明されている。他にもマネジメントやPythonに関する内容があってとても読みごたえがある。 すぐに「理解できた」という訳にはいかない Reactはそれなりに初期学習コストがあるので以下のことを繰り返しながらじっくり理解を進めていった。 サンプルコードを動かす 本家サイトチェック ブログ記事チェック 今話題のReact.jsはどのようなWebアプリケーションに適しているか?(お薦め記事) サンプルコードを作る Web+DB PRESS見直す マークアップを速習する マークアップも一人でできるようになりたいというメンバーが多かったのもあり、社内のUI/UXデザイナーにハンズオンをしてもらった。このハンズオンの目的としては何から手をつけていいか分からないという状況から脱却して自分でもなんとか勉強できる状態にすることでこれだけでなんとかしようというものではない。 関連リンク – 初心者向けざっくりHTML/CSSコーディングハンズオン資料 – 社内エンジニア向けにマークアップハンズオンを開催しました その他の方法 Podcastで速習する 現場.fm 現場.fm というフロントエンドの現場について話すラジオを始めた 勉強会で速習する コミュニケーションしながら疑問点を解決してもらえたのでとても助かった。他にもReact、VueJS、Angular以外も含めたフレームワーク発表会をやったりした。またそれをうけてあたらめてReact、VueJS、Angularはいいなと実感した。 チームメンバーと速習する 今QはJSをやろうと全員で決めた(※この間業務でJS触る機会は0だった) 情報共有しやすい ここでもチームメンバーで分担してReact、VueJS、Angularを調べて発表会をした チームメンバーのJSに対する意識が全体的に変わって導入障壁が低くなった まとめ 業務でJS触る機会が0だったとしても3ヶ月あれば結構イケる 他にやりたいことができてもなるべく我慢してJSやるの大事 …

「slideship Tech Dive vol.1 フロントエンド特集」でLTしてきた

connpassリンク slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集 「slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集」でLTしてきた。タイムテーブルは、メインセッションがVue、ReactVR、React SPAになっていてその後LT4本で親睦会という構成。自分は「フロントエンド速習コース」というタイトルでLTをさせてもらった。 slideshipって何? markdownで手軽にスライドがつくれちゃうサービスでコードシンタックスハイライトを自動でやってくれたりPDFに変換してくれたりする。今回LTするにあたって前日までラフなマークダウン文章しかなかったけど早くスライド作らなきゃっていう焦りがなかったので気分的に非常に楽だった。 slideship.com トークスライド (すべてslideshipでできてる) Vue.js 効果的だった事例から見る利点と特徴 橋本 安司さん @yellow844 これが大事↓ 「単一ファイルコンポーネントで『テンプレート、ロジック、スタイル』の関心を分離させる記述になっており、ファイル分割してより疎な状態に出来る。更にテンプレートやスタイルのテンプレート言語・CSSプリプロセッサを選択できる。」 ReactVR でつくるサーバ連動型インタラクティブ VR 原 一浩さん @kara_d 「s7は爆発の危険がある」に笑った。 React SPA における OGP への挑戦 池内 孝啓 @iktakahiro サーバサイドレンダリングはしないぞ!っていうこだわりが感じられた LT PATENTS問題とfast-asyncについて 石井 直矢さん @kaidempa OSSのライセンスのお話 フロントエンド速習コース @taisa831 3ヶ月でフロントエンドを一気にキャッチアップした時にやったことを紹介した。 書籍プレゼント企画 サーバーレスシングルページアプリケーション ―S3、AWS Lambda、API Gateway、DynamoDB、Cognitoで構築するスケーラブルなWebサービス こちらの書籍の監訳者の吉田 真吾さん @yoshidashingo じゃんけん大会で書籍はゲットできなかったけどこの書籍はオライリーの電子版で購入した。タイトル見て発売したら速攻買おうと思ってたけどReal World Httpに先に手出してたので買えてなかった。 RxJSコトハジメ @massa142 RxJS良さそう。マーブルテスト楽しそう。 勉強会風景 まとめ ちょうどフロントエンドのキャッチアップをしていたのでとても良い機会になった。トーク内容もいろいろあってとても楽しめ。次回も楽しみ。