読者です 読者をやめる 読者になる 読者になる

gaaamiiのブログ

悪気なく間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

24歳になりました

今年もこれを読んでくれているであろう身近だったり他人だったりする皆様のおかげで無事加齢することができました。

24歳も無事に生き抜きたいです。以下、ほしい食料リストになります。もちろん、直接寿司をおごってくれてもかまいません。

あと、誕生日とまったく関係ありませんが、私がエンジニアとして働いているスタディプラス社ではRailsエンジニアを募集しております。わいわいやってて楽しいです。エンジニアは裁量労働制なので出社時間自由です。どれくらい自由かというと、laisoさん(BASE社のiOSエンジニア)の転職エントリに書かれているユビレジ社よりかはもう若干節度があるくらいの感じです。11時〜13時くらいに出勤する人が多めです。お菓子もあります。コーヒー飲み放題です。

www.wantedly.com

ぜひ会社に遊びにきて、「gaaamiiの紹介で来た」と伝えて、入社して、ばりばり成果を出してください。何卒よろしくお願いします。

AngularとSass使いたい時どうすればいいんだ問題

(※Angular2以降の話です)

みたいなとき、どうやればいいんだろう。というのを考えてる。

やりたいことのイメージ

// app/assets/stylesheets/variables.scss
$base_color: #723200;
// frontend/src/components/timeline.component.ts
@Component({
    selector: 'timeline',
    templateUrl: './timeline.component.html',
    styleUrls: ['../styles/timeline.component.scss']
})
// frontend/src/styles/timeline.component.scss
button {
  &:hover {
    background-color: $base_color;
  }
}

このTemplate parse errorsはどこから?

Angular

ということが多くてつらい。

f:id:shgam:20161123162859p:plain

何が起きたかというと、divの閉じタグが1つ足りなくて30分近く悩んだ。

Angular2のウェブフロントエンド開発に携わっていて難しいと思うことなど振り返り

Angular

ウェブフロントエンド開発に携わらせてもらっていて、なかなか大変です。てんやわんやでひたすら頑張るしかないという状況で、ブログを書いている場合ではないと思います。しかしせっかく頭を抱えるような難しさを感じているので、それを新鮮なうちに言葉にしておきたいと思いました。

背景

ウェブフロントエンドと一口に言っても千差万別だと思うので背景を書きます。

10月ごろから既存のウェブサイトを再構築する作業に携わらせてもらっています。仕事内容の詳細は僕から見るとこんな感じです。

  • 目的
    • 既存サービスのウェブサイトを新しいコンセプトでリニューアルする
    • 具体的には、SEOとUXの改善が特に大事
  • 技術
    • Angular2
    • TypeScript
    • Rails(slim)
    • Bootstrap
  • チーム
    • ディレクター1名 + エンジニア4人(サーバーサイド x 2 + ウェブフロントエンド x 2) + デザイナー1.5人(デザイナーは社内に1人しかいない -> 途中から1人入社 -> 引き継ぎつつコミットしていただいてる)
    • 4人のうち1人はCTOなので全コミットできるわけではない(見るからにいろいろ忙しい)
  • 自分
    • 趣味でウェブサイトを作ったときにRails, Backbone.js, Reactあたりは一応触ったことある
  • 作る流れ
    • 企画 -> デザイン -> 開発
      • デザインと開発はほぼ並行
      • 細かい仕様は開発途中に随時ディレクターやデザイナーに確認

以上を踏まえて、今感じている難しいことなどを書き残しておきます。

1. どこでHTML作るの問題

(良い意味でも悪い意味でも)社内で一番盛り上がったテーマのような気がします。もともとSPAとして開発していたウェブサイトでしたが、今回はSEOに気を遣わなければならなくなりました。

JSで動的に作られたHTMLをGoogleがどこまで読んでくれるのかわからないこともあり、SEO対策に万全を期すにはサーバーサイドでHTMLを作らないといけないのでは、という話になり、どこをRails側のslimで書き、どこをAngularのJSに作ってもらうかということに悩みました。

なんやかんや行ったり来たりがあった上で、SEOが本当に大事なページはslimで書くようにして、読み込みで表示が増えるような部分についてはページ遷移で対応したり、コンポーネントが初期化されたときにslimに書いたhtmlを除去するなどしてどうにかすることになりました。ビューをサーバーで生成するということがほぼ無いiOSAndroidと比較すると、これはWeb特有の悩みなのかなと思います。

個人的には、使っているときに画面がガチャガチャしないように気をつけるのが大事だと思います(ガチャガチャをちゃんと言葉にすると、1ページの表示の間に、その中の要素の幅・高さ・色などがユーザーから見て何度も変わることです)。サーバーサイドで作ったHTMLを返すのに比べて、JSでHTMLを動的に作ると画面の要素はガチャガチャしやすいので、気をつけなければいけません。

2. CSS方針

普通にRails/assets/stylesheets下にscssファイルを書いているんですが、ポリシーみたいなものを考えず手探りで汚いCSSをたくさん書いてしまっています。すみません。本当にすみません。

3. コンテナとコンポーネント

