north-memo

数学できない方の数学科のブログ、一応デザイナー…なのか…?

Reactを勉強した(?) 5日目

今日は疲れからか黒塗りの高級車に激突しそうになりました。とにかく眠いなかお勉強。
キーボードを買ったが妙なキー配列に大苦戦して慣れてなかったりニコ生で恥を晒し続けていました。

今日やったこと

Components

  • 繰り返しやることない?いちいち書くの辛くない?
  • 繰り返し真っ当に書いちゃって変数衝突したら辛くない?

そんな時に助けてくれるのがComponentだ!!!

  • Componentの中には templateとcontrollerを入れる
  • <phone-list></phone-list> <- DOMになるようなコンポーネントを作れる、すごい!!
  • .component.jsと.component.spec.jsが必要(多分)
  • 図の理解が重要なんだけど、分からない

今日はコレでおしまい。もう英語読めなくなってるなぁ。日本語のドキュメントを最初に読んだあとでやろう。
流石に疲れたのでおやすみなさい。

Reactを勉強した(?) 4日目

引き続きAngularJSを勉強している。

今日学んだこと

1 Static Template

普通にHTMLを書くようにをapp/index.htmlに書くと反映される

2 Angular Templates

View と Template

  • View : Model(データ構造)をHTMLテンプレートに通して反映したもの
  • HTMLテンプレートについて
    • ng-app : モジュール(後述)を読み込む
    • ng-controller : DOMのsub-treeを担当している
    • ng-repeat : each文みたいな書き方が出来る(変数名 in 配列)
    • {{}} : コントローラーのモデルから参照できる

Model と Controller

  • Model : コントローラーの中にある、中にリテラルで記述されたオブジェクトがある簡単な配列
  • Controller : $scope という引数を持つ構造的な関数。モデルをインスタンス化するのがコントローラー
  • app.jsでng-appのmoduleを定義する

    The PhoneListController controller attaches the phone data to the $scope that was injected into our controller function. This scope is a prototypal descendant of the root scope that was created when the application was defined. This controller scope is available to all bindings located within the tag. ↑の記述はさっぱり意味がわからなかった

Scope

  • Scopeの概念はAngularJSにおいてかなり重要
  • Template, model, controllerを一緒に動かすためののりみたいな役割をするもの
  • コレによって model と views を切り分ける
  • 一方で model が変更すれば views にも反映し、逆もまた然りみたいな

Testing

controllerとviewを切り分けたことによってテストが簡単になるらしいが、テストをそもそもそんなに知らないので読み飛ばした

Experiments

やってみよう、みたいな所。実際にやってみたよ!

Reactを勉強した(?) 3日目

creator.dwango.co.jp クリエイターズブログで記事を執筆しました。思った以上の反響で驚いております…!!読んでいただいた方、感想を頂いた方、githubにstarを下さった方など…、本当に有難うございます。これを励みに、これからも精進してまいります。

さて、タイトルはさておいてAngularJSのチュートリアルで学んでいます。

今日やったこと

環境構築

  • angular-phonecatをclone
  • npm install
    package.jsonに依存パッケージを書いておけば npm install で全てインストールしてくれるということを知った。便利
    • bowser
    • http-server
    • karma
    • karma-chrome-launcher
    • karma-firefox-kauncher
    • karma-jasmine
    • protractor
    • shalljs
  • npm startで完成品を見てみる
    • npm start は何を読み込んで何を実行しているんだろうか?
  • npm test でunitテストが出来る
    • 何を読み込んでいるのか調べておく
    • 「テスト」というものについては貸していただいた本で勉強しておく
  • npm run update-webdriver
  • npm protractor
    • なんかいろいろテストしてくれるやつらしいけど、意味がよくわからなかったので、後から調べる

