ten986.net
天衣 甜茶 / ten986 の個人ブログです。フロントエンド中心の技術記事と思考整理。

2022年の振り返り その3: 来年やるべきこと

2022-12-20
この記事は、「ten986 Advent Calendar 2022」の 20 日目の記事です。
https://qiita.com/advent-calendar/2022/ten986

来年の目標

前回までの振り返りでも書いたのですが、今年は「思考力」とか「言語化能力」と言ったものが伸びた一方、技術力そのものは据え置きだった印象があります。
なので、来年の目標は自ずとその辺りにフォーカスされます。

アウトプット駆動をしたい

このアドベントカレンダーをやってて思ったんですが、自分の思考をアウトプットすることで思考整理にも繋がるし、アウトプットするための材料がなくてインプットせざるを得なくなり、インプットの質がよくなる傾向があるなと感じました。
Qiita や Zenn のようなプラットフォームでは、質の良い記事しか出さない主義を掲げている(クソ記事反対派)のであまり記事を出せていないところはあったのですが、この個人ブログを手にしたので、そのような心配もなくなりそうです。もちろん質の悪い記事を書くと言ってるわけじゃないんですけど。

読書量を増やしたい

本でも記事でもいいんですが、「良質なインプット」が足りてない気がします。
「中級者から上級者へのステップアップ」が足りていなくて、そしてその段階に必要なインプット程度なら(初心者から中級者ほどではないにしろ)結構あります。
そのようなものは本になってることの方が多い気がします。
なので、体系的な知識を得るためにも読書量は意識したいですね。

競プロ復帰したい

今年はタスクの優先度的にできてなかったのですが、競プロは復帰したいですね。
人生で一度はやっておきたいとぼんやり思ってるリストに「レッドコーダーになる」というのがあるんですよね。実は。

有名になる

ざっっっっっくりとした目標です。来年中に達成できなさそうな大目標でもあります。
自分を知らない人に自分を説明するのはめんどくさいので、有名になることでその過程すっ飛ばしたいんですよね。
具体的にはいい技術記事の執筆だったり登壇だったりがアクションになりそうです。そのためのインプットも必要になる。

創作活動復帰したい

ざっくりなんですが、考えています。
元々はゲーム制作の人だったのですが、最近はご無沙汰してますね。
ゲーム制作でもいいんですが、絵とか音楽の方面も気になるので、1回ガッツリ触れることでその後習慣になるというのも面白そうだなーなんていう。

遊ぶ

このアドベントカレンダーをやってた時が特にそうなんですが、ゲームとかをすっ飛ばしてこのアドカレに集中していました。
しかし、ぼくが人生でやりたいのは「プライベートの時間を全力で使う」ことなんですよ。これは最重要項目。
で、プライベートの時間で何がやりたいこというと、ゲームだったり旅行だったり・・・というわけです。
全力で遊んでいく、これは掲げていきたいです。仕事だけが人生じゃねえんだぞオイ!!!!!!!!!!!!!!!

真面目にRustをやる

なんでまだやってないんですか?

真面目にvimキーバインドを覚える

なんでまだやってないんですか?

YouTuberになって自分の好きな技術に対して月1くらいで放送したい

妄想段階ですが、YouTuberやってみたいんですよね。

maimai/CHUNITHMの全国制覇をする

全国のゲーセンに行くと「全国制覇」の称号貰えるんですよ。頑張り始めてます。
来年いっぱいで制覇できると嬉しい。

女装サロンに行く

は?

今日の個人ブログ開発

Twitter埋め込み機能ができました。
以下のような記述を記事の markdown 中に書くと埋め込めます。
[!Embed](https://twitter.com/ten986/status/1597208833847603201)
仕組みとしては、まずは rehypePlugins として以下のようなプラグインを定義して、特殊なタグに変換してあげます。
function rehypeTweet(): Plugin {
  return (tree: any, _file: any) => {
    visit(tree, 'element', (node) => {
      if (node.tagName === 'a' && node.children[0]?.type === 'text' && node.children[0]?.value === '!Embed') {
        const twitterId = node.properties.href.match(/\/status\/(\d+)/)[1];
        if (twitterId) {
          node.tagName = 'twitter-embed';
          node.properties.twitter_id = twitterId;
        }
      }
    });
  };
}
その後、Server Component 内で特殊なタグを読み取った場合、指定されたコンポーネントに変換する処理をかましています。
この際、rehypeReact が対応していないこともあり as any をつける必要があります。保証されてない動作だと思います。はい。
const processor = unified()
  .use(rehypeParse, { fragment: true })
  .use(rehypeReact, {
    createElement: React.createElement,
    components: {
      p: PDiv,
      img: PostImage,
      'twitter-embed': (props: any) => <TwitterEmbed {...props} />,
    } as any,
  });
この埋め込みの機能を応用すれば、特殊な表記をすることで任意の自作コンポーネントを配置することもできるようになります。またそれも面白そうですね。
rehype で特殊な動作をするためには、このあたりの記事が参考になりました。
https://kame.blog/entry/markdown-react-component/
https://dev.classmethod.jp/articles/2020-04-15-conv-html-use-rehype/
Twitterの埋め込みには、react-twitter-embed を使っています。埋め込み自分でやりたくないからね。便利だね。
https://www.npmjs.com/package/react-twitter-embed
react-twitter-embed のドキュメントは少し不親切なので、Twitterの公式ドキュメントを見ることでエスパーするとなんとなく埋め込めます。
https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference