基本的にはNext.jsを学習してきましたが、13あたりのアップデートからややついて行けない感が出て新規に採用するべきか悩んでいました。 とりあえずことある毎に公式のチュートリアルは全て見てはいるんですが、きっちり理解できている感じがしなくて「なん…

React周辺は周りの誰にも聞けないし本当に手探りで色々やってます。 いいかげんフロントでもテストを導入しないと意味不明になってきたので、まずはReact自体のテストを学習します。 基本的にはJest公式などを参考にしながら進めています。 環境構築 プロジ…

去年の10月に同じような記事を書いた気がするんですが、もううまく動かなくなってました。 元々フロントは専門外なのでちょくちょくしか触らないのですが、なかなかに辛い・・・ と思ってたのも1日。やはり世界には優秀な方々がたくさんいるようで、既に解決…

YouTube Live Streaming API（YouTube Data API v3）を利用してスーパーチャット情報をGoogle Spredsheetに出力してみました。 が、結論から言えば実用性が無かったので供養エントリです。なんでダメだったか知りたい人など対象です。 （あとOAuthの勉強の題…

※2021-02-10 追記、下記の方法や他の方法でStorybook上でCSS Moduleがうまくあたらないので、今後はstyled-componentsの採用を検討しています。 そのうちまたこの方法でうまくいくようになるかも知れないので残しておきますが、現段階ではうまくいきませんで…

前回からの続きです。 Amplifyを導入して嬉しいのは主に AppSyncによるGlaphQL APIの利用 Cognitoによる認証 だと思います。 今回はAmplify DocsにあるようにGraphQL APIを利用することを持って初期構築としてみます。 まず最初に 必要最低限の環境構築 Ampl…

自分は二次元おたくでありますが故、VTuberさんのライブ配信などを見ながら作業することがぼちぼちあります。 基本アーカイブ勢ではあるのですが、晩酌配信のような配信はリアルタイムで楽しみたいなぁというモチベーションがあります。 可能であればその予…

基本的に下記の公式リファレンスを参照すれば大丈夫なんですが、よくわからんかった！という方がいらっしゃったら参考にして下さい。 developers.google.com Googleアカウントの作成 Google開発者コンソールの認証ページを開く プロジェクトの作成 APIキーの…

お恥ずかしいことにLPC4337を使ったボードをよく開発しているにもかかわらず、マルチコア開発はしたことがありませんでした。 ただ最近になってマルチコアの需要がでてきた（とはいえ要求スペック的にはシングル処理でも間に合ってはいるんですが・・・）の…

前回の続きです。 基本的な使い方 フォームの要素を書き出す フィールドを登録する 非同期処理 バリデーションを適応する UIライブラリの利用 対応するUIライブラリを利用する Controllerを利用してカスタム登録処理をする TypeScriptの対応 基本的な使い方 …

去年はNuxt.jsやNext.jsなど色々触ってたんですが、結局プレーンなReactが扱いやすいんじゃないかと思い色々試行錯誤しています。（Nextは結構良い感じだったんですが、Amplifyとの相性が悪くて不採用となりました） 基本的にはReact + Reduxの組み合わせが…

結論から言えばhttps://visualstudio.microsoft.com/ja/downloads/からビルドツールを取得してインストールすればOKです。 ぐぐれば同様の記事など見かけますが、Visual Studio 2017など若干バージョンが違ってたりするので、その辺バージョン上でも問題無い…

どうも、靖宗です。 一生環境構築してる気がします。フロントもう嫌や・・・ ということでTypeScriptの対応がなにやら変わった？ようなので公式に沿ってセットアップしてみます。 Nuxtプロジェクトのセットアップ ここに関してはいつも通りです。 よければ以…

こんにちは、靖宗です。 特にチームでのJavaScript案件はやってないんですが、チームじゃなくてもESLintを導入するべきなんじゃないかと感じ、導入してみることにしました。 とはいえよくわかんないので記事にしながら学習します。 とりあえず今回はTypeScri…

どうも、靖宗です。 最近YouTubeのAPIを触ることがあってメモ代わりに記事にします。 OAuthあたりはよく忘れるので・・・ オープンな情報ならAPI Keyを作成するだけで簡単なのですが、ユーザーに紐付いた操作などをする場合はOAuthの認証が必要です。 今回は…

