技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

AngularJS をセットアップする

  • AngularJS とは
  • セットアップ
  • 恒例のコードリーディング
  • コンポーネントの追加
  • リリース
  • ドキュメント
  • 感想

AngularJS とは

GoogleOSS コミュニティで作成されるフロントエンドフレームワークです。

angular.jp

セットアップ

Angular のコマンドラインツールをまずインストールします。

npm install -g @angular/cli

プロジェクトを作成していきます。
ng new my-app で作成です。

$ ng new my-app
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. No
Global setting: disabled
Local setting: No local workspace configuration file.
Effective status: disabled
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
...

質問には下記で設定しています

  1. この利用データをAngularチームと共有しても良いですか?No
  2. Angular のルーティング機能要ります?No
  3. スタイルシートのフォーマットは? CSS

プロジェクトが出来上がったら npm run start

$ npm run start

> my-app@0.0.0 start
> ng serve

? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show possible options and autocomplete arguments. (Enabling
 autocompletion will modify configuration files in your home directory.) Yes
Appended `source <(ng completion script)` to `C:\Users\azale\.bashrc`. Restart your terminal or run the following to autocomplete `ng` commands:

    source <(ng completion script)
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   1.95 MB | 
polyfills.js          | polyfills     | 328.93 kB | 
styles.css, styles.js | styles        | 226.36 kB | 
main.js               | main          |  45.98 kB | 
runtime.js            | runtime       |   6.51 kB | 

                      | Initial Total |   2.54 MB

Build at: 2023-05-25T13:02:39.178Z - Hash: 8a48f1dd49bbdda6 - Time: 7126ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.

続きを読む

VueJS を使ってみる

  • vue js とは
  • セットアップ方法
    • 1. JavaScript 取り込みだけでセットアップ
    • 2. ビルド環境構築
  • 構成の確認
  • ドキュメント
  • リリース
  • 感想

昨今の Web framework 第二弾、Vue js 3 (この記事書いてる時点で最新のやつ)

vue js とは

Web framework の一つ。
React に比べると大分軽量で、JSX の様な癖が無いのは利点。

セットアップ方法

こちらは、LWC や REACT とは異なり、大まかに二種類の手順があります。

1. JavaScript 取り込みだけでセットアップ

HTML でライブラリを取り込むだけでまず利用できる。
index.html を作成してこんな感じにしたら

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="app">{{ message }}</div>

    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

Python3 でサーバを立ててみます python -m http.server 8000

2. ビルド環境構築

コンパイルして実行するケースもあります。
npm init vue@latest でひな型を作ります。

コマンドに従って、3 コマンド打ちます。

  cd vue-project
  npm install
  npm run dev

続きを読む

国が発する家計、金融教育「マネビタ」

マネビタ

www.shiruporuto.jp

マネビタは金融庁の下部組織、金融広報中央委員会が運営している、無料の eラーニング口座です。

  1. 金融と経済を学ぶ
  2. ライフプランを描く
  3. お金を借りる
  4. お金を増やす
  5. リスクに備える
  6. トラブルを避ける

名前の由来はマネービタミン

背景

金融広報中央委員会による、金融リテラシー調査に関して、2022 年の結果を統計したところ

www.shiruporuto.jp

金融知識、家計等、お金にかかわる知識を問う問題なのですが、香港の正答率が平均で 79% で世界トップ。
日本は 62% で、大きく溝を開けられています。

まぁ順位はどうでもいい。「金融・経済の基礎、保険、ローン・クレジット、資産形成に関する正答率は5割前後」という問題…
お試し 5 問が公開されているが、恐ろしい結果です。

  • 49% が家計の運用方法で何が正しいか判断できず
  • 53.8 % が人生の三大出費を正しく回答できず
  • 56.6 % が金利をどう活用するか分からず
  • 59.2 % が福利を計算できず
  • 30 % が金融トラブルが起きたときに助けを求められない

そりゃ金融庁も焦りますよね…。
貯蓄できない人が非常に多いことが分かっていますが、正しい知識を持っていないのにそりゃ貯蓄できませんて…