STEP0 : bootstrapping

  • git checkout -f step-0
    ブランチを切り替えることでチュートリアルを成立させるの頭いい使い方だなと思った
  • もっかいnpm install
    ここではチュートリアルようにvalidetorとかいろいろインストールしてくれてるみたい
  • コードを見てみる
<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <script src="bower_components/angular/angular.js"></script>
  </head>
  <body>

    <p>Nothing here {{'yet' + '!'}}</p>

  </body>
</html>
  • ng-app 属性 : これがangularJSのルートのHTML要素だよというflag
  • <script src="bower_components/angular/angular.js"></script> : HTMLを全て読み込むまで待ってから実行するcallbackが起動する感じになってる
  • <p>Nothing here {{'yet' + '!'}}</p>: {{}}で書くとモデルを参照できたりJSっぽことが出来るよ
  • bootstrappingでやっている重要な3つのこと
    • injectorによるmoduleの依存関係の解決
    • root scopeができて、applicationのModelのContextになる。
      • 後半何を言っているのかよくわからないので、そのうち分かるようになるのを待つか、調べる。
    • ngappのあるrootのHTML要素から順にDOMを「コンパイル(単純なDOMのれんラヂング+JSっぽいこと)」していく。

今日は一旦ここまで。明日はStatic Templeteをする予定。

そういえば、会社の優しいフロントエンドエンジニアの方がReactやNode.js、JSでのテストの手法などの本をおすすめ&貸して頂きました。ありがたい…!!頑張って勉強します〜〜。

Reactを勉強した(?) 2日目

さて,プロフェッショナルで藤田さんが特集されていたり,WWDCがあったりであまり時間が取れなかったのですが,一応やりました.
昨日は全くわからなかった。

先輩に相談すると, - Reactの派生は、まず流れとしてMVCフレームワークの思想がある(reactはそれを更に詳細に分割したもの) - まずはMVCフレームワークを勉強すると良いのではないか というアドバイスを頂いたので,おすすめしてもらったangularJSとbackborn.jsのうち,angularJSを勉強することにした.

今回はドットインストールにangularJSがあったので,チュートリアル的にやってみることにした.
ところが03のコントローラーを作るところでどうやっても ng-controller が undefined と言われてしまう。

公式ドキュメントを見てみると、どうもglobalにcontrollerを宣言するのはダメらしい。これは1.3.0からの仕様のようだ。
ドットインストールで行われていたバージョンは1.0.1であるから、おそらくこれだと判断した。

Twitterに愚痴ってたところ、フロントエンドに詳しい友人からも、あるあるだから基本は公式ドキュメントを漁ったほうがいいよ、というアドバイスを頂いた。
というわけで今日の進捗はあまりなかった。これからはAngularJSの公式のtutorialsで進めていくことにする。

だんだんReactをやっているのか分からなくなったが、最終目標はReactなのは変わらないから、AngularJSでMVCフレームワークが理解できるまでは(一旦チュートリアルを達成するまでは)タイトルの最後に(?)を付けておくことにする。
周りの人が支えてくださり、とても幸せだ。さて、今日も頑張ろう。

Reactを勉強した1日目

結論:何がなんだかさっぱり分からない

今日やったこと

learnyoureact

NodeSchoolに行った際、そこではlearnyounodeをやった。これもこれでわからない所がたくさんあった(特に、callback関数周り)が、一日で10問目まで進むことが出来た。
しかし、今回のlearnyoureactは、僕の頭がついていけずに1問目、2問目、3問目、とよくわからないまま、ただ言われたとおりに入力してなんとか出来たが、5問目でさっぱり分からなくなった。
Twitterでも反応を調べてみたが、みんなわかってる感じで、わからないのは僕の知識不足や頭の悪さのせいだろう、作者の方には本当に申し訳無さ…。
後から解消するにも、ここにわからなかったことをメモしておく。

