Agile PBL祭りに参加して #agilepbl

はじめに

Agile PBL祭りってなんだってところは実行委員のお二人が書いた以下を読んでもらうのが一番かと思うのでリンク貼っておきます。

miholovesq.hatenablog.com

note.com

今回はこのイベントに当日ボランティアとして参加しました。

当日の様子

togetter.com

感想

agile PBL祭りのサイトにある全員が参加者になるを体現したようなイベントでした。
ボランティアやってたものの当日ボランティアとして働いていた部分は準備と片付けの時間帯が中心でそれ以外の時間帯は学生の発表やデモを見たり為になる話を聞いてばかりでした。
会場の雰囲気でいえばオープニングは少し緊張してそうな雰囲気が流れていましたがプロダクトの話が始まるとワイワイしながら本当にお祭りのような空気感でした。
各チームが自分たちのプロダクトにとても思いを込めているのがイイなぁと思いました。
あとはプロダクトに機能をこれから先も追加したいけど授業としては終わってしまうからあまりできないかもと寂しそうに話している学生が多いの印象的でした。

あとこれ

社会人になる前に社会人と対等に(?)やりとりができるような知識がつくようなカリキュラムが存在しててそれに関わる強い人いっぱいいるのがすごいところだと思います。
このenPiTが来年度で終わるの本当にもったいないしいくか迷ってるならいって欲しい。

そして懇親会中にも「なんで参加したのか」聞かれて改めて考えてみたけどカッコイイ先輩がかっこいい姿を見せるとイイのかなとぼんやり思いました。
あと、1日通して思ったことだけどアジャイルに関わる人たちって熱い人が多いと思いました。

懇親会で先生達、今年の参加学生と話してて思ったけど琉大と組んで出たあのチームも最高にいいチームだったって改めて思いました。

poolbooyer.hatenablog.jp

<仙台高専アドベントカレンダー2019><vue>#Vue事始

はじめに

登録してた日付を間違えて記憶した結果丸一日ずれました。 ということで仙台高専アドカレ7日目はOBです

Vueを試してみるよ

どういう経緯かは簡略に説明するとこのツイートで決めました。

f:id:poolbooyer:20191208005227p:plain
ネタに困った男の末路

ということでVueを触ります。 ただ、経験ががっつりあるわけでもないので調べつつ、試しつつ、継続して記事にしていくことにします。

今回の概要

  • dockerを使って開発の環境を立てる

Docker環境でVueを動かす

今回はローカルにあれこれせずDockerでなんとかやります 今回お試しでやるだけってことを考えるとDockerでよかったのですが、他に色々動かすことも多いと思うのでdocker-composeを使用します。

ということでまずはDockerfile

# nodeのイメージを取得
FROM node

WORKDIR /usr/src/app

RUN apt-get update &&\
    npm install -g npm @vue/cli

Nodeのimage取ってきてVue/cliを取ってくるところまでやります。

そしてdocker-compose.ymlは以下の感じ。

version: '3'
services: 
  app:
    build: ./docker/Vue/
    ports: 
      - 3000:3000
    volumes: 
      - ./Vue:/usr/src/app
    stdin_open: true
    tty: true

でこれをビルドして起動してコンテナ内に入ります。

そして以下の手順でコマンドを実行します。 1. vue create .を実行 2. 開発するプロジェクトを作成する(今回はdefault,yarnを選択) 3. 構成された後yarn serveを実行することでサービス開始

1を実行するとこんな感じに進んでいきます。

root@6352617c5535:/usr/src/app# vue create .

>> 生成するディレクトリを確認します(今回はカレントディレクトリ)
Vue CLI v4.1.1
? Generate project in current directory? Yes

>>構成パターンを選択(今回はプリセット)
Vue CLI v4.1.1
? Please pick a preset: default (babel, eslint)


Vue CLI v4.1.1
✨  Creating project in /usr/src/app.
⚙  Installing CLI plugins. This might take a while...

yarn install v1.19.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...

success Saved lockfile.
Done in 61.69s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.19.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 71.52s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project app.
👉  Get started with the following commands:

 $ yarn serve

これでプロジェクトは完成します。
完成したプロジェクトをビルドします。
$yarn build
ビルド完了後に $yarn serveを実行するとlocalhostで動作を確認することができるようになります。
表示される画面を確認すると以下の感じ

f:id:poolbooyer:20191208231123p:plain
アクセス時に表示される画面
これでhotloadも動くのでファイル更新すると自動で画面更新されます。 この先はまた別日で書きます。

日にち間違えててごめんなさい(土下座)

# <JavaScript><リメイク>表示非表示切り替え色々してみた

夏の自由研究

今回は過去記事のリメイク的な何かです 対象の記事は以下から

poolbooyer.hatenablog.jp

poolbooyer.hatenablog.jp

表示非表示切り替えというかJSでスタイルを触る方法的な話

目次

  1. 前回の振り返り
  2. 今回試すこと
  3. 今回試したコード
  4. 試した感想

1. 前回の振り返り

まずは前回の振り返りから
そもそもこれでやりたかったことから振り返っていきましょう

  • ボタンを押すと表示
  • 再度押すと非表示

簡単ですね、脳死で実装できそうです。
そのためにあの時はsetAttributeを使いました
コードでいうと以下のような感じ

var display = function(tab) {
    //切り替えるタブを確認する
    if (tab == 0) {
        //ボタンを押されなかった方を閉じるタブに指定
       close= 1;
   } else {
       close = 0;
    }
    //切り替える対象を取得
   var pane = document.getElementsByClassName("data");
   //表示する
   pane[tab].setAttribute("style", "display:inline");
   //非表示にする
  pane[close].setAttribute("style", "display:none");
}

これだとボタンが実は増えてるっていう
この時の自分は何を考えていたのでしょう ということで、単一ボタンで切り替えるパターンを考えてみました。

2.今回試すこと

今回は以下の表を元に4つを試します

onclick Eventlistener
style属性変更 1 3
class追加 2 4

 今回はスタイルを直接要素に与えるパターンとクラスを追加するパターンの2つを作ります
その上で、トリガーをonclickとeventlistenerの2パターンで比較してみます

3.作ったコード

今回作ったものはcode Penで以下からご確認あれって感じです

See the Pen jsでスタイルを切り替えるパターン試し集 by poolbooyer (@poolbooyer) on CodePen.

4.試した感想

1.style属性変更

スタイルの状態を持ってきて比較してっていうこともあり、コードは長くなります
あとは、JSをあんまり簡単にいじれない状況で使うとかの場合はあまりお勧めできないと思います

2.class追加

classListのtoggleを使ったのでJS単体で見たときにはスッキリしたコードになります。 その分CSSを書く必要はありますが、デザイン面で変更とか、見た目に手を入れたいときにはCSSのみでいいのでJSの知識がなくてもいい感じになります

3.トリガー周り

正直な話、今回の内容だとそんなに違いがない気もしました(ダバダ〜)
もうちょい調べて悟り開きます

ということで、リメイク記事でした。今後もリメイク書いていこうかなと思います。