技育展で敢闘賞をいただきました
こんばんは、たじまです。
肌寒い季節となってきましたね。
なんとこの度、株式会社サポーターズが開催のイベント技育祭で敢闘賞をとることができました！
技育展ではそれぞれ八つのテーマに分かれていて、私たちは eeNotes で「チーム開発」で出ました。 eeNotesについてはチームメンバーのこの記事がわかりやすいと思います。
上から最優秀賞、優秀賞、敢闘賞で一番下から呼ばれたので少し悔しかったです。
チーム開発の他の参加者の方々も全員完成度が高く誰が優勝とってもおかしくないという状況だったのでとても悔しかったですが、賞を取れたことは本当に嬉しいです。 最優秀賞のCyQlone、優秀賞のtraQも他の作品もとても完成度が高く悔しいですが納得のいく結果です。笑
#技育展 テーマ別審査結果です。
— 【公式】技育プロジェクトbyサポーターズ (@geek_pjt) 2020年9月26日
「チーム開発」の受賞作品は
最優秀賞：オンライン授業質問回答プラットフォーム「CyQlone」
優秀賞：部室風SNS「traQ」
敢闘賞：大学生向けノートシェアリング「eeNotes」
となりました！
受賞された皆さん、おめでとうございます！！ pic.twitter.com/gCtkqDxvE9
コロナが始まってしまって eeNotes をリリースしてからまだ一度もチームメンバーで打ち上げをしていないので賞金を使って打ち上げしたいと思います。
健闘ありがとうございました！
追記： Twitterで嬉しい意見をいろいろいただけて嬉しかったので載せちゃいます！
「eeNotes」線形代数みたいな、どの大学でもある程度変わらないであろう科目なら公開する人も多いだろうし、便利かも！実際今年授業無くて先生の配布資料をみるだけだから他人のノート見るのとあまり変わらなかったし。#技育展 #RoomA
— たなこー (@tanakou_0226) 2020年9月26日
eeNotes
— しぶあつ/Atsushi Shibuya (@shibuatsu8) 2020年9月26日
・ノート共有SNS ロゴおしゃん
・エディタでコメントやマークアップ可能に
・SNS機能で友達のノートを検索可能
・成し遂げたい世界観（Vision）あるの良いね#技育展 #RoomA
デザイン周りは私がAll figmaで頑張ったのでめっちゃ嬉しいです！
疎結合なコンポーネントを心がけた話
こんにちは、たじまです。
最近はコロナに加え猛暑の毎日ですが皆さんいかがお過ごしですか？ 私は外出ただけで溶けてしまいそうだったので大人しくエアコンの効いた部屋に閉じこもることにしました。
さて、今日は先月公開した eeNotes というサービスについてやってたことを少しだけまとめてみようと思います。
よければ少しだけ触ってみてください。 Twitterもやってます！
eeNotes とは
Treasure2019のチームで開発したプロダクトをそのままリリースまでしよう！と継続開発して先々月の6月24日にリリースされた ノート共有サービス です。
簡単に説明すると、全員がノートのまとめ先を同じにしちゃえばテスト前にまとめるの上手い人のノートが見えるし、取ってない講義がどんな感じかわかるし、ノートを取ってる人は自分のポートフォリオとしても使えちゃう最高のサービスです。
私はデザインとフロントエンドを担当しました。
サイト経緯
Treasureで完成した時はこんな感じでした。
// TODO 昔のトップ画像探す。
ある程度やってる人ならわかる、Material Design ごりごりのデザインです。 整っていて、UIも複雑でなくわかりやすいのですが逆に言うと単調でぱっとしないですね。
継続開発を続けるうちに、このデザインだとあまり胸を張って宣伝できないなということになり旧デザインを一掃することになりました。
新しい全体像はこんなかんじ。デザインの作成は私のゴリ押しでFigmaを使いました。いいですよね、Figma。
デザイン開発の様子です！
— eeNotes (@eeNotes) 2020年5月16日
皆様が使いやすいUIを心がけて、作成しています。 pic.twitter.com/IkE5TRkDrU
何をしたか
技術選定
さて、ここからやっと本題です。 今回はデザインの改修に合わせ、設計まわりは Atomic Design で進めていくことにしました。
圧倒的にフロント周りのタスクが多い中、CSSアレルギーを発症してしまう人が多かったので小さいコンポーネントでCSS+αを書く人、APIをつなげる人でそれぞれ分担しました。 Atomic DesignでいうとCSSの人が ~Template までを担当して、APIつなげる人が Template ~ Page を触るといった方針です。
私はCSSを書く担当になりました。コンポーネント単体を確認するためにstorybookを使いました。
storybookとは
Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient.
Storybookを使うとコンポーネントをカタログ一覧にまとめることができます。 また、スタイルやロジックを一つのコンポーネントに閉じ込めることができるので疎結合なコンポーネントを作ることができます。
デザインがきっちり決まってる上でstorybookを使うとパズルゲームをしてるようでとても気持ちいいです。
実際に
CSS担当がどうつくるか考えてみます。
figmaのスクショです。
今回はこのユーザーのタグの部分を作ってみます。
実はこれとほぼ同じものが実はノート詳細画面にもありました。（右上のユーザー情報が出てる部分）
内容は全く変わらず、当たるスタイルが変わってるだけそうなので再利用できそうですね。
|
|___Atoms
| |___Tag
| | |___UserTag
| | |___UserTag.tsx
| | |___index.stories.tsx
| | |___index.ts
| |___Icon
| |___DeterminIcon
| |___DeterminIcon.tsx
| |___index.stories.tsx
| |___index.ts
|___Molecules
|___Tag
|___UserTagGroup
|___UserTagGroup.tsx
|___index.stories.tsx
|___index.ts
ファイル構造はこんな感じになりました！ (Codepen作ったんだけど動かない...😢)
storybookのファイル内ではコンポーネントを単体で表示しています。 (本番と同じようにするために背景だけstorybookのファイル上で付け足しました。)
storybookの画面はこんなかんじになりました！
ユーザー詳細画面の方のタグと、ノート詳細にあるタグの違いはpropで分けられるようにしています。
UserTagGroup という名前にしちゃったのですが、そこにどんな種類の文字列が入るかとかはこのコンポーネントが知っておく必要はないかなと思い可変長の配列を入れられるようにしました。
storybook を使うとコンポーネントのpropをコードを変更することなくGUIで操作できるのでデバッグもしやすくなります。バージョンが上がってまた使いやすくなったみたいなので詳細はこちらから。
storybook使ってみて
メリット
圧倒的にこれはメリットでした。prop で渡す値を外部から変えたり、 action で変わるコンポーネントの挙動などを単体でテストできたのでバグが少なくすみました。
デメリット
- Files changed が増える
- (慣れてないと)実装にかかる時間も増える
これはとあるフロントの1pr
と言う感じでした。これはファイル構造のせいもあるのですが export する用の index.ts, storybookのファイル、コンポーネントの中身のファイルと一つ作るだけで3つのファイルが誕生するので、 1 pageつくるのに差が大きかったです。
また安心安全にかけるのですが慣れていなかったり速度を優先する場合には向いてないのかもしれません。
終わりに
今回は storybook について言及させていただきました。自分的にとても体験が良かったのでチームメンバーにも是非進めていきたいところです。
ありがとうございましたー！
おまけ
同じチームの仲間が eenotes の記事を書いているので読んでみてください！
2019年爆速振り返り
今年も風のように早かった2019年を思い出だけにしたくないので爆速で何やったか振り返ってみます。
この写真選んでるときすでに年越してしまったのですが、忙しかった記憶をそのまま思い出にしたくなかったので目次録としてまとめてみました。
- 今年も風のように早かった2019年を思い出だけにしたくないので爆速で何やったか振り返ってみます。
- 1月30日 (多分)新年LT?
- 3月9,10日 Web Frontend Challenge
- 3月19日 追い出しLT in aizu
- 4月10日 welcomeLT
- 4月30日 平成最後のハッカソン by CA
- 5月18日 inside frontend 参加
- 5月29日 モブプロでTDD
- 6月29日 初夏の大LT in aizu
- 8月12日 ~ 30日 Treasure
- 9月15日 ~ 20日 北海道バイク旅
- 9月21日 Summer Intern LT 2019
- 6月 ~ 9月 ATOM ハッカソン
- 10月2日 インターン報告会&進捗どうですかLT
- 10月4日 エンジニア女子会
- 10月26日,27日 JPHacks
- 11月2日 秋の大LT 2019 in aizu
- 11月7日 ~ 29日 CA Tech JOB in CATS
- 11月10日 パソコン甲子園 zli展示
- 12月14日, 15日 温泉ハッカソン
- 12月22日 HOPE Day by NewsPicks
- 12月24日 未来大 x 会津大 対バンLT会
- おわりに
1月30日 (多分)新年LT?
3月9,10日 Web Frontend Challenge
- CA開催のWFCに参加しました。
- 初めてのインターンだったのでとても緊張してました。この時初めてCAさんにお世話になったのがきっかけでのちのCATechJOBに参加しようと決心しました。
3月19日 追い出しLT in aizu
- 23期メンバーが卒業するので追い出しLTを企画&運営しました。
- たしかこのLTが私が初めて企画&運営したLTです。
4月10日 welcomeLT
- 気合いのある一年生をZliに入れようと開催したLT。
- このとき来てくれた何人かの一年生は今や立派なzli部員です。
4月30日 平成最後のハッカソン by CA
5月18日 inside frontend 参加
- CAさんがスカラーシップ枠で募集をかけててフロントエンドをちょうどやってて興味があったので応募したらうかりました。
- ご覧の通りモチベーションがすごい高い状態で行ったわけじゃないんですがフロントエンドのいろんな技術を勉強できてフロントに対するモチベがあがりました。
当時何がやりたいのかわからないけどとりあえず流れでフロントやってるみたいな感じだったんですが極めたくなったきっかけはこの辺だった気がします。
5月29日 モブプロでTDD
想像以上に上級生の方々がいっぱい来て嬉しかったです。
6月29日 初夏の大LT in aizu
- 皆さんご存知の大LTです。
ほんとは春にやる予定だったのですが、運営の準備が遅れ初夏のLTになってしまいました。また、とてもギリギリまで準備をしていたので自分自身のLT内容がすごく薄くなってしまいました。
内容が薄いのは言い訳になってしまうのですが、やはりLTの内容を作る際はちゃんと事前準備期間を設けたいと思いました。
8月12日 ~ 30日 Treasure
- 楽しかったし勉強になったし同学年の同じようなことをやっている仲間と知り合えたのはほんとにいいインターンでした。
今でもtreasureの仲間たちの活動をtwitterでみて、自分も頑張ろうと背中を押されています。
詳細はこちら
9月15日 ~ 20日 北海道バイク旅
- 人生の夏休み
ちょっと頑張りすぎてたので念願のバイク旅に1人で行ってきました。
大学生らしい夏休みを送りたいなとおもいバイクでひとり、カプセルホテルやゲストハウスなどに寝泊泊まりました。
雨が多くて寒かったのが少し残念です。またいきたい。
9月21日 Summer Intern LT 2019
- ｶｰｰｽﾞ君方が企画する100人規模のLT会に登壇してきました
- バイク旅が終わり北海道から帰ってきた足で東京にいきました。なかなかハード。
VOYAGE GROUPのインターン参加者代表として登壇してきました。参加者の生の声を聞く、という趣旨で開催されたLT会でしたが、ここまでの規模のLT会で登壇するのは初めてだったのでいい機会になりました。
【学生限定】サマーインターン参加者によるLT会 - connpass
6月 ~ 9月 ATOM ハッカソン
- 会津バスが主催する Aizu Transportation Open-data Marathon という長期型ハッカソンに参加していました。
- 唯一のチームメイトが音信不通になったり、結局北海道行く前に1週間ハッカソンをしてしあげたりと大変でしたが、準優勝しました。
10月2日 インターン報告会&進捗どうですかLT
- 後輩主催で手伝いをしました。
10月4日 エンジニア女子会
- サポーターズCoLabの主催する女子会に参加してきました。
ここで繋がったエンジニアの方とまた後日BBQに誘っていただいて、コミュニティの輪を広げることができました。
周りが男性ばかりなのに不満があるわけではないんですが、やはり同性と話す機会が少ないのは参ってしまうので参加してよかったです。
10月26日,27日 JPHacks
zliの仲間たちとハッカソンに参加してきました。
プロダクトとしてはすごいちゃんと仕上がったんですがインパクトに欠けたせいか思い通りの結果には至りませんでした。
11月2日 秋の大LT 2019 in aizu
- 皆さんご存知の大LTです
この会は今までの大LTからはかなり改変し、改善していったのですごい大変でした。
結果的にうまく行ったのですがやはり早めに準備しなければとおもいました。
11月7日 ~ 29日 CA Tech JOB in CATS
- 皆さんご存知 #catechjob に参加してきました。
一言では言い表せない学びがありました。
まだ振り返りブログ書いてないぞ？？？？ この辺後日ブログのリンクに差し変わります。
11月10日 パソコン甲子園 zli展示
- PCKに展示させてもらいました。
12月14日, 15日 温泉ハッカソン
- 温泉に入りたくて温泉ハッカソン企画しました。
結果温泉施設でハッカソンではなかったんですが、一泊二日山奥にこもって開発&みんなで豚汁をつくるという最高の環境をつくることができました。
12月22日 HOPE Day by NewsPicks
- NewsPicks主催の未来の若者のためのイベント。
自分の視野を広げるために参加してきました。 会津は情報単科大学なので、大学で情報系じゃないことを学びんでいる学生が今何を考えているのかを知るために参加してきました。
12月24日 未来大 x 会津大 対バンLT会
- よく外に行くと会津とはこみがよく比べられ、ライバル認識せざるを得なかったはこみさんとクリスマスイブにLT会をしました。
一言でいうと楽しかったです。 やりたかったLT会のライブ配信もできました。
おわりに
振り返って反省してみると、私はやりたいと思ったことをどんどん企画してしまい忙しすぎて倒そうということが度々起こっていました。
私は旅行に行くときに予定をつくらず行き当たりばったりに行動するタイプなんですが、周りに迷惑をかけることもあってしまったので、ちゃんと事前に計画をしようと思います。
また自分の実力をちゃんと見極めてイベント企画しすぎで自分の時間がなくなる、ということがないように気をつけようと思います。
ここまでありがとうございました。 それではよい2020年を！
vue-routerのナビゲーションガードを使う
はじめに
この記事は Treasure Advent Calender 2019 16日目の記事です。 大幅に遅刻(２回目)して大変申し訳ありません。
今回は、12/24 のクリスマスイブに行った、未来大 x 会津大 対バンLT会 で扱ったネタを書いていこうと思います。
はじめていきます。
今回簡単なテストアプリのリポジトリはこちらです。
やりたいこと
認証が必要なAPIを使用している際、 session token が切れていた時に、/login に飛ばしたい。
アプリ構成としては以下な感じです。
各PageComponentのcreatedで、vuexのactionをdispatchし結果をstateにcommit、
Pageの生成時にstateの値を参照するという流れです。
今回はコンポーネントの greet: の後の文章を非同期で生成しています。
とりあえずtokenが有効かどうかを調べる isValidToken APIを生やしてもらいました。
solution1
方法
App.vue の created で、isValidToken を呼び、無効だったら /login に飛ばす。
結果
目的だった tokenが無効なら /login に飛ばす という処理はできたのですが、isValidToken 関数が非同期通信をしているため、tokenが無効というのが返ってきてから/login へ飛ばす処理の前にComponentのインスタンスが作られ、createdで呼んでいたAPIでのエラーが表示されていました。
図としては以下の感じ。
solution2
方法
vue-routerの グローバルビフォーガード を使う。
グローバルビフォーガードとは
いつナビゲーションがトリガーされようとも、グローバル before ガードは作られた順番で呼び出されます。ガードは非同期に解決されるかもしれません。そしてそのナビゲーションは全てのフックが解決されるまで 未解決状態 として扱われます。
全てのフックが解決されるまで未解決状態として扱われます つまり非同期に解決されたとしてもインスタンスが作られず /login に飛ばせます。
ただし、この場合ナビゲーションがトリガー毎にリクエストを飛ばすのでパフォーマンス重視のアプリならやらない方がいいのかもしません。
追加したコード
const router = new VueRouter({ routes }); router.beforeEach((to, from, next) => { if (!store.state.isLoggedIn && to.path != '/login') { next('/login'); } next(); });
※ 最初っからこっち使えよってわかるんですが↑の時は知りませんでした。無知の知！
結果
うまくいきました〜
おわりに
vue-routerのナビゲーションガードを使った場合、APIでの認証系エラーを表示せずログイン画面に遷移することができるようになりました。 しかし、ブログの途中でも言及しましたがこの方法だと画面遷移毎にリクエストを飛ばす必要があるためパフォーマンスを考えるとそんなよくなかったりするかも？
もしもっといい方法があったら教えてもらえると嬉しいです 🙇♀️
そしてTreasure2019のみなさん、アドカレ超遅刻してしまい申し訳ありませんでした。 迷惑かけた人には土下座するのでTreasureN次回誘ってください。
canvasでtypescript を入門してみた
はじめに
こんにちは、たじまです。
この記事は Aizu Advent Calender 2019 の 12/9 の記事です。
すっごい遅刻で申し訳ない orz
つくったもの
以前、CAのインターンの時に初めてtsを触りその安全さ(jsと比べて)と設計をしっかりしていればパズルのように楽に書けて感動したのでもう一度触ってみたかったのと、
canvasでtsは型がしっかりしているから楽だよという話を聞いたので、matrixのあのeffectをcanvasで作ってみました。
完成したのはこちら。
https://matrix.schktjm.now.sh/
実装
絵画のループ処理をするのに以前は setInternal を使っていたのですが、 今回はWindow.requestAnimationFrame を使ってみました。
Window.requestAnimationFrame とは
The
window.requestAnimationFrame()method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint. --MDN
特徴として以下の点があります。
- ブラウザの絵画更新と同時に呼び出される
- タブがバックグラウンドや非表示の
<iframe>の場合、パフォーマンス改善のためにFPSが下がる。
setIntervalはブラウザがアクティブの有無に関わらず、常に一定間隔で実行されるため今回のような場合は requestAnimationFrame のほうが優しいかなと思い使いました。 (それでもchromeは何回か落としてしまいましたが)
実装方法
今回、この縦の文字列を１つの状態としてそれを配列で持ち requestAnimationFrame でそれをforEachでループしレンダリングしました。
持っていた状態として
interface Oneline { fontSize: number, x: number, // x座標 delay: number, // 降りてくるタイミング v: number, // 速度 color?: RGB, }
難しかった点
はじめにやろうとした方法は、各 line がxミリ秒ごとにy fontSize分下がるという実装を想定していたため、各line で 絵画のタイミングを計算しようとしていたため、絵画のタイミングを下のようにしていました。
const step = (timestamp: DOMHighResTimeStamp) => { lines.forEach(x => { if (Math.floor(timestamp - x.delay) % x.v == 0) { // レンダリング } }) } window.requestAnimationFrame(step) } window.requestAnimationFrame(step);
しかし、requestAnimationFrame はcallback関数が呼ばれるのはブラウザのリフレッシュレートによるところが多いため、一定間隔で呼ばれず上記の方法で実装すると時々(しょっちゅう) カクついたりしていました。
参考
The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation. --MDN
そこでxミリ秒ごとに更新じゃなく、xミリ秒の時にどこにいるかを計算する方向に変えました。ただし、呼び出し毎に更新をすると文字が見えないレベルで早すぎたので 30ミリ秒毎に更新するようにしました。
let lastTime: number = null; const step = (timestamp: DOMHighResTimeStamp) => { if (lastTime === null) lastTime = timestamp; if (timestamp - lastTime > 30) { lastTime = timestamp; lines.forEach(x => { const height = (timestamp - x.delay) / x.v * x.fontSize; // レンダリング }) } window.requestAnimationFrame(step) } window.requestAnimationFrame(step); };
文字列の状態はレンダリング関数中でランダムに生成していたので、一文字ごとに降りるという想定していたアニメーションはできませんでしたが、やってみたらこっちのほうがmatrixぽかったので最初からこっちにすればよかったです 笑
おわりに
10日も遅れてしまってすごい申し訳ない。:pray: この記事に対するコメント、ツッコミ大歓迎です。
typescript入門するはずがアニメーションのレンダリングで詰まっていたのが多かったのでリファクタリングしてもう少し型の優位性を理解したいと思います。
Treasure 2019 に参加してきました
こんにちは、たじまんこと田嶋幸智子です。
この夏、VOYAGE GROUPさんの Treasure というインターンに参加してきました。 この記事は、私がTreasureでどんなことしてきたかを書き綴っていきたいと思います。 Treasureに参加できなかったけど気になってる方や、Treasure気になってるけどどんな感じなんだろう？と思ってる方の助けになれば嬉しいです。
VOYAGE GROUPって？
渋谷にある中規模ベンチャーです！ 主に アドテクだったりポイントメディアだったりを要に事業を展開している会社です。詳しくはHPの 事業紹介 が参考になるかと思います。
Treasureって？
業務型でなく、VOYAGE GROUP現役エンジニアのメンターやインターン生で「ものづくり」をするインターンです！
雑に言うと Webアプリケーションの全部 をやります。詳細は下で書きますが、予想をはるかに超える壮絶なインプットとアウトプットです。業務型ではないため、同年代エンジニア学生との会話があり、メンターさんたちの設計思想討論がありとすごい楽しくて為になるインターンです。
詳細としてはこんなかんじ HPから引っ張ってきました↓
| 概要 | . |
|---|---|
| 開催期間 | 2019年8月12日(月)～8月30日(金) |
| 時間 | 10：00～18：00 |
| 場所 | VOYAGE GROUP本社（東京・渋谷） |
| 待遇 | 3週間で1人12万円支給 ※遠方の方は上限4万円までで交通費支給 |
| 人数 | 約30名 |
| 参加資格 | - 大学3年生、大学院修士1年生、高専専攻科1年生を対象(文理不問)。※アツイ思いがあれば他学年でもOK！- チームで開発に取り組みたい人- 自らの想像をカタチにしたい人- エンジニアリングやものづくりが好きな人- 将来、社会的に影響力のあるエンジニアになりたい人 |
待遇情報
みんな気になる待遇情報を載せておきます。 拘束時間は 10:00 ~ 18:00 で、遅くなるときはメンターさんに言ってねーという感じでした。
私は遠方参加の唯一の女性だったので三週間のあいだなんとオフィスから徒歩圏内のビジネスホテルに宿泊、9:30におきても余裕です。
ランチには社食が300円で食べられます！ あと、オフィスにカフェがあってそこで美味しいコーヒーが飲めるので最高でした。
定時の18:30をすぎるとAjitoにあるお酒を自由に飲むことができます。 私はよくその日の復習をお酒のみながらしてました。(この写真のお酒は個人所有ので隣にちゃんと優しいお酒があります)
参加したきっかけ
Treasureを知ったのはサポーターズさんの就活イベントでした。
内容も気になっていたし、知り合いや先輩にたくさんのTreasure卒業生がいたのと、どの先輩も褒め言葉しか口に出さないのでどんなものかと思い応募しようと思ったのがきっかけです。
Treasureのながれ
Treasureは主に講義パートとチーム開発パートに分かれています。
それぞれをさらっと書いていきます。
講義パート
Go言語講義 [1, 2.5)日目
#voyage_intern
— たじま🌤️🏍 (@schktjm) August 12, 2019
なかなか宗教感あるインターンに来てます pic.twitter.com/mIXW29rGJM
1日目に事前課題の復習でhttpサーバ、DBとの接続、2日目でAPIサーバ完全理解しました。バックエンドの経験がないのでTAの力を召喚しまくりでした。
フロントエンド講義 [2.5, 3]日目
フロントエンドの歴史から始まりテストやPromiseまわりのエラーハンドリングなどを触りました。
DB講義 4日目
前半講義と後半チームでモデリングと言った内容で、前半はRDB, KVS, ACID などDBの用語を勉強しました。後半のチームでモデリングは他の受講生の意見を聞ける貴重な時間で楽しかったです。
中間課題 [5,6.5)日目
5日目で中間とは何事！？とおもいながら中間課題の日。
中間課題 1日 、実際３日(金曜に課題が出て月曜発表。なるほど。土日は？)
VOYAGE GROUPの夏インターンTreasureに参加した - 心の声と垂れ流す場所
ほんまこれ。私は習ったこと全部使ってTODOリストを作ろうとしました。
結果 : Vue.js + FirebaeDB になりました。
悔しいのでちゃんとバックエンドも実装します。
セキュリティ講義[6.5,7)日目
個人的にXSSを見つけてaleart出すのは楽しかったです。
認証講義[7,7.5)日目
超特急のとっとこハム太郎でした。
Auth周りの知識をさらっとやり、Cookie認証をGoで実装し、よくあるトラブルをまなびました。
結論 : Authの実装は必要ないけど技術選定に知識は必要なので誰か一人は持っていた方がいい
インフラ講義(7.5,8)日目
CI/CDは習慣
アイデア講義 (8.5,9)日目
これはいままでやったアイデア出しの中で最高に納得できて心からそのアイデアを押したくなる手法でした。
詳しい内容が知りたい方はほかのトレジャー生の記事を参考にしてみてください！
チーム開発
私達のチームはフロント二人、バックエンド二人、インフラ一人の超絶役割がわかれててちょうどいい５人でした。
プロダクト紹介
私たちのチームのプロダクトは「eeNotes」です。 ひとことで説明すると、ノート共有型SNS。
私たちが普段、Evernoteやメモ帳、hackmdで集めてる授業ノートを１つのプラットフォームに集め、さらにSNSとして共有することで大学ごとや講義で見れるようにしたサービスです。
実装
フロント : React.js, バックエンド : Go言語, DB : MySQL,
チームのみんな何かしら得意分野があり、それぞれ各々が得意なことをできたのがすごく熱かったです。 私はフロントエンドを担当していたのですが、フロントの比重が重く、ほぼ初心者のバックエンド担当もフロントに回ってペアプロを組んだりしながら開発してました。 特に初心者からバケツリレーの達人になったぎーたかには心からの拍手を送りたいです。
惜しくも優勝を逃してしまい最高に悔しかったです。 リリースしたいと話をつけ、お金の部分は現在なみさんと交渉中です。
Treasureに感じたVOYAGE GROUPの社風
前後半いろんなメンターの方々の助けを借りて、いろんな方と語り合って感じたのが、VOYAGE GROUPには個性が強いひとが多いなっという印象でした。
感想
始まる前はどんなにつよつよのエンジニアがいるのだろうと生まれたての子鹿のように震えていたのですが、みんな優しく力の持ったエンジニアたちでいっぱい助けてもらい感謝の嵐です。
前半のインプットの量が多く、脳みそフル回転オフィスで復習してからホテルに帰った瞬間に熟睡を繰り返していました。
チーム開発でもアイデアに半端なくこだわっていて、解釈の違いで衝突する時がありました。でも、絶対に 一発当てたる と全員が思っていた所以だと思います。
本当に優勝できなくて悔しいし、私自身このサービス使いたいのでどうにかしてリリースまでもってって自慢してみんなに使ってもらいたいです。
最高に楽しくて濃い三週間でした。 最後まで読んでいただき、ありがとうございました！
Inside Frontend に参加してきました
こんにちは、たじまです。
この度CyberAgentさんのスカラーシップ枠で、Inside Frontend に参加してきました。
目次
参加したきっかけ
今回はサイバーエージェントさんがTwitterで募集していたスカラーシップで参加してみました！交通費・参加費・宿泊費を負担してくれるとのことで応募だけするか〜のノリで応募してみました、行けてよかったです。
Inside Frontend とは
Webフロントエンドの現場とこれからをつなぐカンファレンス Web技術の可能性が広がると共に、Webフロントエンドと呼ばれる領域は多様化しています。さまざまな現場が今どうのような個別の問題に取り組んでいるのか、同時にWebが今後どのように発展していく可能性があるのか、これらを一緒に考えていく場です。 本イベントでは、各社の現場で得られたノウハウや、これからの Web 技術について見る、聞く、話すなどして参加者同士の濃いコミュニケーションが生まれることを期待しています。 --Inside Frondend
まさにこんな感じでした！ 各40分のセミナーの後にAMAという質問時間があり、根掘り葉掘り聞けました。
ためになった発表
聞いたセミナーの中でも印象に残ったものです。
"Web App Checklist ~高品質のWebアプリケーションをつくるために~"
【セッション紹介🎤】「こえのブログ」の開発メンバーであるお二人からは、高品質なWebアプリケーションを開発するために必要な要素とその組み合わせについて、実践した内容を元におこしたチェックリストを用いてお話していただきます #insideFE https://t.co/UtkrDPFQem pic.twitter.com/QYWZ9daYAK
— Inside Frontend (@insidefrontend) 2019年5月8日
これめちゃめちゃ良かったです。みてていいってよりも同じプロジェクトで働いてみたいと思うようなセミナーでした。パフォーマンスやアクセシビリティをつきつめる話だったのですが、個人開発ではあまり触らない話だったので良い知見になりました。セミナーは20 / 36 項目のみだったらしいので全部見てみたいです。
お昼すぎの一番眠い時間だったのですが、勢いとこだわりに圧倒されましたw
"Loading Performanceとの向き合い方"
【セッション紹介🎤】Miyamotoさんからは、日経電子版のようなステークホルダーの多いプロダクト開発における、コントロールできない外部スクリプトと向き合うことの重要性や苦労などふまえ、クライアントサイドのパフォーマンス改善についてお話いただきます #insideFE https://t.co/UtkrDPXr5U pic.twitter.com/mEdDgL4c1b
— Inside Frontend (@insidefrontend) 2019年5月10日
パフォーマンスのことだったのでどんなものかと入ってみました。最初はみんなよく知る日経さんでめずらしいなーな感じだったのですがセミナー聞いてるうちに共感の嵐でした。
昔からある企業さんだからすごい traditional companyだと勝手に思ってたけどいろいろ刷新しててすごい #insideFE #insidefe_b
— たじま🌕🏍 (@schktjm) May 18, 2019
ほんとにこれで、これ聞く前はVueやReactなどのフレームワークがモダンでイケイケなんだ〜みたいなイキリ小学生な気持ちだったんですが、日経電子掲示板は
- 静的なサイトである - 速さが大事
などの理由から WebComponents を選択するっていう工程でなるほどなぁってなりました。
AMAの時間は他のところにも行ってみたのですが、この時間帯のセミナーは面白そうなのばかりだったのでYouTube待機です。
最後に
楽しかったです！スカラーシップ枠の他の学生やエンジニアの方々と懇親会の時にお話できたのと、気になっていたチェックリストの原さんと話せたのがいい機会になりました。
休学してインターンするというツワモノや、2dayインターンシップのときの方々と久しぶりに会えたおかげで懇親会の時にぼっちにならずにすみました笑
そしてパフォーマンスチューニングこれからやっていきます。
最後に、今回交通費と参加費と宿泊費をだしてくれたサイバーエージェントさんとスタッフのみなさんありがとうございました！