日本人はほぼ金融教育を受けてない

この調査において、金融教育を受けたことがあるかという項目がある。
その結果、日本人で金融教育を受けていると答えたのはわずか 7.1% です。

そりゃ家庭で教えなければ教えてくれる人なんていませんて…。
貯蓄が趣味とかいう変人を除けば…

やってみる

尚自分は金融教育を受けてないです。
が、金の勉強はそこそこしているつもりです。

その時分が楽しめるかどうか…勝負じゃ!!!

久々に REACT をセットアップしてみる

  • REACT のデフォルトプロジェクトを作成
  • REACT の特性
  • ルーティング
  • 挙動
  • リリース
  • REACT の濃い作り

REACT のデフォルトプロジェクトを作成

既存プロジェクトに入れるのではなく、基本セットとしてセットアップします。
npx create-next-app を打っとけばなんとかなるっぽい。

react.dev

設定は Typescripr 使わない、ESLint 使わない、Tailwind CSS 要らん、src ディレクトリよこせ、ルーターは欲しい、デフォルトの alias なんていちいち変更しません。

$ npx create-next-app
√ What is your project named? ... react-sample
√ Would you like to use TypeScript with this project? ... No / Yes
√ Would you like to use ESLint with this project? ... No / Yes
√ Would you like to use Tailwind CSS with this project? ... No / Yes
√ Would you like to use `src/` directory with this project? ... No / Yes
√ Use App Router (recommended)? ... No / Yes
√ Would you like to customize the default import alias? ... No / Yes
Creating a new Next.js app in D:\OneDrive\workspace\sandbox\REACT_Sample\react-sample.

Using npm.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next


added 20 packages, and audited 21 packages in 37s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created react-sample at D:\OneDrive\workspace\sandbox\REACT_Sample\react-sample

普通に REACT もくっついてくる。
これでセットアップはできたか?

とりあえず動かしてみるか

npm run dev っとすると、http://localhost:3000 でサーバが起動する。

続きを読む

技術書展14 で出てきた新規本から、トレンドを探ってみた

本当なら、1ブースで複数本を出しているので、それも考慮に入れておくのが集計的には正しいのかもしれないが、面倒だったので…

  • 対象は 技術書展14 の新刊本のみ。
  • 書籍のタイトルのみ解析
  • 最頻の単語を探る

だけにとどめる。

本当なら、書籍の紹介文を全部拾いたいけど、管理めんどくさかったのでタイトルのみ…

早速調べてみる

必要なライブラリをインポートして

# Regex
import re

# pandas セット
import pandas as pd
from pandas import DataFrame
import numpy as np

# pip install janome
from janome.tokenizer import Tokenizer

オンラインマーケットの新刊本 ページから正規表現でタイトルを抽出して、突っ込む

allBookTitles = '''
ARを用いた箱の中身確認システムの検討 -クライアント準備編-
ARを用いた...アント準備編-
コピペでかんたんPower Apps七草式コードレシピ集 上巻
【初心者向け】公共データを用いたSingle Cell RNA-seq解析
クリエイティブコーディングとイラスト制作合体のすすめ
Aiming Tech Book Vol.3
Ultimate Hacking Keyboard 60入門
CSS GRADIENT PATTERNZ
...
'''

タイトルを1行づつ分割して、ついでに集計用の変数を用意

splitted_titles = allBookTitles.split('\n')

# to lists
tokenized_list = []

# Tokenized
cur_idx = 0
tokenizer = Tokenizer()

何行目でどんな単語が出たのかを集計

# 数字だけとか、#11 といったナンバリングは無視
remove_names = ['^[0-9\/\(\)\!]+$', '[#\*]']
def is_valid(value: str):
    if len(value) <= 1:
        return False
    for r in remove_names:
        if re.match(r, value):
            return False
    return True

