owned this note   changed 2 years ago  
Published Linked with GitHub

姫路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側で仕組みとかパスとかが異なるので、両方をビルドするのは困難
    • それ 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/

Select a repo