Angularのコンポーネントを、Container Components と Presentational Components に大きく分けています。hoge.container.tshoge.component.tsのように、ファイル名から明確に区別しています。

Containerは状態や外部とのやりとりを管理します。たとえばサーバーと通信するサービスを利用してデータを読み込んで状態を更新したり、子のコンポーネントから受け取ったイベントに応じたリクエストをサーバーへ投げたりします。

対してComponentは、状態をもらってそれを表示すること、あるいはユーザーからのアクションを受け取って親のContainerに渡すことに専念します。

この考え方の元ネタはというと、Redux作者の @dan_abramov がmediumに投稿した記事です。

見た目のコンポーネントと状態管理のコンポーネントを分けることで、Presentational Components の再利用性を高めることの利点を、以下のように書いています。

You can use the same presentational component with completely different state sources, and turn those into separate container components that can be further reused.

全く違うステートソース(状態の元)に、同じPresentationalコンポーネントを使うことができ、それらをcontainer componentsに分離し、さらに再利用することもできる。とのこと。

しかし自分はどうもこの考え方を実践しきれていません。コンポーネントがユーザーからのアクションを受け取ったときに、もうそこで状態管理までしてしまえばいいじゃないかという気持ちになります。イベントを親に持っていくにはAngularの場合はEventEmitterというクラスを使って子コンポーネントのイベントを親コンポーネントへ転送するのですが、それを手間に感じてしまって、親のContainer Component が管理するべき状態を、子のPresentational Component で持ってしまうのです。

上の記事で言われているようなコンポーネントを切り離すことの利点をよくよく思い返しながら作っていかなければ、と思います。

4. RxJS

難しい。


とりあえず以上です。何か思い出したら書き足します。

「長岡先生の授業が聞ける高校数学の教科書」を買った

文系エンジニア数人で一緒になって高校数学をやり直そう!という話に乗っかり、教科書を買いました。

そういえば、長岡先生の教科書って前にトミーさんがバズったときに使ってたやつっぽい。

tkykhk.hatenablog.com

高1からちょっとずつやり直していきます。

f:id:shgam:20161113224821j:plain

長岡先生の授業が聞ける高校数学の教科書数学 (考える大人の学び直しシリーズ)

長岡先生の授業が聞ける高校数学の教科書数学 (考える大人の学び直しシリーズ)

#ng_jp 主催のAngular 2 ハンズオンに参加してきました

Angular 勉強会

connpass.com

  • 主催:ng-japan
  • 会場提供:レバレジーズ株式会社

という感じのAngular2ハンズオンへ行ってきました。ハンズオンって言葉の意味を実はよく知りませんが、たぶんワークショップとかと同じようなものだと思ってます。ここ何ヶ月か仕事でAngularを使っていて基本的な使い方についておさらいをしたかったので参加しました。

angular-cli

今の自分のコーディングの始め方だと、「さてこのHogeページを進めるぞ」、といってhoge.module.tsのNgModulesのimportsとdeclarationsとprovidersとbootstrapそれぞれにサービスやらコンポーネントを書いて、1つずつファイルを作ってコーディングを始める。しかし、Serviceをprovidersに入れるのを忘れていたりとかコンポーネントから指定するテンプレートのhtmlのファイル名を間違えたりとか、すぐに解決することとはいえなんやかんやで地味に神経を使うので疲れる。といった問題がありました。

angular-cling new hoge のようなコマンドでプロジェクトを作ると、Angular 推奨の命名規則に則ったファイル名でファイル群を生成するコマンドラインツールです。このangular-cliを使って作ったプロジェクトでは、ng g componentng g interfaceのように役割単位でファイルを生成できます。module.ts ファイルにも追加されたコンポーネントを書き込んでくれたりします。これを使えば、providersに入れるのを忘れたりして神経をすり減らす問題が無くなって、開発がやや快適になるような雰囲気がしますね。

正直、これまでangular-cli は使ったことがなく、今回のようなチュートリアル用だったりおもちゃを作る時の便利ツールみたいなイメージを持っていました。しかし、ng_jp 代表のらこらこさんにお話を伺ったところ、普通に仕事で使ってるようです。古いプロジェクトではそうもいかないけど、新しいプロジェクトでは全員これを使ってファイルを作るようにしているらしい。メンター陣のみなさんもそれぞれ考えて使うなり使わないなりしているらしいです。

仕事ではここらへんのことを上手く整理するのに色々工夫してる余裕がないので今後も手書きで足していくつもりですが、そもそもangular-cli がそんなちゃんと使われるようなツールだと思っていなかったのでこれは良い発見でした。

Angularのことをなんて呼ぶの問題

Angularはこれからバージョンガンガン上がるのでAngular2って言うのやめましょう、って感じらしいです。古いAngular1のことは忘れます。

その他

ガムが懐かしい味がしておいしかったです。


やっぱりハンズオンとかワークショップ形式だと自分で手を動かしている時間が長めで楽しいですね。ng_jp のメンター陣の方々、会場を提供くださったレバレジーズ株式会社様、ありがとうございました。