社会人1年目SEのブログ

読書ネタ、技術ネタ、etc

JavaSpriptのLT大会に参加しました。

  • はてブ

先日、JavaScriptのLT大会に一般参加してきました。

SurviveJS LT大会 #SurviveJS05

JavaScriptに関することならなんでも!のLT大会です。

今回は、スポンサーLTも含め、10分前後のLT x 8 でお送りします。

会社の研修期間中にJavaScriptを使い最新技術を調査してから、JavaScriptにハマり勉強するようになったので、ちょうど勉強中のJavaScriptを知識を広げるいい機会だと感じ参加しました。

開催地は、今書いているはてなブログやはてなブックマークを運営する株式会社はてなの東京オフィスでTwitterのハッシュタグは「#SurviveJS05」でした。 以下参加メモです。

LT1 スポンサーLT

開催場所を提供したスポンサーである株式会社はてなのエンジニアの方の登壇でした。主に、株式会社はてなの紹介がメインの内容でした。

・行なっている事業 →ポータルサイトはてな(はてなブックマーク、はてなブログ)、はてなブログmedia、イカリング2、うごメモはてな、GigaViewerなど

・はてなブログのミッションは知る」「つながる」「表現する」で新しい体験を提供し、人の生活を豊かにする

・昔は、収益が広告一辺倒だったが、現在は広告+得たノウハウを基に、企業に提供したりして収益を出していて堅実

・社外勉強会推奨、勉強会、合宿、サマーインターンを開催

LT2 「forループを越えて」

高階関数が何か、forループを使うことよりのメリット、使用上の注意の内容でした。

・高階関数とは関数を引数にとる関数か関数を戻り値として返す関数 map(f),filter(f),reduce(f,init),some(f),every(f)等がある

・Array.mapだとforループと同様な動きが可能

・forループと比べたメリットは何をやりたいかfnの中身を見れば分かり、fnを切り出してテストも可能=メンテが容易で平和なコード

・使用上の注意は戻り値を意識しなければならず、reduceは便利ではあるがほどほどに。

LT3 iOSエンジニアだけどWebアプリを作ってみた

作成したWebアプリケーションの前提知識のお話があり、その後作成したWebアプリケーションの内容でした。

・ブロックチェーン→データの受け渡しがそのネットワークに参加している参加者同士で行われ、データの保有も全ての参加者がしている

・P2P→クライアントがデータ保持しているため、1つのクライアントが落ちてもサービスが継続可能

・イーサリアム→仮想通貨の1つ 取引:スマートコンストラクタ 開発言語:Solidity。クライアントソフト:Geth

・PCにGethを入れてアクセスしGethを間借りで、イーサリアムのP2Pネットワークにアクセス可能。

・ブラウザ上で取引に関する関数を立ち上げ、取引の計算などを記載していき処理を行う。

・JavaScriptと連携方法→Solidityを書いた上で、Web3というオープンソースを使用。Solidityからインポートし、JavaScriptでは画面の処理を作る。

・簡単にウェブサービスとして公開可能

LT4 RemoteFacesの開発

登壇者の方が作成したRemoteFacesというツールについての内容でした。

・普段、リモートオフィスをしていてSlack,github,skype等コミュニケーションはとっているが、なんか寂しい。 → RemoteFacesを作成

・ウェブカメラの静止画を共有するツールで使用すると、ツールを使用した人の顔が左上に一覧として表示される 複数人の顔を表示させるため画面サイズ小さい

・サインインすることなく、使用可能

・通信はピアツーピアでサーバーを経由しない

LT5 React Native for Webの使いどころ

ReactNative for Webについての内容でした。

・React Native for Web→React Native用のコンポーネントでReact Native用に作ったものでもWebブラウザで使用できる。 採用事例 Twitter Lite PwaのTwitter公式クライアント

・ネイティブアプリをReactNativeで作ればコンポーネントで共通化できる

・ReactNativeにはモバイルに適したコンポーネントが揃っているためFor Webを使ってそれらをWebに輸入し、モバイルらしいUiを作っていける

・Webでもネイティブでもそうそう変わらないボタン、入力欄、アイコンなどのコンポーネントに絞って共通化可能

・React Native用のコンポーネントライブラリをWebアプリに流用可能

LT6 少しずつVue.js

JQueryを使っていたビューアプリケーションVue.jsを使い改善していったという内容でした。

・新規事業は要件がわからず、設計ができず、UIがいつまでも決まらない

・リリース後も終わりではなく、バグ修正しながら新規機能追加し、優先度が低くても契約したものは実装する必要あり

・冷静になるとJQueryが辛く工数めちゃくちゃかかる。

・ReactやVueが流行っている理由→HTML CSS Javascriptをグローバルに管理するには歴代のウェブには複雑になる中で複雑なコンポーネントを部品化する必要があるがそれを可能にするため。

・Vue.jsの導入①→既存のRailsコードを部分的に導入できるVue.jsを導入

・Vue.jsの導入②よく使う機能をコンポーネント化し、情報量が多いページをコンポーネントで分割

・コンポーネント設計の失敗→コンポーネントの粒度に統一感がなく再利用性がいまいち。

・今はサーバサイドでよりフロントエンドで頭を悩ますことが多い→顧客のUI体験のレベルが上がったことが原因

LT7 npmパッケージを作って公開してみよう

npmパッケージの作ってから公開の流れの内容でした。

・npmを公開するためにはhttps://www.npmjs.com/に登録が必須で無料・有料・エンタープライズの3種類

・登録したら$npm adduserを実行し、username password e-mailを入力しtokenを登録

・npmパッケージ作成から公開の流れ:プロジェクト作成→コンポーネント作成→ビルド→ローカルで確認→パッケージ公開

・プロジェクト作成時githubを 用意すると管理が楽

・通常はes5でビルドしないとコンパイルエラーになるが、React Nativeの場合はビルドしないでOK

$ npm run buildでビルド、$ npm linkでローカル確認、npm publishで自動的に公開可能

・1日で2、3回しか$ npm publishできない

LT8 シンプルさを求めてReactに回帰する話

Reactはいいぞーという内容でした。

・型定義ファイル、たくさん入れるといろんなところで崩れたりする →インターフェース多重継承し複雑な型継承

・Redaxウェブツール→多数のコンポーネントを管理ができ本来の開発と関係ないところでGithubとにらめっこすることを解決

・ジェネリクスで型指定し型あっていないと、エラーを出す

・必要なストア、必要なコンテナを指定

最後に

JavaScriptは学習したばかりで、知らないことが多かったので、とても勉強になったLT会でした。特に、React Nativeはまだ知識がなく、初めて聞く単語が多かったのでJavaScriptを一通り理解したら、学習してみようと感じました。

本日も最後まで読んでいただきありがとうございました。