プロフィールPROFILE

空雲さんのプロフィール

住所
船橋市
出身
市原市

自由文未設定

ブログタイトル
空雲リファレンス
ブログURL
https://ttis.croud.jp
ブログ紹介文
技術系のネタを取り扱っていきます
更新頻度(1年)

815回 / 365日(平均15.6回/週)

ブログ村参加:2018/08/19

読者になる

空雲さんの人気ランキング

  • IN
  • OUT
  • PV
今日 12/08 12/07 12/06 12/05 12/04 12/03 全参加数
総合ランキング(IN) 圏外 圏外 圏外 圏外 圏外 圏外 圏外 980,177サイト
INポイント 0 0 0 0 0 0 0 0/週
OUTポイント 0 0 0 0 0 0 0 0/週
PVポイント 0 0 0 0 0 0 0 0/週
IT技術ブログ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 7,923サイト
PHP 圏外 圏外 圏外 圏外 圏外 圏外 圏外 143サイト
プログラム・プログラマー 圏外 圏外 圏外 圏外 圏外 圏外 圏外 789サイト
Webサイト構築 圏外 圏外 圏外 圏外 圏外 圏外 圏外 674サイト
今日 12/08 12/07 12/06 12/05 12/04 12/03 全参加数
総合ランキング(OUT) 圏外 圏外 圏外 圏外 圏外 圏外 圏外 980,177サイト
INポイント 0 0 0 0 0 0 0 0/週
OUTポイント 0 0 0 0 0 0 0 0/週
PVポイント 0 0 0 0 0 0 0 0/週
IT技術ブログ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 7,923サイト
PHP 圏外 圏外 圏外 圏外 圏外 圏外 圏外 143サイト
プログラム・プログラマー 圏外 圏外 圏外 圏外 圏外 圏外 圏外 789サイト
Webサイト構築 圏外 圏外 圏外 圏外 圏外 圏外 圏外 674サイト
今日 12/08 12/07 12/06 12/05 12/04 12/03 全参加数
総合ランキング(PV) 圏外 圏外 圏外 圏外 圏外 圏外 圏外 980,177サイト
INポイント 0 0 0 0 0 0 0 0/週
OUTポイント 0 0 0 0 0 0 0 0/週
PVポイント 0 0 0 0 0 0 0 0/週
IT技術ブログ 圏外 圏外 圏外 圏外 圏外 圏外 圏外 7,923サイト
PHP 圏外 圏外 圏外 圏外 圏外 圏外 圏外 143サイト
プログラム・プログラマー 圏外 圏外 圏外 圏外 圏外 圏外 圏外 789サイト
Webサイト構築 圏外 圏外 圏外 圏外 圏外 圏外 圏外 674サイト

新機能の「ブログリーダー」を活用して、空雲さんの読者になりませんか?

ハンドル名
空雲さん
ブログタイトル
空雲リファレンス
更新頻度
815回 / 365日(平均15.6回/週)
読者になる
空雲リファレンス

空雲さんの新着記事