どうも、靖宗です。 Docker for Windowsが出現してからWindowsでDockerを利用するのが簡単になりました。 とはいえ自分の利用しているWindowsがHomeでDocker for Windowsが利用できない人もいるんじゃないでしょうか？ぼくもその一人です。 （アップグレード…

どうも、靖宗です。 とりあえず主な項目はコレで最後です。 残るはテストの話とデプロイの話が残っていますが、残ってる話の方が重要そうな気がしますね。 今回はたぶん短めです。 PhoenixというかElixirの例外処理のお話に近いかも。 Custom Errors Custom …

どうも、靖宗です。 引き続きMix Tasksの項目を見ていきます。 今回はEcto関連のコマンドから。 Ecto Specific Mix Tasks mix ecto.create ecto.drop mix ecto.gen.repo mix ecto.gen.migration mix ecto.migrate mix ecto.rollback Creating Our Own Mix Ta…

どうも、靖宗です。 今回はMix Tasksということでmix phx.hogehogeのコマンドあたりの説明でしょうか。 Mix Tasks Phoenix Specific Mix Tasks mix phx.new mix phx.gen.html mix phx.gen.json mix phx.gen.context mix phx.gen.schema mix phx.gen.channel …

どうも、靖宗です。 流石に今回で終わらす！ Cross-context data 依存関係の編集（CMS） ContextのAPI編集 preloadの追加 ページを生成するときや編集する時のAuthorの取り扱い Webレイヤーの実装 作成者関係のPlugを作成する Plugや他の変更に合わせてコン…

どうも、靖宗です。 前回かなり中途半端なところで終わりましたが、気にせず続けます。 Cross-context dependencies スキーム mix phx.gen.htmlでContext生成 スキームに合わせたテンプレートの調整 スキームに合わせたchangesetの変更 マイグレーションファ…

どうも、靖宗です。 Contextsの3回目です。なんか3回じゃ終わらないかも・・・(´ﾟ'ωﾟ`) 前回はContext内でリレーションを作りました。 今回はContextに機能を追加していくところになるかと。 Adding Account functions Contextに関数を追加 Webレイヤーを実…

どうも、靖宗です。 引き続きContextsです。この分量だと3回に別れるかな・・・ In-context Relationships Contextに追加する 参照先が削除されたときの振る舞い（ON DELETE） Contextで扱うスキーマの関係性 preloadの設定 入力のテンプレートに入力フォー…

どうも、靖宗です。 最近AWSばっかり触っててご無沙汰でしたが、若干落ち着きそうなのでPhoenixの学習を再開していきます。 今回はContextsということですが、これもまた結構長そうな項目です。 Contexts Thinking about design Adding an Accounts Context …

どうも、靖宗です。 Ectoの続きです。前回はほとんど仕様みたいな感じになってたので実際に扱う所までできたらなぁと思います。 Ecto Changesets and Validations 概要 実際に扱う バリデーションの編集 不要なデータ（castの動作チェック） 他のバリデーシ…

どうも、靖宗です。 今回はEcto、ということでデータベースラッパーのお話でしょうか。 Elixirでよく使われるライブラリなので個別に触りたいところでもありますが、とりあえず今回はPhoenixのドキュメントを読み進めます。 Ecto Hello, Ecto 開発用のPostgr…

どうも、靖宗です。 たまにはAWSの話なんかも。 AWSでpipでインストールされるライブラリを使用する よくある欲求で、なおかつウェブ上に結構ドキュメントはあると思いますが、自分のメモ用に。 基本的にAWS Lambdaでは標準ライブラリ以外は使えませんが、zi…

どうも、靖宗です。 なにやらLiveViewなる機能がちらほらツイッターで見かけまして、一応触っておこうと思いました。 たぶん未履修分野には被らないはず・・・ LiveView Programming Model プロジェクト作成 LiveViewの機能を有効にする Phoenix側の依存関係…

どうも、靖宗です。 今回はPresenceということであまりなじみのない概念・・・ どうやらChannnel絡みの機能だそうですので、前回のサンプルの続き、ということになりそうです。 Presence Presenceモジュール作成 mixを利用したChannel作成 Channel編集 クラ…

どうも、靖宗です。 前回の続きでChannelですが、今回はおそらくサンプルコードを動かすお話。 Tying it all together Joining Channels Incoming Events Intercepting Outgoing Events Socket Assigns Using Token Authentication Step 1 - Assign a Token …