tag:crieit.net,2005:https://crieit.net/users/aoi_erimiya/feed 衿宮 葵の投稿 - Crieit Crieitでユーザー衿宮 葵による最近の投稿 2018-10-29T19:15:52+09:00 https://crieit.net/users/aoi_erimiya/feed tag:crieit.net,2005:PublicArticle/14540 2018-09-15T15:55:12+09:00 2018-10-29T19:15:52+09:00 https://crieit.net/posts/Dev-3 京都Devかふぇ#3 〜フロントエンド〜 に参加した <h5 id="【概要】"><a href="#%E3%80%90%E6%A6%82%E8%A6%81%E3%80%91">【概要】</a></h5> <p>・勉強会参加で聞いたLTのまとめ。<br /> ・同様の内容はTwitterの方にも上げているが、文字数の関係でオミットした部分も含めて。</p> <h5 id="【LT】"><a href="#%E3%80%90LT%E3%80%91">【LT】</a></h5> <h6 id="◎Vue.jsを使うようになるまで/佐藤慧太@SatohJohnさん"><a href="#%E2%97%8EVue.js%E3%82%92%E4%BD%BF%E3%81%86%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%BE%E3%81%A7%EF%BC%8F%E4%BD%90%E8%97%A4%E6%85%A7%E5%A4%AA%40SatohJohn%E3%81%95%E3%82%93">◎Vue.jsを使うようになるまで/佐藤慧太@SatohJohnさん</a></h6> <p>・PiCTLINK開発にvue.jsを導入するまで<br /> ・2011リリース時はJavaでサーバーレンダリング(SSR)+Jquery<br /> ・Mithril.jsから進化した→バインディングできるけど、HTMLとくっついてる<br /> ・jQueryでゴリゴリSPAしてたけど、ごちゃごちゃに<br /> ・Vue.jsは事前に準備いらない</p> <h6 id="◎Puppeteer/こばしんさん"><a href="#%E2%97%8EPuppeteer%2F%E3%81%93%E3%81%B0%E3%81%97%E3%82%93%E3%81%95%E3%82%93">◎Puppeteer/こばしんさん</a></h6> <p>・Headless Chromeが元<br /> ・A/B Testing<br /> ・SEO対策のため、SSR使わなあかんケースがある<br /> ・セレニウム的な何かかな<br /> ・スクショも5行くらいですぐできる(PDFも)<br /> ・PDFすごいのは、HTML直接書き込んでPDFに吐き出せる<br /> ・Keyboardも日本語入力できる。ただ、Enter飛ばす前にちょっと待とう<br /> ・jest-puppeteerが楽<br /> ・jest-image-snapshotで実行結果の比較もできる</p> <h6 id="@超シンプルな静的プロフィールサイトを作る/kitamura Yumaさん(ポノス)"><a href="#%EF%BC%A0%E8%B6%85%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E9%9D%99%E7%9A%84%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8B%EF%BC%8Fkitamura+Yuma%E3%81%95%E3%82%93%28%E3%83%9D%E3%83%8E%E3%82%B9%29">@超シンプルな静的プロフィールサイトを作る/kitamura Yumaさん(ポノス)</a></h6> <p>・https://webneko.info/ をvue.jsだけで。<br /> ・parcelというバンドラ利用<br /> ・ルーティング自作。<br /> ・良いのはvue本体に集中できたこと<br /> ・vue Fes Japanにも行くよ</p> <h6 id="◎jqueryからvue.jsに移行したら幸せ/泉亮輔さん(IoT.Kyoto)"><a href="#%E2%97%8Ejquery%E3%81%8B%E3%82%89vue.js%E3%81%AB%E7%A7%BB%E8%A1%8C%E3%81%97%E3%81%9F%E3%82%89%E5%B9%B8%E3%81%9B%EF%BC%8F%E6%B3%89%E4%BA%AE%E8%BC%94%E3%81%95%E3%82%93%28IoT.Kyoto%29">◎jqueryからvue.jsに移行したら幸せ/泉亮輔さん(IoT.Kyoto)</a></h6> <p>・めんどくせえDOM操作を裏でやってくれる<br /> ・AWSがserverlessになった</p> <h6 id="◎ノリでフロント作った/柳田塁さん"><a href="#%E2%97%8E%E3%83%8E%E3%83%AA%E3%81%A7%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E4%BD%9C%E3%81%A3%E3%81%9F%EF%BC%8F%E6%9F%B3%E7%94%B0%E5%A1%81%E3%81%95%E3%82%93">◎ノリでフロント作った/柳田塁さん</a></h6> <p>・美容師学校卒業後、ゲームPGとか経由して、フリープラスという会社のSEに<br /> ・調査はWappalyzer(どんな機能使ってるかすぐわかる)<br /> ・サイト分析はhotjar(クリック率とかも見えるようになる)→客の動線も記録できる</p> <h6 id="◎コスト削減の話/北村涼さん(はてな)"><a href="#%E2%97%8E%E3%82%B3%E3%82%B9%E3%83%88%E5%89%8A%E6%B8%9B%E3%81%AE%E8%A9%B1%EF%BC%8F%E5%8C%97%E6%9D%91%E6%B6%BC%E3%81%95%E3%82%93%28%E3%81%AF%E3%81%A6%E3%81%AA%29">◎コスト削減の話/北村涼さん(はてな)</a></h6> <p>・Reactでコスト削減<br /> ・Conponentを超細かく実装する<br /> ・storybookで確認(コンポーネントの一部だけでも表示確認できる)<br /> ・RN(ReactNative)画面で表示<br /> ・デザイナが調整しやすい<br /> ・レイアウトdiffが非常にわかりやすい<br /> ・簡単にできる分、遅くなりがちなので注意</p> <h6 id="◎北海道の地震の話/ふるしんさん"><a href="#%E2%97%8E%E5%8C%97%E6%B5%B7%E9%81%93%E3%81%AE%E5%9C%B0%E9%9C%87%E3%81%AE%E8%A9%B1%EF%BC%8F%E3%81%B5%E3%82%8B%E3%81%97%E3%82%93%E3%81%95%E3%82%93">◎北海道の地震の話/ふるしんさん</a></h6> <p>・電気が止まってる=暖房が動かない→冬がやばい<br /> ・太陽光パネルを設置しても、そも外部電力が稼働に必要→勝ち組だと思ったのにwww<br /> ・観光客が命だけど、来ないから負のループやばい<br /> ・北海道応援、小春の大LT大会(関西)というイベントがあるみたい。<br /> →次回10/1予定たのしくLT聞きながらワイワイ北海道応援しよう</p> <h5 id="【初めて聞いたワード】"><a href="#%E3%80%90%E5%88%9D%E3%82%81%E3%81%A6%E8%81%9E%E3%81%84%E3%81%9F%E3%83%AF%E3%83%BC%E3%83%89%E3%80%91">【初めて聞いたワード】</a></h5> <p>NUXT<br /> Puppeteer<br /> PWA<br /> netlify<br /> Storybook<br /> css.scoped<br /> hotjar</p> <h5 id="【感想】"><a href="#%E3%80%90%E6%84%9F%E6%83%B3%E3%80%91">【感想】</a></h5> <p>自分のベースがJava,VB.netの業務システムの知識ばかりなので<br /> web系の最新の話を聞けてとても勉強になった。<br /> vue.jsはangularと比較して、より気軽に書けそうだなと感じた。</p> 衿宮 葵