---
# System prepended metadata

title: 姫路IT勉強会 2023.10
tags: [histudy]

---

---
title: 姫路IT勉強会 2023.10
langs: ja-jp
---
姫路IT系勉強会 2023.10
=======================

* 開催日: 2023/10/21 13:15
* 司会: wateさん
* 参加人数: 参加者: ???名 (うち学生：0名)
* HackMD: <https://hackmd.io/KElcVY-_QGy8YoPSFHeQqg>
* connpass: <https://connpass.com/event/298101>
* ハッシュタグ：[#histudy](https://twitter.com/search?q=%23histudy&src=typd)
* [姫路IT系勉強会 Discordへ参加する](https://discord.gg/rZCeScB)
    * **オンライン開催の場合はDiscordのボイスチャットを利用しています**
    * Discordは無料プランに乗れる人数(10人以内)なので使っています。
    * 有料版でも$15/月程度なら払えなくもないですね。
    * Discord以外にも色々ありますので、人数が増えたら検討しましょう。
* [姫路IT系勉強会 Slackへ参加する](https://join.slack.com/t/histudy/shared_invite/zt-ugowinom-ZG0ORhstkrqQGVyjksr_OA)
    * 勉強会当日以外での質疑応答やメンバー同士のコミュニケーションに利用しています
    * Slackでの話の流れから、突発的に臨時イベントが企画されされるケースがあります

最近のニュース
-----------------

* [姫路IT系勉強会](https://histudy.jp/) 
* [macOS Sonoma](https://www.apple.com/jp/macos/sonoma/) がリリースされた
* [OpenTofu](https://www.publickey1.jp/blog/23/terraformopentofulinux_foundationopentf.html)
    * [おとなのじじょう](https://zenn.dev/hodagi/articles/afa48e0afd1b90)
* [GNU が 40周年! おめでとう](https://www.gnu.org/gnu40/)
    * [Forty years of GNU and the free software movement — Free Software Foundation — Working together for free software](https://www.fsf.org/news/forty-years-of-gnu-and-the-free-software-movement)
    * ストールマンは[ガンを患って治療中](https://fossforce.com/2023/09/rmss-cancer-linuxs-shrinking-support-googs-privacy-sandbox-naming-opensuse-and-more/)だそう
* [WebAssembly toolchainとアレをWASMに変換するコンパイラだよ。怖くないよ](https://spritely.institute/news/scheme-wireworld-in-browser.html)
* [DSでもLinux動かしたい](https://www.dslinux.org/)
* [Debianはいかにして現在のDebianになったのか ―古参メンテナーが語る“Debian the way it is“ | gihyo.jp](https://gihyo.jp/article/2023/10/daily-linux-231018)
    * こういう話とか面白いと思う
        * Debian Voting Information https://www.debian.org/vote/index.en.html
* maria db の会社があぶないらしい。 

お題
---------------

ここの下にお題(相談したいこと、発表したいことなどなんでも)お書きください。  
※ 記載するお題は参加者一人につき1つだけ記載するようにお願いします。  
※`### <ネタ>+(名前)`の形式でお題を記載してください。

### お題をここに書く(名前を書く)

(概要や背景などをここに書く)

### JavaScript・TypeScript の勉強 (おおおか)

* 試しに占いソフトのベースとなる GUI を作ってみようと思って、8月参加したときにお聞きした [Figma](https://www.figma.com/ja/) や JS/TS を触ろうと思った。
  * Figma → HTML/CSS でアニメーションが設定できるかなと思っていた。
  * けれど、大体エクスポート機能は有料プラグインだったので、試してみるだけには重いと感じて断念。
      * Figma は設計ツールで、画面設計用。Figmaでコード生成はおすすめできない。
      * Figmaはデザイナーがつかって、その情報をフロントエンドエンジニアにわたして実装してもらうような使いかた。
          * Figmaは画面遷移や画面情報のコメントなどを書けるのでデザイナーには便利。
      * コード生成すると、タグだらけのものになるのでオススメしない。
      * Figmaで画面→AIにHTMLを生成させるみたいな話があった気がする。
* Figma のエクスポート機能を試しているうちに、何となく以下の法則を学ぶ。
  * HTML 要素は全部 div タグで階層構造を組み、 class だけ割り当てる。
      * 最近は HTML には情報を書かない
  * CSS で class ごとに描画用の設定を割り当てて、見た目を表現する。
      * tailwind を使うといいかも。今はやりのCSSのやつ。
          * [Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.](https://tailwindcss.com/)
          * Tailwindは、あくまで「流行り」というだけで良い悪いは別よ
  * Javascript は、 WEB 用のアニメーションの定義と不可分であるらしい。
  * 初心者には、jQueryとかつかった昔の作りの方がいいかも。
  * 初心者には、TypeScriptはお勧めしない。
      * コーディング時には型情報で苦労し、環境構築で苦労する。
      * JavaScriptで始めた方がいい
          * 別方面から。RailsのDHHはTypeScriptが嫌いらしい。[Remove TypeScript - laiso](https://laiso.hatenablog.com/entry/2023/09/07/153417)
  * フレームワークをつかって簡単にできる程度でいいのでは。[Bootstrap](https://getbootstrap.jp/)でもいい。
      * bootstrapでパーツを使ったほうが楽
          * <https://getbootstrap.com/docs/5.3/examples/>
              * ちなみにTailwindCSSなども同じ考えよ
  * 最近はCSSの表現力があがってきて、簡単なアニメーションが可能になるっている。ただし最近のものなので、昔の情報ではうまくできなかった。
* [jQuery](https://jquery.com/)はおわこん?
    * 簡単なホームページを作るだけなら jQueryはよく使われている
    * 複雑なプログラムはちょっと jQueryは使われない
        * 別の処理をかいたところに影響がでるなど副作用が多く、複数メンバーでの開発には向かないかもしれない
        * プログラムは素のJsで書いて画面はjQueryのような使いわけがいる。
* JavaScript を導入するために Node.js を導入。
  * アニメーションのために anime.js をインストール。
* 型付 JavaScript の方が楽と判断して、 TypeScript を導入。
  * `tsc --init` で自動でコンフィグファイルができるが、内容が複雑…。
* index.html から npm install で取ってきたモジュール (anime.js) へのパスを通すために、[webpack](https://webpack.js.org/) を導入。
  * TypeScript を使うには [ts-loader](https://johnnyreilly.com/ts-loader-goes-webpack-5) というローダーが必要ということで、 ts-loader もインストール。
  * `npx webpack` でコンパイルしようとするが失敗し、 package.json 経由で「mode option」なるものを設定しろと言われたので設定。 `npm run [dev/build]` でコンパイルを実行できるようになる。
* テスト環境用に JEST を導入してみる。
  * `npx jest --init` で自動でコンフィグファイルができるが、これも複雑。
  * [JEST](https://jestjs.io/ja/) からパスを通すためには、 [babel](https://babeljs.io/) を使わないとダメ？ webpack で一緒にできそうなのだが…。
  * テストいる? 
      * テストがいるレベルではないと思う。
      * テスト駆動開発って本でまなんだから、どうかな。
      * jQueryで書いたところはテストできないと考えた方がいい。
      * 関数のテストをJESTでする??
      * アプリケーションの開発をするならテストは必要だと思うけど、これは、JSに慣れた方がいい。
          * より高度なものを使う段階になれば、テスト駆動開発してもいいと思う。
* 全体的にコンフィグファイルや関連ツールが多く、とりあえずやったら動きそうなものはいっぱいあるものの、最適な開発フローが分からない。Reactとか使った良いのかも悩み中。
* webpackでやろうとしていることは [laravel-mix](https://laravel-mix.com/) でほぼカバーできるはず。
    * webpack は設定がカオス
    * プラグインが必要になったり、自動化のためにコードが含まれていたりする
    * [webpack の 例](https://github.com/Leantime/leantime/blob/master/webpack.mix.js)
* SASS の勉強できるサイトあります?
    * bootstrap をつかっていたら CSSをほぼつかうことはない。
    * CSSの一部を上書き、カスタマイズするだけ
    * boosttap よりもっと軽量なものだったら、[bulma](https://bulma.io/) 
    * bootstrap は有名なので記事も多くプラグインも豊富
        * ただし、現在はBootstrap 5で 多くの記事は v4だったりする。
        * [AdminLTE](https://adminlte.io/)を使う手もある。**Bootstrap 4** のため注意
            * Bootstrap 4 は jQueryが含まれていた。
        * 両方の説明をいききすればいいです。
* 初心者・初学者は覚えることが多くて大変
    * 過去のPHPがとおってきた道になりつつある。 

### フロントエンド周りのビルドツール再考(ワテ)

いろいろとフロントエンド周りのビルド関連ツールを見てると、なんかフロントエンドエンジニアの方により過ぎてて、専門外の僕にはものすごく使いにくいんですが・・・
そう思っているところに以下のツールが出てきました。

* https://nuejs.org/
    * 上記Nue.jsのWhyやBackstoryに書いてある内容が、普段思ってるモヤッ感にかなり一致してる
    * なんでもかんでも JS で、ではない解決策
        * Reactなどは JS に寄せすぎ。
    * 開発が JSの人だけだったらいいけど、そうではないでしょ。
    * 作者は [Riot JS](https://riot.js.org/ja/) の人
    * 現在は開発中らしい
* [React](https://ja.legacy.reactjs.org/) は 全部 Reactの中だけにいるなら便利
* [Vite](https://ja.vitejs.dev/) は Viteで大変。フロントエンドによせすぎ
* Webpackが大変
    * ええ、makeでいいやん
        * make は殿堂入りだよね。
        * [CMake](https://cmake.org/), [OMake](https://omake-japanese.osdn.jp/quickstart.html), [kati](https://github.com/google/kati), [ninja](https://ninja-build.org/) ...
* JavaScriptはブラウザ側とnode側で仕組みとかパスとかが異なるので、両方をビルドするのは困難
    * それ make で
    * それ configure で
* 前のものが現役なままに新しいのがでてくる。
    * そのときそのときの最新がオワコンになってくる罠
* https://github.com/antfu/ni でいいんじゃない
    * ロックファイルを見て、適切な npm/yarn などを呼ぶもの
* 新しいことを学びたくないとか学習コストがでてくるとか。
    * メイン言語シンタックスで設定書きたいから?
* ちなみに、JavaScriptのビルドは、依存ソースコードの収集、変換、最適化のステップがある。
* ビルドツールは
    * Webpack, Turbopack, Viteなどがある。カオス 
* 設定にロジックをいれたくないよね。
    * え(emacs-lisper)
    * 気持はわからんでもないが他の人がメンテできなくなるから
* JavaScriptにはテンプレートエンジンもカオス
    * 数が多い
    * Python は jinja2 に統一されつつある
        * phpのテンプレートエンジン https://twig.symfony.com/
        * jsのテンプレートエンジン https://mozilla.github.io/nunjucks/
        * rubyのテンプレートエンジン https://shopify.github.io/liquid/basics/introduction/
    * もう同じシンタックスでテンプレートでかけていいやん
    * テンプレートエンジンはロジックいれさせないため。
        * ヒント Wordpress

### bun 使ってる?(fu7mu4)

JavaScript/TypeScript業界がよくわからない外野の話。

[bun](https://bun.sh/) は最速のJavascriptのツールキットとうたっているが使っている人いますか?というかビルドツール?が乱立していてどうしているの?

[Licensing](https://bun.sh/docs/project/licensing) ぺージを見ると JavaScript Coreが LGPL-2.0 で ライブラリに Apache-2.0 のものも使っているからライセンス違反なんじゃないかな。

* bunの言葉の話も面白い
    * 英語-steamed meat bun「肉まん」 – Hayabuchi Diary: <https://haybuchiriver.episode.jp/%E8%8B%B1%E8%AA%9E-steamed-meat-bun%E3%80%8C%E8%82%89%E3%81%BE%E3%82%93%E3%80%8D/>

### ローカルのユーザー管理になに使おう?(のがた)

* **かんたんに**ローカルPCのユーザー管理ができるものを教えてください
    * 基本、LinuxマシンですがWindowsもできたら良いです
    * Samba ADが使えることは確認したけどLinuxから管理できないので避けたいです
    * Active DirectoryはCALがあるので使えません

#### きっかけ

* 大学のプログラミングの授業は、Ubuntu 22.04がインストールされたPCがあるので、それを使っています
* そのPCは、ただUbuntuがぶっこんでユーザー管理も無い状態のPC。嫌な予感しか無い状態ですが仕方ないので、それで授業してたら事故で授業が止まってしまった…
* ということでUbuntu PC環境を本格的に直す必要が出てきた

#### どうするか

* 1台1台管理は嫌でもしたくないので将来的には[LTSP](https://ltsp.org/)にするけれど、後期の授業があるので後回し
    * LTSPはシンクラだけどイメージを配信して起動する[FOG Project](https://fogproject.org/)もよさそう。Windowsもできるらしい
* 1台1台管理の部分は当面Ansibleでしのぐ
    * Ansible力よわよわなのでZennの[Ansibleの使い方](https://zenn.dev/y_mrok/books/ansible-no-tsukaikata)と[ドキュメント](https://docs.ansible.com/ansible/latest/index.html)で入門している状態
* そうすると残るのはユーザー管理をどうするか
    * 学内のActive Directoryは[CALがある](https://news.mynavi.jp/techplus/article/techp704/)ので使えない
        * [Samba AD](https://wiki.archlinux.jp/index.php/Samba/Active_Directory_%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9)で同期させる目処はつけた
            * Dockerで楽しようとしたけどDockerでSamba ADが動かず、素のマシンでDebianパッケージを使ったら、あっさり使えた
                * [Raspberry Pi 4、Ubuntu 22.04 LTS、Samba 4を使ってActive DirectoryのDCを構築する](https://zenn.dev/yuyakato/articles/1186de8f2d675d)
                * [Ubuntu 22.04とSamba 4.15でActive Directoryドメインコントローラを構築してみる](https://t-dilemma.info/setting-ubuntu-samba-addc/)
                    * これはAnsibleで書き直すか
            * [SSSD](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/8/html/configuring_authentication_and_authorization_in_rhel/understanding-sssd-and-its-benefits_configuring-authentication-and-authorization-in-rhel)使ってLinuxからAD参加もできた
        * にしてもSamba ADで検索するとCentOSでソースからビルドするヤツばっかり引っかかる
            * 「なんでソースからビルドするんだ?」と思ったらrpmはSamba ADに一部対応してないらしい
            * [Samba Wikiにきちんと書いてある](https://wiki.samba.org/index.php/Package_Dependencies_Required_to_Build_Samba#Red_Hat_Enterprise_Linux_7_/_CentOS_7_/_Scientific_Linux_7)のに孫引きクソブログには、そういうこと書かかないし、そもそもアレ
    * その部屋のネットワークは学内とは直でつながってないし、クラスCが振ってあるので部屋だけのローカルでユーザー管理する?
        * となるとLDAP使う?
        * [LLDAP](https://github.com/lldap/lldap)と[Autheria](https://www.authelia.com/)がお手軽らしい
            * [対応中ではある](https://github.com/lldap/lldap/issues/67)らしいけど[PAMは対応していない](https://github.com/lldap/lldap/issues/294)のでLinuxのユーザー管理には使えない
    * redhatが389 Directory ServerとKerberosを悪魔合体させて作ってるActive Directory対抗の[FreeIPA](https://www.freeipa.org/)は、そもそもredhatべったりなのでDebian系で動かず
        * Dockerもコケてしまう
            * [How to Install FreeIPA Server with Docker on Debian 12](https://www.howtoforge.com/how-to-install-freeipa-server-with-docker-on-debian/)
            * [freeipa/freeipa-container: FreeIPA server in containers — images at https://quay.io/repository/freeipa/freeipa-server](https://github.com/freeipa/freeipa-container)
    * ユーザー管理には[OpenLDAP](https://www.openldap.org/)か[389 Directory Server](https://www.port389.org/)か使うしかないかなぁ…←イマココ！
* 一旦この件は他に方法ないよねっていうことでクローズ 
* 常識がないので、なにがこわいのかわからない。
    * こわい
    * 責任を誰がとるのか
    * チームとして落しどころを考えることが大事

### systemd一族が便利すぎる(のがた)

* 最近、Linuxの設定をしているとSystemd一族が増えて便利になってる
    * ローカルDNSやmDNSでhoge.localを使う→[systemd-resolved - ArchWiki](https://wiki.archlinux.jp/index.php/Systemd-resolved)
    * ネットワークの設定→[systemd-networkd - ArchWiki](https://wiki.archlinux.jp/index.php/Systemd-networkd)
    * 時刻同期→[systemd-timesyncd - ArchWiki](https://wiki.archlinux.jp/index.php/Systemd-timesyncd)
    * この辺は使ってないけど
        * gummiboat! お前はいつからsystemd一族になってんねん! → [systemd-boot - ArchWiki](https://wiki.archlinux.jp/index.php/Systemd-boot)
        * コンテナは使ってないけどこういうのもある → [systemd-nspawn - ArchWiki](https://wiki.archlinux.jp/index.php/Systemd-nspawn)
* systemd一族に支配されてるなぁ…
* [init](https://ja.wikipedia.org/wiki/Init)とか[launchd](https://opensource.apple.com/source/launchd/)とかはもう使わないんですね...
  * 今どき、設定をXMLでかくのは無理
    * [Canonical](https://ubuntu.com/community/governance/canonical)が始めたのは全部消えてる。
* [netplan](https://netplan.io/)は便利だった。設定も4行くらいだった。
* systemd は楽
  * [podman](https://podman.io/) は systemd の UNITファイル書いてくれる
  * [ifconfig](https://ja.wikipedia.org/wiki/Ifconfig) やめて [ip](https://man7.org/linux/man-pages/man8/ip.8.html) を使おうよ。
  * ansibleでも情報を収集できて便利
  * 昔の人が新しいのになれよう!辛いけど新しい方が楽。
    * 情報のキャッチアップは大事

### ApacheのPHPモジュールが無くなってた件（かねだ）

- いつの間にかApacheでも[PHP-fpm](https://www.php.net/manual/ja/install.fpm.php)使うようになってますね
    - [AlmaLinux9](https://almalinux.org/ja/)でLAMP環境作ろうとしたらPHPモジュール無くてちょっと混乱した
    - [ずいぶん前からだった](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/8/html/8.7_release_notes/deprecated-functionality_dynamic-programming-languages-web-and-database-servers)
    - [RHEL 9 の採用における考慮事項](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/9/html-single/considerations_in_adopting_rhel_9/index)の第9章 インフラストラクチャーサービス
        - mod-php はRedhatで非推奨になりその後削除された模様 AlmaLinux も追従した?
        - php-fpm で動作するから問題はない。
        - Redhat9のリリースノートには書いていないらしい。
            - RHEL8のリリースノートには、mod_phpは非推奨と書いている
            - 10.11. 動的プログラミング言語、Web サーバー、およびデータベースサーバー Red Hat Enterprise Linux 8 | Red Hat Customer Portal: <https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/8/html/8.8_release_notes/deprecated-dynamic-programming-languages-web-and-database-servers>
        - debianにはあるらしい。
- Apache の動作モード(MPM)が3種類あって...だけど、Redhat/CentOSのパッケージの設定がかわっていた。 
    - https://qiita.com/esparrago_b/items/4f368599aba1a059dbd1
    - debianは違うけど
- Apache使うことがなくなったなぁー
    - [nginx](https://www.nginx.co.jp/) 優秀!
    - Apache はリバースにおくことがある
        - [htaccess](https://httpd.apache.org/docs/2.4/ja/howto/htaccess.html) をおくには Apacheをいれるが、前には nginx がある。
        - wordpress のときは htaccess を書きかえろという古い記事もある。 
- 会社のサーバーが Amazon Linuxから移行することになった。
    - Redhat系に移行→ Alma Linuxになった。
    - 切り替えの時に nginx への切り替えたかった。 
- devContainerを作るときに構築が大変になるかも
    - Docker-Composeにするときにめんどうかも。
- mod-phpがない?
    - パッケージ名がかわったかもしれない。
    - RHEL9系だと完全に消滅してる
- rpmの検索
    - Packages for Linux and Unix - pkgs.org: <https://pkgs.org/>
    - Search the RPM repository on rpmfind.net: <https://rpmfind.net/linux/rpm2html/search.php>
- Virtualbox でファイル共有ディレクトリに File IOが発生すると遅くなる。
    - ログなどは書きこまない方が吉
    - WindowsでもSSHFS使ったほうがいいんじゃない?
        - wingetで[SSHFS-Win](https://github.com/winfsp/sshfs-win)と[WinFsp](https://github.com/winfsp/winfsp)を入れれば使えるよ
- [VirtualBox](https://www.virtualbox.org/) が Apple Silicon の macOSに対応していない問題
    - vagrant がmacOS の [Hypervisor framework](https://developer.apple.com/documentation/hypervisor)の方をつかえば、あるいは...
    - Vagrant も Go言語に書きかえをしているので、その他の作業はすすまない。

### 小ネタ （もりや）
* 見せる準備が何もできてませんので、へぇ、といってもらう程度でお願いします。
    * 文字起こし用の簡単なWebアプリを作って放置中
        * 音声ファイルの自動分割、フォーマット変換、文字起こし、文書の整形、要約まで自動で行います。
        * OpenAIの無料範囲で3時間程度の文字起こしまでは行けそうです。
    * 問い合わせフォームをGPT使って半自動化が頓挫中
        * API経由でチャットした場合に、チャットへの回答ではなく、何故か文章全体を表現するPythonコードを吐く
        * API呼び出し時のオプションのチューニング関係と思われますのでちょっと放置中
    * UEFN（Unreal Engin For Fortnite）でデジタルツイン挑戦中
        * バグ多すぎて、思った通り動きません
        * 挙動の癖とVerse言語を勉強中


### トランクベース開発? (fu7mu4)

Gitのブランチの使い方で、Gitflow などが提案されているが、最新はトランクベース開発で、ブランチはほぼメイン1本でやるというもの。

長いフィーチャーブランチはマージが大変だからとかいろいろな理由でトランクベース開発がでてきているらしいがよくわからない。

詳しい人いたらおしえてください。


### Coder Dojo 姫路をやりたい

* Coder Dojo 姫路ってどうなっているのでしょうか?と参加してくれました。
* 広畑の則直で「縁側ベース」というフリースペースをオープンさせようとしているそうです。 
    * まちライブラリー＠縁側ベース | ライブラリーに行こう！ | まちライブラリー: <https://machi-library.org/where/detail/9078/>
    * まちライブラリー縁側ベース(@library.engawabase) • Instagram写真と動画: <https://www.instagram.com/library.engawabase>


告知
---------------

### KOF(2023/11/10, 11)

https://www.k-of.jp/2023/




