姫路IT系勉強会 2023.10

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

最近のニュース

お題

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

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

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

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

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

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

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

  • https://nuejs.org/
    • 上記Nue.jsのWhyやBackstoryに書いてある内容が、普段思ってるモヤッ感にかなり一致してる
    • なんでもかんでもJSで、ではない解決策
      • ReactなどはJSに寄せすぎ。
    • 開発がJSの人だけだったらいいけど、そうではないでしょ。
    • 作者は Riot JS の人
    • 現在は開発中らしい
  • React は全部Reactの中だけにいるなら便利
  • Vite はViteで大変。フロントエンドによせすぎ
  • Webpackが大変
  • JavaScriptはブラウザ側とNode.js側で仕組みとかパスとかが異なるので、両方をビルドするのは困難
    • それmakeで
    • それconfigureで
  • 前のものが現役なままに新しいのがでてくる。
    • そのときそのときの最新がオワコンになってくる罠
  • https://github.com/antfu/ni でいいんじゃない
    • ロックファイルを見て、適切なnpm/yarnなどを呼ぶもの
  • 新しいことを学びたくないとか学習コストがでてくるとか。
    • メイン言語シンタックスで設定書きたいから?
  • ちなみに、JavaScriptのビルドは、依存ソースコードの収集、変換、最適化のステップがある。
  • ビルドツールは
    • Webpack, Turbopack, Viteなどがある。カオス
  • 設定にロジックをいれたくないよね。
    • え(Emacs-lisper)
    • 気持はわからんでもないが他の人がメンテできなくなるから
  • JavaScriptにはテンプレートエンジンもカオス

bun 使ってる?(fu7mu4)

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

bun は最速のJavaScriptのツールキットとうたっているが使っている人いますか?というかビルドツール?が乱立していてどうしているの?

Licensing ぺージを見るとJavaScript CoreがLGPL-2.0でライブラリにApache-2.0のものも使っているからライセンス違反なんじゃないかな。

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

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

きっかけ

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

どうするか

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

  • 最近、Linuxの設定をしているとSystemd一族が増えて便利になってる
  • systemd一族に支配されてるなぁ…
  • initとかlaunchdとかはもう使わないんですね…
    • 今どき、設定をXMLでかくのは無理
      • Canonicalが始めたのは全部消えてる。
  • netplanは便利だった。設定も4行くらいだった。
  • systemdは楽
    • podman はsystemdのUNITファイル書いてくれる
    • ifconfig やめて ip を使おうよ。
    • Ansibleでも情報を収集できて便利
    • 昔の人が新しいのになれよう!辛いけど新しい方が楽。
      • 情報のキャッチアップは大事

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

  • いつの間にかApacheでもPHP-fpm使うようになってますね
  • Apacheの動作モード(MPM)が3種類あって…だけど、Redhat/CentOSのパッケージの設定がかわっていた。
  • Apache使うことがなくなったなぁー
    • nginx 優秀!
    • Apacheはリバースにおくことがある
      • htaccess をおくにはApacheをいれるが、前にはnginxがある。
      • WordPressのときはhtaccessを書きかえろという古い記事もある。
  • 会社のサーバーがAmazon Linuxから移行することになった。
    • Redhat系に移行→ Alma Linuxになった。
    • 切り替えの時にnginxへの切り替えたかった。
  • devContainerを作るときに構築が大変になるかも
    • Docker-Composeにするときにめんどうかも。
  • mod-PHPがない?
    • パッケージ名がかわったかもしれない。
    • RHEL9系だと完全に消滅してる
  • rpmの検索
  • Virtualboxでファイル共有ディレクトリにFile IOが発生すると遅くなる。
    • ログなどは書きこまない方が吉
    • WindowsでもSSHFS使ったほうがいいんじゃない?
  • VirtualBox がApple SiliconのmacOSに対応していない問題
    • vagrantがmacOSの Hypervisor frameworkの方をつかえば、あるいは…
    • VagrantもGo言語に書きかえをしているので、その他の作業はすすまない。

小ネタ （もりや）

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

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

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

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

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

Coder Dojo 姫路をやりたい

  • Coder Dojo姫路ってどうなっているのでしょうか?と参加してくれました。
  • 広畑の則直で「縁側ベース」というフリースペースをオープンさせようとしているそうです。

告知

KOF(2023/11/10, 11)

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