えんじにあ ときどき くらいまー

個人的な技術メモとかボルダリングのこととかなんか色々書けたらいいなぁ

2018年あけました

ご挨拶

あけましておめでとうございます。
昨年はあけましたのご挨拶だけで終わってしまったので、今年こそは少しずつ更新する所存です。

30歳になったのでほんと頑張ります。
宜しくお願い致します。

目次

昨年の振り返り

昨年の目標と進捗です。

  • 仕事以外でプロダクトを2つ以上リリースする。
    • 0%:完全に未着手。
  • オレオレライブラリを1つ以上公開する。
    • 0%:何も言えないぐらい未着手。
  • 月4回以上ブログ更新する。
    • 2%:い、いちおう1本書いてる。。
  • 外岩で計3段以上落とす。
    • 0%:1回行ってるけど2級しか落とせとらんです。
  • 体重6kg落とす。
    • -50%:逆に3kg増えた。
  • TOEIC受験する。
    • 0%:申し込んでないし日程調べてすらない。

もうほんと何も言うことございません。。

目標

気を取り直して今年の目標です。

  • 年収60万以上UP!!
    • 給料上がらなかったら転職 or フリーランス!!
    • 4月にはどうするか決める。
    • 辞める場合は6月目標。
  • 月1回以上ブログ更新する。
    • がんばる。とりあえず1月は達成ということで。。
  • 外岩グレード更新(今2級)。
    • とりあえず1回行く予定を立てているのでそこで達成したいところ。
  • 体重3kg落とす。
    • 一昨年ダイエット成功した反動か昨年は3kg太ってしまったので今年は増えた分元に戻そ。
    • 4月ぐらいには達成できると思うので、あわよくばもう少し痩せる。。!
  • 月の半分以上ちゃんと仕事する。
    • 昨年はまともに仕事した記憶がほとんどない。。
    • 1ヶ月ぐらいガッツリ仕事してた期間はあるけどほんとそれだけ。

まとめ

今年は無理ない感じで100%達成することを目標として目標立ててみました。
これで達成できなかったらほんとダメ人間です。ありがとうざいました。

とりあえず今年の最難課題は月の半分以上ちゃんと仕事することだな。。。

今度こそ年末にちゃんと振り返ろう。
振り返れるような状態になろう。。

2017年あけました

ご挨拶

あけましておめでとうございます。
今年も技術とか趣味とか少しずつ更新していきますので、宜しくお願い致します。

目次

目標

今年の目標です。

  • 仕事以外でプロダクトを2つ以上リリースする。
  • オレオレライブラリを1つ以上公開する。
  • 月4回以上ブログ更新する。
  • 外岩で計3段以上落とす。
  • 体重6kg落とす。
  • TOEIC受験する。

まとめ

最難課題は月4回以上ブログ更新することですね(ネタはあるけど、記事書くの時間かかるから継続して書けない)。

次点で外岩かな。そもそも外岩行けるかどうかが怪しいという。。。(2016年は1回も行けませんでした)
あ、でも今年すでに1回行きました。
初手取れれば落とせそうな初段あったので(他のムーブは大丈夫)、もう1回行けばたぶん落とせる。。!

年末にちゃんと振り返ろう。

Riot.js v2 => v3 の変更点まとめ

はじめに

Riot.jsを使用したSPAサイトの作り方シリーズを書いてる途中でRiot.jsのメジャーバージョンが2から3にあがりました。

なので、今回は2から3の変更点をまとめたいと思います。
(と言っても英語で書かれてるガイドをなんとなくで日本語訳しただけですが)

ついでに他の言語でも使用される英単語の簡単な説明もちょいちょい挟んでおきます。

訳は結構適当で、実際のガイドとはタイトルとか違ったりしてますので、
なんとなくで読んでください。

目次

  • はじめに
  • 目次
  • Breaking changes
    • Deprecate
      • riot-tag
      • name, id
      • オブジェクトループ
    • Remove
      • riot.route
      • マウント前のupdate, updatedイベントのトリガー
      • 自動preventDefault
      • カスタム子タグによって生成されたイベントに関する親タグの更新がされない
      • riot.observableでスペースを置いたイベントのサポート
      • scoped属性
      • babel v5.8
        • bublé
      • テンプレートエラーの飲み込み
  • まとめ

