Scala関西Summit 2018のスライドのリンク集(WIP)

Scala関西Summit 2018 で公開されたスライドを集めてみました。順不同です。随時更新していきます。

「Complete React Tutorial (with Redux)」はReactの基礎を学ぶのに良いかもしれない

フロントエンドの技術を学ぶのに私がよく利用している The Net Ninja (動画学習サイト)ですが、知りたいことはまず動画で学び、深掘りしたくなったら書籍などで学ぶというスタイルが効率的な学習方法なのかなと最近感じています。

さて、今回はそんな The Net Ninjaの「Complete React Tutorial (with Redux)」でReactを学んでみました。

Complete React Tutorial (with Redux)

こちらはYouTubeで公開されている学習コースになります。

www.youtube.com

動画の総数は44本で、1本あたりの長さは短いもので3、4分程度、長いものだと10分程度なので、空いた時間に少しずつ進められます。

学習コースの内容

本学習コースは大きく5つに分かれていて、以降はそれぞれでどんな内容を学べるのかを書いていきたいと思います。 (ちなみに「基本編」「応用編」とかは便宜上私が付けました。)

基本編1

スライドを見たりコードを書いたりしながら以下の内容を学びます。

  • Reactの概要とセットアップ
  • Component、State、Event、JSX

(動画の#1から#9に相当)

基本編2

シンプルな画面を作りながら次のような内容を学びます。

  • create-react-appでReactアプリを作成
  • React Dev Toolのインストールと使い方
  • Virtual DOM
  • Nested Component、Props
  • Container Component vs UI Component
  • Conditional Output
  • cssファイルの扱い方
  • Componentのライフサイクル
    • componentDidMount、componentDidUpdate

(動画の#10から#22に相当)

応用編

これまでの応用編としてTODOアプリを作ります。

f:id:shinharad:20181110225957p:plain

(動画の#23、#24に相当)

React Router

Poke'Timesというシングルページアプリケーションを作りながら次のような内容を学びます。

  • React Routerのインストールと使い方
    • Links & NavLinks
    • Route Parameters
    • Redirect
    • Switch Tag
  • Higher Order Components
  • Axiosを使用し外部APIより取得したデータを画面に出力

f:id:shinharad:20181110225753p:plain

(動画の#25から#33に相当)

Redux

Reduxの解説から始まり、Poke'TimesにReduxを組み込んでいきます。

(動画の#34から#43に相当。#44は総まとめの回)

終わりに

Reactは前々から気になっていたのでこの学習コースを通じて理解を深めることができました。Vue.jsと比較するとフレームワークが隠蔽している部分がReactの方が少ないので、個人的にはReactの方が好きだったりします。今後は更に深掘りしつつ趣味のやつを作っていきたいと思います!

毎週末持って帰るのがつらいので自宅用のHHKBを購入した

今までHHKBは一台しか持っていなくて、平日は職場で、週末は自宅へ持って帰るという生活が続いていました。

一応、ハードケースDX というHHKB専用のケースで持ち運んでいたのですが、これだと電車で片手が塞がってしまい、本を読むのに邪魔だったんですよね。

それなので、思い切って自宅用のHHKBを購入してみました。中古ですが状態はとても良いです。

f:id:shinharad:20181029235545j:plain

自宅でしか使わないのでType-Sじゃない方を購入しましたが、やはりType-Sと打鍵感が全然違いますね。この辺は割り切りが必要なのかなと思ってます。

今後は吸振マットとキーボードブリッジを装備させてより快適な環境にしていきたいと思ってます。

(二刀流をやってみたので記念にパチリ)

f:id:shinharad:20181029235738j:plain

「Mastering Functional Programming」を読んだ

Packt PublishingMastering Functional Programming を読みました。今回はこの本について書きたいと思います。

www.packtpub.com

どんな本か

この本はざっと次のような内容が書かれています。ちなみに言語はScalaです。

  • 関数型、命令型プログラミング双方のアプローチの違いについての比較
  • 副作用を抽象化し参照透過性を維持させる方法
  • 型クラスでWriterやIOなどのEffect Typeに対してビヘイビアを注入する方法
  • Cats の構成と利用頻度の高い型クラスについて
  • Cats Effect を使用した並行プログラミング
  • Typelevel.scala の各種ライブラリを使用したWebAPIの実装
  • Monad TransformerやTagless Final、HListなど、FP特有のパターン
  • アクターモデルとそのユースケース

内容的には、Scala with Cats の前に読むと良さそうかなと思いました。

理解度に応じた読み方

目次はこんな感じになっています。

  • Chapter 1 The Declarative Programming Style
  • Chapter 2 Functions and Lambdas
  • Chapter 3 Functional Data Structures
  • Chapter 4 The Problem of Side Effects
  • Chapter 5 Effect Types: Abstracting Away Side Effects
  • Chapter 6 Effect Types in Practice
  • Chapter 7 The Idea of the Type Classes
  • Chapter 8 Basic Type Classes and Their Usage
  • Chapter 9 Libraries for Pure Functional Programming
  • Chapter 10 Patterns of Advanced Functional Programming
  • Chapter 11 Introduction to the Actor Model
  • Chapter 12 Actor Model in Practice
  • Chapter 13 Use Case: A Parallel Web Crawler

この内、ScalaのコレクションフレームワークやOption、Either、Future、Tryが分かっている人はChapter 6まで読み飛ばして良さそうです。それと、型クラスを理解しているのならChapter 7は読まなくても良さそう。あと、Akka実践バイブル などでAkkaをある程度理解している人であればChapter 11以降は読まなくても良さそう。

つまり、Cats をはじめとする Typelevel.scala の各種ライブラリに触れるだけの目的であれば、Chapter 8 〜 10 だけ読めば十分だと思います。

それでは、そのChapter 8 〜 10についてもう少し詳しく書きたいと思います。

Chapter 8 Basic Type Classes and Their Usage

Cats の構成を俯瞰的に解説していて、全体を把握するのに良いですね。instances、data、syntaxそれぞれのパッケージがどのような役割を持っているのかとか。型クラスのHierarchyとか。Monad、Applicative、Fuctor、Monoid、MonoidK、Traverseについての解説など、参考になりました。

Chapter 9 Libraries for Pure Functional Programming

Cats Effect を使用した並行プログラミングについて解説しています。その中で、FiberはMonadicフローにおいてIOの非同期処理の開始(start)、待ち合わせ(join)、キャンセル(cancel)を明示的に宣言するものであるとか、Bracketはリソースの開放をするものだとか。そして、Typelevel.scala の以下のライブラリを使用したWebAPIの実装例を紹介しています。

個々はそれほど深い内容ではないので、気になったら各ライブラリの公式サイトなどで学ぶと良さそう。

Chapter 10 Patterns of Advanced Functional Programming

関数型プログラミングをより便利に書くためのパターンとして、Monad TransformerやTagless Final、Heterogeneous List(HList)を解説しています。この内、Tagless Finalについて名前は知っていたものの、どのようなものなのか知らなかったので、学ぶ良い機会だったなと思います。

終わりに

Mastering Functional Programmingは、それほど濃い内容では無いものの、Catsを俯瞰して見ることができたり、doobieやhttp4sなど今まで触ったことの無いライブラリと出会えて良い刺激になりました。

「JavaScript DOM Tutorial」でVanilla JS力を磨く

現在フロントエンドの技術を少しずつキャッチアップしていますが、今回はVanilla JS力を磨くべく The Net NinjaJavaScript DOM Tutorial をやってみました。

JavaScript DOM Tutorial

JavaScript DOM Tutorialは、YouTubeで公開されている学習コースです。

www.youtube.com

こちらは1本あたり4〜10分程度の動画が全部で18本あって、こんな感じの画面にステップバイステップで機能を追加しながら学習を進めていきます。色々試しながら進めても3時間あれば終わると思います。

f:id:shinharad:20181006230905p:plain

このコースで何が得られるのか

これを全てやり終える頃には以下の内容についての理解が深まります。

  • Selectors APIを使用したDOM要素の指定
  • Element.classListによるcssのclass名の制御
  • DOMのEvent Bubbling
  • DOMContentLoaded Event

つまり、jQueryのような便利だけどページのローディングが遅くなるライブラリは使用しないと決めた時に、 Vanilla JS(素のJavaScript)でどう戦うかを入門レベルで教えてくれるコースになっています。

ちなみに、ソースコードGitHubで公開されています。(各動画に対応したブランチが切られてます)

github.com

終わりに

プライベートではVue.jsを触っていますが、特殊なケースではどうしてもDOMを触る必要があったりして、そうしたときに今回のコースはやって良かったなと思いました。

というわけで、今回は JavaScript DOM Tutorial の紹介でした!

「Effective DevOps」を読んだ

「Effective DevOps ―4本柱による持続可能な組織文化の育て方」という今年3月に出版された本を読みました。

www.oreilly.co.jp

DevOpsというと、開発と運用だけの話であるとか、CI/CD自動化とかツールの話に目が行ってしまいがちですが、この本はそうした誤解を解いたうえで、持続可能な組織の文化をどう構築していくか、様々な問題をどう乗り越えていくかを教えてくれる非常に学びの多い本でした。

まずこの本では、成功を持続できる企業は、単純に開発と運用のチームだけから成り立っているわけではないということ。そして大局的に捉えたDevOpsとは、個人と組織全体が持続可能な作業習慣を生み出し維持させていくための文化的な取り組みであるということが、明確に定義されています。(そのためこの本では意図的に devops と表記されています。)

そして、効果的なdevopsは、コラボレーション、アフィニティ、ツール、スケーリングの4本柱について、人に焦点を当て、どう組織を構築していくのかが全体的なテーマになっていますね。

devopsを実践するための「唯一無二の正しい方法」、「全部入りのdevops」、「devops-as-a-service」といったものは存在しないということ。devopsは人間の問題であり、すべての組織がその中の人たちにとって固有のdevops文化を構築する必要があると。

そこでちょっと思い出したのですが、昨年読んだ SRE本 の中で、開発と運用という対立関係にある状態からSREチームを誕生させ組織の文化を構築していった中で、次のような取り組みが紹介されていました。

  • ソフトウェアエンジニアを採用しサービス運用をさせることでトイルを撲滅
  • エラーバジェットを活用し機能のローンチとサービスの信頼性とのバランスを取る
  • 非難のないポストモーテム

また、SRE本には、SREとDevOpsとの違いについて「DevOpsはSREの中核的な方針のいくつかを一般化したものと捉えられる」とも書かれていました。ですが逆に考えると、上記の内容はあくまでもGoogleという組織固有の文化に寄り添って取り組んだdevopsの成功事例(本の中では「ストーリー」という言葉を使っています)であって、SREチームを誕生させ組織の文化に根付かせたことがGoogleにとってのdevopsだったと捉えることができるのかなと思いました。そしてそれは、すべての組織が同じようにやれば必ず成功するという「唯一無二の正しいやり方」ではないということですね。

大事なことは、自分たちの組織で良い文化を育てそれを持続させていくには何が必要かを、様々な人や組織が共有するストーリーを参考にしつつ取り組んでいくことなのかなと思いました。

「Vue JS 2 Tutorial」は復習にちょうど良さそう

最近はプライベートでVue.jsを触ってるんですが、公式ドキュメント を読んだ後に、Vue JS 2 Tutorial という学習コースをやってみたら復習にちょうど良かったので今回はその話。

Vue JS 2 Tutorial は、The Net Ninja というイギリスのオンライン学習サイトが公開している学習コースです。YouTubeにアップされている動画なので、誰でも無料で学ぶことができます。

www.youtube.com

対応するソースコードはこちら。

github.com

1本あたり10分程度の動画が全部で44本あり、動画を見ながら実際に手を動かしてみるとより理解が深まります。内容は、Vue.jsの基本から始め、最終的にはFirebaseと連携したSPAなブログを作成するところまで学べます。

なお、注意事項として、動画がアップされたのが2017/4頃で、ここ を見ると、Vue.jsのバージョンが 2.2.1 とちょっと古めなので、最新版との照らし合わせは必要そうです。(気になるところはそんなに無かった気がしますが)