1問目 HELLO_REACT

  • npm installでたくさんインストールするが、何が何をインストールしてその結果何がしたいのかさっぱり分からなくなった。次をインストールしたようだ。
    • react
    • react-dom
    • express
    • body-perser
    • express-react-views@0.9.0
    • babel@5.8.23
  • program.jsに以下を書いたプログラムが、何をしているのかわからなかった
    • expressってなんだ
    • babelってなんだ
    • jsxってなんだ
  • viewディレクトリにindex.jsxを作ったが
    • export default class ToolBox extend React.Component ってなんだ
    • render() ってなんだ
  • Reactのドキュメントの案内があるが、このどこを参照すればいいのだ
  • JSXシンタックスのリファレンスの案内があるが、これもどこを参照すればいいのか
  • とりあえず入力して下さいと言われたとおりにやってクリア

2問目 COMPONENT

  • Componentを組み合わせて作るとあるが、そもそもComponentが分からない
  • HTMLのタグとJSXを組み合わせることも出来るらしいが、JSXがわからないので、何が組み合わさってどうなるのかわからなかった
  • Reactのコンポーネントは大文字の変数で始め、HTMLのタグを記述する際には小文字の変数ではじめるらしいが、なにがなにやら…
  • ローカルのコンポーネントのクラスとはなんだ
  • JSXってHTMLも入れるんじゃなかったっけな感じで、何と何を識別しているか大混乱…
  • 問題は上のサンプルを見よう見まねで書いてクリア
  • 結局コンポネントはclass ~~で始まっているものだと言う認識だが、それでいいのか?

3問目 PROPS

  • propsってそもそもなんだろうか…
  • {this.props.title}のthisは何を指しているんだ?
  • とりあえず{this.props.title}と{this.props.children}で目的のものがとれることだけ文章から読み取れたのでそれを書いてクリア
  • コンポーネントと子コンポーネントはわからないまま…

4問目 PROPTYPES

  • 型がチェックできるとバグが少なくなって良いと言う話は分かった
  • 型.isRequiredと書けばとりあえず型一致を確かめてくれるのは理解したが、キー名のとりかたがよくわからなかった
  • 再利用可能なコンポーネント??
  • とりあえず文字列で確かめたければReact.PropTypes.stringを書けばいいということは分かったので書き換えてクリア

5問目 STATE

  • とりあえず、変更可能なのがstateで変更不可能なものがpropsなのぐらいは分かった
  • 書き換えはしたが、初期値を設定する方法が全く分からない
    • ドキュメントを見ればわかるかと思ったが、コッチがclass〜〜と書いている中、ドキュメントは var = 〜〜と書いているし、何が何を対応しているのか、本当にこうして良いのかさっぱり分からなくなった
  • 突然コンストラクタが出来たが、中のsuperが何か全くわからない
  • handleChange関数も何を引数に取れば良いのかとか、this.setStateの使い方も、公式ドキュメントやQiitaを探したが、全く理解できなかった
  • 手も足も出なくなり終了

これからどうしていくか

  • とりあえず、出来そうだと思えるまでは learnyoureactはおいておく
  • Reactの公式ドキュメントを見て勉強してみる。
  • Reactはそもそも何を解決しようとしているのかもわからない、事前知識がないのか。(事前知識が何なのか、事前知識が必要なのかどうかさえ分からない)
    • 大規模開発をスムーズに進めるらしいが、その手段として上げられているものの意味がよく分からない
    • TypeScript(名前だけ知っている)のお話も知っていないといけないのかなぁ、良く分からない。

じゃあなんで勉強してんの?

最近頻繁に話を聞く、知って置かなければなぁという焦りがある。多分使う。

ニコナレのブログ貼り付けテスト

ニコナレで興味深いご指摘があったので,さしあたりお礼と返事をば・・・.

当然ですが,この記事は非公式で個人の見解と妄想です!!何とぞご了承を!! niconare.nicovideo.jp