1件〜30件

  • Vue.js用仮想Windowコンポーネント

    Vue.js用仮想WindowコンポーネントWindows用のネイティブアプリケーションをイメージして作っています。利用する場合はVue.jsの環境を整えて、以下のコマンドでインストールしてくださいnpm -D i @jswf/vueリンク スクリーンショット 使用例 JSWindow

  • JavaScriptをts-loaderでトランスコンパイルしてみる

    ts-loaderはJavaScriptをトランスコンパイル出来るのか? 環境構築 テスト用プログラムの作成 ビルドとその結果 ts-loaderの利点 jsとtsのプログラムを混在させる まとめ

  • まとめ

     今回のプログラムを作ってみて、GraphQLのクエリーを初めて触ってみたのですが、慣れていないせいもあって、欲しいデータにたどり着くまでかなり時間がかかりました。 さらにGitHubのAPIはRestだと取得できるのにGraphQLでは存在しないデータ(Trraficデータ)があって不便でした。この辺りは今後追加されることを期待します。

  • 上部エリア

     上部の表示やログイン処理の部分です 表示はReactで書いていますが、このアプリで書いたコンポーネントはpropsや標準stateは一切使っていません コンポーネント間のやりとりは@jswf/redux-moduleを使って、ReduxのStore経由になっていますTopArea.tsx LoginWindow.tsx LogoutWindow.tsx

  • リポジトリ表示部分

    RepositorieList.tsx

  • GitHubへのアクセス

    GraphQLgetRepositories.ts GitHubModule.ts

  • 最初に

    使用している主なパッケージ 前提条件 アプリケーションキーの発行

  • 認証機能

     OAuth認証にはFirebaseを利用しているので、アプリケーション登録のための初期設定さえ完了していれば、プログラム的には単純に書くことが出来ます。config.ts FirebaseGitAuthModule.ts

  • GitHubにGraphQLでアクセスする(TypeScript/サーバレス)

    GitHub GraphQL API v4 にアクセスし、情報を取得するためのプログラム解説です作成するもの ソースコード

  • TypeScriptの環境構築

    TypeScriptの基本文法を確認するのが主な場合は、「TypeScriptの実験環境の構築」を参照してください

  • 準備

    AndroidStudioでテストプログラムの作成 Json用ライブラリの組み込み

  • Objectのプロパティチェックと自動型生成

     TypeScriptでオブジェクトにプロパティが存在するかどうかを確認する場合には、inキーワードが使用できます。しかしinでメンバを判別しても前提の型情報が存在しないと、判別したプロパティを使用することが出来ません。これを解決する方法を紹介します。エラーが出る例 inの用途 プロパティチェックを使いやすくする 複数同時にチェックできるようにする まとめ

  • Rustによる非同期プログラミング

     システム系のプログラム開発においてC++の代替として期待されているRustですが、Web系の開発などではイマイチその力を発揮できません。そんなRustが11月にリリースされるバージョン1.39でようやくawait/asyncに正式対応されます。 ということでawait/asyncを使った非同期プログラムをbeta版で試してみたいと思います。コード 出力結果 まとめ

  • FirebaseとReact+TypeScriptの連携

    今回は以下の機能を利用しますFirebase hosting 静的コンテンツの設置とfunctionsへのプロキシ functions databaseへの入出力 database  データ保存 Webからのアクセスはfunctionsも含め、必ずhostingを介するようにします。これで静的コンテンツとデータアクセス用の窓口のドメインが同一になるので、CORS対策で余計な処理を付け加える必要がなくなります。 Reactに関してはトランスコンパイル後のファイルを静的コンテンツとしてhostingに配置します基本設定 掲示板を作る デプロイ

  • RailsをAPIサーバにしてReact+TypeScriptと連携させる

     私は日頃はサーバ側をNode.js+TypeScriptで構築しているので、その感覚をRailsに持ってきています。ということでRailsで書くべき流儀は全て無視というか、そもそも知りません.環境設定 Railsの基本設定 SPAの掲示板を作る まとめ

  • TypeScriptの型を使った、実行時の値チェック

     TypeScriptでは静的な型付けが可能です。しかしいくら型を定義しようとも、簡単に内容を誤魔化すことができてしまいます。厳密に型チェックを行うのであれば、コンパイル時だけでなく、実行時にも型をチェックしなければなりません。もちろん手動で一つ一つ書いていけば良いのですが、それでは面倒です。 今回はできるだけ簡単にクラスのメソッドに実行時の型チェック機能を付けるという内容をやっていきます。事前準備 ソースコード チェックの限界 まとめ

  • Node.js用リモートファンクションシステム

    フロントエンド側で使用するパッケージ @jswf/adapterバックエンド側で使用するパッケージ @jswf/rfs以上の二つのパッケージを用いて、フロントエンドとバックエンドの通信を、ローカルの関数を呼び出すのに近い形で実現します。最短で説明は以下のような感じです。バックエンドで以下のように記述しexport class TestModule extends Module { async JS_add(a: number, b: number) { return a + b; } } フロントエンド側で以下のように呼び出すと const result = (await adapter.exec("TestModule.add", a, b)) as number;aとbの内容がバックエンド側に渡され、計算した結果がフロントエンド側に戻ってきます。環境構築手順 バックエンド側 フロントエンド側

  • React-Reduxの内側からFluxをぶっ壊す! ~ Reactラッパーの開発 ~

     Reactでプログラムを書き始めて一ヶ月、React自体の使い方の確認を兼ねて作っていた仮想Windowフレームワークの作成が終わりました。これでメインのシステム開発に移れると思っていたところ、今度は状態管理が必要となりました。ということでReactで一番シェアが多いと思われるReact-Reduxに手を出しました。 ざっとReduxの入門記事に目を通しました。「うん、意味が分からん。解説ソースが長すぎて全体の流れが掴めん」 理解したのは、とんでもなく冗長な記述が必要になるということです。 さらにもう一つ理解したこと、それは自分の頭がとんでもなく悪いのだということです。 ということで入門記事を理解するのは諦めて、プログラムを書き始めました。 内容の理解など省いて、必要だと思われるものだけをかき集めて、最低限の動作をするプログラムを強引に書いてしまえば良いのです。 最初にやったのは適当にReducerを作って、Dispatchからオブジェクトを送ってデータを書き換え、それをコンポーネントに反映させるところからです。そこで分かったのは、そもそもActionなんて畏まって作らなくったって、データを送ればStoreの書き換えは出来るということでした。正確に言えば、データを送ったというイベントさえ起こせば、Reducerで勝手な値を生成してStoreに書き込むことすら可能です。もちろんそれをやったらテストで地獄を見るのは自明の理なのでさすがに禁じ手です。 ここまでやって何故自分がReduxの入門記事を理解できなかったのか分かりました。動作に不必要な要素が多すぎて、頭が理解を拒んでいたのです。とにかくデータの流れを掴んだことによって、ようやく入門記事の内容が理解できるようになりました。一日がかりでしたが、めでたくReduxが使えるようになりました。「めんどくせぇ、めんどくせぇ、息をするのもめんどくせぇ」 面倒くさい病の発病です。Fluxの正式な手続きでReduxを使うことを、私の心が拒否し始めました。どうやらこの面倒くささによって、代替のライブラリを探し始める人が続出しているようです。しかしここで代替のライブラリを使ったとしたら、それはどういうことか?導き出される結論は一つです。 敗北! まだ大して戦ってもいないのに、敗北を認めるわけにはいきません。無能には無能なりのプライドがあります。ということで、自分が使いやすいように

  • パッケージ内容

    細かい解説はまた後で書きます/** *Storeデータ設定を行う * * @export * @template T * @param {(action: Action) => void} dispatch * @param {(string | string[])} name Storeのオブジェクト名(階層指定可能) * @param {AddOptionType<T>} params パラメータ */ export declare function setStoreState<T = map>(dispatch: (action: Action) => void, name: string | string[], params: AddOptionType<T>): void;/** *Reduxにモジュール機能を組み込む * * @export * @param {*} [state={}] * @param {Action} action * @returns */ export declare function ModuleReducer(state: {} | undefined, action: Action): map;/** *ストアデータ操作用基本モジュールクラス * * @export * @class ReduxModule * @template State */ export declare class ReduxModule<State = { [key: string]: unknown; }> { //デフォルト値設定用 static defaultState?: unknown; //外部参照モジュールの指定用 //(getModuleで呼び出せるようになる) static includes?: (typeof ReduxModule | { module: typeof ReduxModule; prefix: string; })[]; /** *includesに記述した外部参照モジュールを取得する * * @template T * @tem

  • React-Redux用簡単ラッパー

     React上で利用するReduxを、Fluxの知識をすっ飛ばして利用するためのラッパーコンポーネントです。 Reducer、Action、Dispach等の知識は一切不要で、Reduxの状態管理が行えます。インストール 利用手順 サンプルアプリ

  • TreeItem

    ツリー構造を生成します。TreeViewと組み合わせて使用します。Props Method 使い方

  • TreeView

    ツリー構造を生成するコンポーネントですProps Method 使い方

  • ListView

     WindowsライクなListViewのコンポーネントです。 アイテムデータは仮想DOMを使用することが可能です。Props Method 使い方

  • SplitView

     子ノードを2分割します。 そのためSplitViewの配下は仮想DOMのオブジェクトを二つ配置する必要があります。Props 使用例

  • JSWindow

     仮想ウインドウの基本コンポーネントです。 このコンポーネントを使うことによって、配下のノードが仮想ウインドウ化します。Props Method 使用例

  • @jswf/react

    React用仮想WindowコンポーネントWindows用のネイティブアプリケーションをイメージして作っています。利用する場合はReactの環境を整えて、以下のコマンドでインストールしてくださいnpm -D i @jswf/react リンク スクリーンショット 使用例

  • 配列

    通常配列 連想配列

  • 配列

    通常配列 連想配列

  • 変数

    変数と型 変数と文字列

  • 変数

    変数と型 変数と文字列

カテゴリー一覧
商用