for title in splitted_titles:
    tokens = tokenizer.tokenize(title)
    already = [] # 既出名刺
    for token in tokens:
        pos = token.part_of_speech.split(',')[0]  # 品詞名
        if ('名詞' in pos) and (token.surface not in already) and is_valid(token.surface):
            already.append(token.surface)
            tokenized_list.append([cur_idx, token.surface])
    cur_idx += 1

ここまでで表示してみたら

cr_df = DataFrame(data=tokenized_list, columns=['index', 'surface'])
cr_df

単語でグルーピングして、5回以上出現でフィルタリング

group_sizes = cr_df.groupby('surface').size()
gs_df = DataFrame({ 'count': group_sizes }).reset_index()
gs_df[gs_df['count'] > 5].sort_values('count', ascending = False)
700  入門  39
313 Vol 25
814 技術  18
392 ため  15
1023    開発  13
217 Python  13
364 vol 13
4   AI  12
39  Book    12
915 理解  11
467 ガイド   10
271 Tech    9
714 別刷  9
809 情報処理    9
912 特集  9
593 プログラミング   8
497 コード   8
552 データ   8
977 解析  8
454 エンジニア 8
430 アプリ   8
981 言語  8
822 挑戦  7
776 学習  7
779 完全  7
712 初心者   7
1034    電子  7
649 ロー  7
507 システム    7
928 研究  6
51  ChatGPT 6
986 設計  6
345 js  6
979 解説  6
957 自動  6
745 向け  6
785 実装  6
648 ロボット    6
837 攻略  6
835 改訂  6
662 不思議   6
664 世界  6
786 実践  6
540 テスト   6
  • Python と AI がやはり多い。
  • 本の種類は入門書、次点で特集、ガイドなどが多いようだ。
  • 技術要素では、 ChatGPT 関連本、JavaScript 関連本、ロボット本、テストなどの系統が多いらしい。実にトレンドらしいですね。

技術書展 14 行ってみた

技術書展とは?

技術書専門の同人誌即売会です。
技術の名前がつけば、ジャンルは問わないので、IT以外にも、航空機パイロットの教科書、放射線関連、刀剣の歴史、人工肉の家庭培養など多岐に渡ります。
ジャンルが広いので、紹介本、入門書の類が比較的多く、新しい刺激を受けてとっかかりにするなんてことができます。

techbookfest.org

戦利品について

本で入手したのは下記の通り…大量で、しばらくの間はこの内容の投稿が増えるかもしれませんw

技術書展14 戦利品

詳細

気になったけど買ってない本

template を利用する

  • template の使い方
  • template を親の HTML から独立させたい!
    • JavaScript に突っ込んじゃえ
    • template を別ファイルに切り出しちゃえ

template の使い方

基本的な使い方は MDN に載っているので、コレをまず参考にする。

developer.mozilla.org

これをもとに、index.html をこんな感じ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span { color: red; }
    </style>
    <script src="./EchoTag.js"></script>
</head>
<body>
    <template id="simpleTemplate">
        <div style="border:1px solid red;border-radius: .5rem;padding: 1rem;display: inline-block;">
            <slot name="paragraph">Default paragraph.</slot>
        </div>
    </template>
    <echo-tag>
        <p slot="paragraph">Welcome to template!</p>
    </echo-tag>
</body>
</html>

EchoTag.js をこんな感じに記載する

class EchoTag extends HTMLElement {

    // コンストラクタ
    constructor() {
        super();
        this._innerText = null;
        this.attachShadow({mode: 'open'});
    }

    // このタグが親のタグに配置されると呼び出されるコールバック
    connectedCallback() {
        this._updateRendering();
    }
  
    // レンダリングしてみる。
    _updateRendering() {
        this.shadowRoot.innerHTML = null;
        const template = document.querySelector('#simpleTemplate');
        this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
}

// カスタム要素として、ブラウザに登録する
customElements.define("echo-tag", EchoTag);

結果はこんな感じ。
template タグ自体は実際にはレンダリングされていないくて、JavaScript 側で テンプレートの取得、中身のクローンを作って表示します。
それと同時に、slot が評価されて、内容の埋込みが行われています。

続きを読む