このニコナレを興味深く拝見させていただきました.まず,本筋の話に対してお褒め頂いたりして非常に嬉しく思います.ありがとうございます!
ご指摘であれど,興味を持って頂けてここまで反応してくださるのは本当に嬉しいことです.
コメントでも一応言及しましたが,コメントだけでは言及しきれないと感じましたので,一応ブログで書くことにしました.

さて,ご指摘の件ですが,結論としては「僕にはまだ分からない」というところに行き着きました.その話を今からしたいと思います.

また、最初に書いた、明朝体を使う際になんとなくリュウミンを使うといった現象があります。これは、リュウミン自体の一文字一文字が正方形に収まるようにできており(金属活字がルーツであるからだと思います)、さらに「筆の運び」で分類すると、真ん中より少し右側ぐらいの位置になるため、印象としてもバランスよく広い範囲をカバーするためだと考えられます。

まず,このニコナレで予想されていましたとおり,僕の「リュウミンが正方形」という話は,主に仮想ボディの話でした.もう少し突っ込んでおくとリュウミンは正方形で組んでも「違和感がない」という感じです(僕の記事内では確かに全く読み取れません…すいません…だいたい根が深い問題をさらっと書こうとしてしまったことに原因が有ります).
補足として,字面の話で言いますと,基本的にはオールドフェイスの書体よりもモダンフェイスの方が字面が正方形に近いです.ですから,比較的オールドなリュウミンより,比較的モダンな平成明朝や,例えば小塚明朝なども正方形に近いものになるはずです.

話は戻りますが,

リュウミン自体の一文字一文字が正方形に収まるようにできており(金属活字がルーツであるからだと思います)

というところで「正方形だからよく使われるわけではないだろう」というご指摘(だと読み取りました.読み違えたらすいません)ですが,「正方形におさまる」 というのは,リュウミンが万能だと考えられる必要条件に過ぎない(つまり.仮想ボディにしろ,字面にしろ正方形であることは,あくまで万能になる「一因」であり,正方形の書体であれば万能である訳ではない)ということです.その意図だけは伝えられればと思います.

僕の書き方が悪く,うまく汲み取られていなかったようで,これからもっと伝わるように書けるよう精進します!!

さて,次にリュウミンがどうしてよく使われるか,ですが,このプレゼンでは「歴史的な背景」,歴史というのはデジタルフォントが導入し始めた頃に,中ゴとリュウミンが導入された,そのため慣習的に使われたことが原因である,ということですが,これはもしかしたら正しいかも知れませんが,僕にはまだ良くわかりません.
と,言いますのも,理由は三つほどありまして

  • ということは,現在中ゴもよく使われているはずであるが,リュウミンほど使われてはいない(これは,中ゴのデザイン上の問題も絡んでいるのかも)
  • 僕のデザインの経験上,リュウミンは,確かに他の明朝体より何故か「きっちりハマってくれる」ように感じる.
    • 多くのデザイナーでそうかは分からない.
  • 歴史的な背景が絡んでいるのかはデザイナー歴が短いので僕個人にはうまく入ってこない

ですから,もしかしたら正しいかも知れないが,僕にはわからない,という結論に至りました.

よって,これから検証するとすれば

  • 歴史的な背景だとすれば,これから「デザイナー歴を積めば,」何かしらの理由が分かるのではないか
  • 歴史的な背景だとすれば,「これからの」書体の流行の変遷で,何かしらの理由が分かるのではないか
  • 文字の形状由来の問題だとすれば,「もう少し多くの事例を集めて見て」「リュウミンを使うのとそうでないものについての理由を探り」説明できれば良いのではないか
  • 文字の形状由来の問題だとすれば,リュウミンとそれ以外の明朝体についてもう少し定点観測する必要があるかも??

といった検証手段が考えられます.

しかし,どれも「時間がかかる」ものですので,この議題は一旦頭のスミに置いておきまして,これからのデザイナーとしての人生の中で発見していければと思います.すみませんが,そんなところで,一旦お許しください!!