Breaking changes

破壊的変更ですね。
新バージョンでは使用できなくなった機能のことです。

Deprecate

使用が推奨されていない機能のことです。
基本的に代用できるプログラムが用意されています。

riot-tag

riot-tag属性はDeprecateされました。代わりにdata-is属性を使用するようにしてください。

<!-- not supported -->
<div riot-tag="my-tag"></div>

<!-- good -->
<div data-is="my-tag"></div>

また、data-isはネストされたタグでも使用でき、動的に値を与えることも可能です。

<my-tag>
  <div data-is={ subComponent }></div>

  <script>
    this.subComponent = 'child-tag'
  </script>
</my-tag>
続きを読む

Riot.jsを使用した開発環境の構築に関してのメモ

はじめに

Riot.jsのv3.0.0の安定版がリリースされましたね。

メジャーバージョン上がっちゃったよ。。。
フロント界隈はメジャーバージョンアップが早くてちょっとビビる(本職はフロントエンドではないので)

Riot.jsを使用した開発環境の構築に関して、考えていることをちょっとメモしときます。
なので今回のエントリーは読まれることを意識せずつらつら書きます

目次

ビルドツール・開発言語

  • Gulpなどの スクランナーは使わない
    • npm runコマンドで実行する
    • メンテナンスとか考えたらGulpみたいな抽象レイヤー要らないよねってなった。
    • 細かい設定必要なったら別途JSファイル作ってそこで設定する(それをnpm runコマンドで呼び出す)。
  • JavaScriptECMAScript2015 で。
    • ブラウザの対応待ちとかしたくないので、 babel などのトランスパイラ使う。
  • CSSSCSS を使う。
    • CSSの構成は FLOCSS を導入。

検討中

  • HTMLは EJS を使う?
    • Riot.js使うなら要らないんじゃないか疑惑(Riot.js使う前はEJS使ってたけど)。
  • Webpackどうしよう。
    • 今考えているアウトプットと思想が違う気がする
続きを読む

Riot.jsを使ってSPAサイトを作ってみる 基礎編 Section2 ~ページ遷移してみる~

はじめに

こんにちは。今回はいいペースで書けてます。

前回に引き続き、Riot.jsを使用したSPAサイトの作り方を説明していきたいと思います。
(言うほど自分も分かってませんが)

今回は、前回作成したものに以下の処理を付けたいと思います。

  • 実行時のHOME画面ではメニューのみを表示する。
  • メニューをクリックしたら、タイトルが切り替わる。
  • メニューの『さいしょのぺーじ』をクリックしたら、メニューの下にログインフォームを表示する。
  • メニューの『さいしょのぺーじ』以外のメニューをクリックしたら、ログインフォームが非表示になる。

今回も前回と同じく順を追って説明していきたいと思います。

シリーズ

目次

  • はじめに
  • シリーズ
  • 目次
  • クリック処理を入れよう
    • イベントオブジェクト
  • カスタムタグを作成する ~その2~
    • タグのイベント
  • カスタムタグの複数マウント
  • ルーティング設定
  • ソース
  • まとめ

クリック処理を入れよう

前回作成したriot_spa.htmlファイルにクリック処理を追記します。
以下の処理を mainタグ 内に追加してください。

  • riot_spa.html
<main>
...<略>...

  this.click = (event) => {
    this.title = event.item.title;
    return true;
  };
</main>

処理を追加したら実行してみましょう。
メニューをクリックすると、画面のタイトルが切り替わるのが確認できるかと思います。

onclick, onsubmitなどの onで始まる属性 には、イベントが起きた際に呼ばれる関数を設定できます(イベントハンドラ)。
これらのイベントハンドラが呼ばれたとき、 this.update() が自動的に呼ばれ、変更がUIに反映されるようになっています。

イベントハンドラ内で return true の処理を入れていますが、これはイベントハンドラのデフォルトの挙動が キャンセル になっているためです。
(チェックボックスラジオボタンを除く)

また、イベントハンドラは第一引数にイベントオブジェクトを受け取ります。
event.item はループ中のみ有効ですが、現在の要素を取得することができるイベントオブジェクトになります。

続きを読む