OmniAICreator/Qiita-1.07M huggingface dataset:
Power Automate Desktopでデスクトップ整理フローを作ってみました

自分が働いている職場にはデスクトップがアイコンで埋め尽くされている人がいて、
そんな彼のデスクトップをどうにか綺麗にできないかと常々思っていて、
PADを使ったらワンクリックで綺麗に出来るのでは、と閃き作ってみました。

大まかな流れは、デスクトップにあるフォルダの更新日時を取得、1か月前以前の物は別のフォルダに移動する。
という物です。

フローはこちら
![flow.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540456/9cb3a0dc-d62e-3f38-e9e2-4af61dc46699.jpeg)


①特別なフォルダーを取得でデスクトップを取得しています。
　他のPCでも流用を効かせられればと思い設定しましたが、
　次のアクションで直接設定すればここのアクションは必要ありません。

②フォルダ内のサブフォルダを取得で、デスクトップにあるフォルダの情報を取得しています。
　ここで更新日時を取得しています。

③今回のフローは更新日付が1か月前以上の物をピックアップして移動するフローです。
　その基準とする為現在日時を取得します。

④現在の日付より1か月前の日付をResultedDate変数に格納します。
　アクション名は加算ですが、減算も出来ます。

⑤②で取得したサブフォルダをループします

⑥ループの中で更新日付が1か月より前の物を検索します。

⑦⑥で検索されたフォルダをドキュメントの移動フォルダに移動します。

〇更新日付の変数の設定の仕方
　②のアクションが動くとfolder変数に各種値が格納されます。
　.LastModifiedが更新日時になります。
![folders.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540456/a11a30f7-728c-83d2-824a-7f2fb006be2d.jpeg)
　表示するには右の変数欄の変数をダブルクリックしたあと、詳細表示をクリックします

![変数.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540456/266e3be1-3f0c-a746-9a24-98563f32e367.jpeg)

　変数の記述方法ですが、%Folders[フォルダ番号].LastModified%と記述します。
　変数名[取得した順番].詳細
　ですね。
　例えば%Folders[0].Name%　とすると1番目に取得したフォルダの名前が変数に格納されます。
　今回の記述はfor each内での%Folders[フォルダ番号].LastModified%なので
　%Folders[CurrentItem.FilesCount].LastModified%となります。
　最初%Folders[CurrentItem].LastModified% と記述しましたが、これでは動きません。
　CurrentItem変数は数値ではなくて、forループで回しているのでFoldersと中身は同じです。
　なので、.LastModifiedと同じように.FilesCountを付ける事で変数が数値になります。

今回はフォルダを移動するフローですが、ファイルも同じように処理出来ます。
同じように下に連ねるとフォルダもファイルも一度にお掃除出来ますね。
やってみると条件とループと日時の計算、変数の仕組みも理解できるようになるんじゃないかと思います。
是非試してみて下さい。
変数/リスト

# 変数
変数はデータ(値)を入れる箱のようなイメージです。
この箱(変数)にfruitという名前(変数名)をつけることで、
その名前を用いて変数に値を入れたり、変数から取り出すことができます。
`fruit = apple`
これは、fruitという変数にappleという値を代入しています。
「=」は等しいではなく、右辺を左辺に代入するという意味になります。

# リスト
`fruit1 = 'apple'
fruit2 = 'orange'
fruit3 = 'grape'`
これらのように、食べ物の名前が複数ある時、
それぞれを別々の変数に定義しておくより、関連するデータをまとめていた方が便利です。
そのような複数のデータをまとめて管理するのに「`リスト`」を用います。
リストは`['apple', 'orange', 'grape']`のように記述し、
それぞれapple、orange、grapeを「`要素`」と呼びます。
こうすることで、複数の値を1つにまとめることができます。
※例では文字列のみをリストでまとめていますが、数値のみでもまたは文字列と数値を一緒にまとめることもできます。



`fruits = ['apple', 'orange', 'grape']`
と記述することで、fruitsという変数の中にリストを代入することができます。
ここで　`print(fruits)`　と記述すると
`['apple', 'orange', 'grape']`が表示されます。

このリストの中の1つだけを出力させたい場合は、
`変数名[インデックス番号]`　と記述すると取り出せます。
インデックス番号とは、リストの要素には前から順に「0, 1, 2, 3, ・・・・・ 」と数字が割り振られています。
この番号のことを「`インデックス番号`」と呼びます。
###### ※ここで注意なのはインデックス番号は「0」から始まります。
なので、fruitsのリストでは
appleは0、orangeは1、grapeは2とインデックス番号が振り分けられているので、
もし、orangeだけを表示させたい場合は
`print(fruits[1])`と記述する必要があります。
***
### リストを更新/追加する
リストを更新するには
`変数名[インデックス番号] = 更新したい値`　と記述することで更新できます。
<pre> 例：  fruits = ['apple', 'orange', 'grape']
      fruits[1] = 'banana'

これを、print(fruits)　で表示させると出力結果は
['apple', 'banana', 'grape']　となります。
</pre>

また、現在のリストに要素を追加することができます。
追加するには、
`変数名.append(値)`　と記述することで要素を追加できます。
<pre> 例： fruits = ['apple', 'orange', 'grape']
      fruits.appned('banana')

これを、print(fruits)　で表示させると出力結果は
['apple', 'orange', 'grape', 'banana']　となります。
</pre>
※変数名は変数の中に入っている値が名前だけでわかるようなものが好ましいです。
自分一人での作業では問題なくても、今後複数の人と作業するときに誰が見てもすぐに分かるようにした方が、
他の人がわざわその変数に何が代入されているのかを確認する作業が省かれるためです。
ノートPCでバッテリーの状態を確認する

# ノートPCでバッテリーの状態を確認する
会社等で支給されるノートPCはなかなか交換をしてくれないもの。内蔵バッテリーの「持ち」が悪くなってきた時にバッテリーの状態を確認するwindows標準のコマンド。コマンドプロンプトから打てば良い。

```
# powercfg/batteryreport
```

結果をhtml形式で出力してくれる。
MacOSのソフトウェアアップデート後に毎回実行するコマンド

## 概要
MacOSがアップデートされると ルートユーザーの設定ファイルが初期化されてしまい
独自の設定をしている場合は 毎回 再設定を強いられます

再設定の自動化も検討していますが
対象ファイルに重要なアップデートがあった場合に
意図せず上書きしてしまう危険性があるので
ここでは 手動で設定ファイルを編集する方法を共有します

## ターミナルでTouch IDを利用できるようにする
1. ルートユーザーに切り替え
`sudo su -`

1. sudo設定ファイルを編集
    1. emacsで対象のファイルを開く  
    `emacs /etc/pam.d/sudo`
    <br><br>
    1. 読み取り専用モードの解除  
    `control x` + `control q`  
    or  
    ` M-x toggle-read-only`

    1. レコードを追加

        ```shell:/etc/pam.d/sudo
        auth       sufficient     pam_tid.so
        ```


## ターミナルの表示設定を変更する
ターミナルでカレントディレクトリやユーザー名を表示しない設定は
[こちら](https://qiita.com/tonkotsuboy_com/items/b752a86cee7eaedf28da)の記事を参考にしてください

1. ルートユーザーに切り替え
`sudo su -`

1. ターミナルの表示設定ファイルを編集

    1. emacsで対象のファイルを開く  
    `emacs /etc/zshrc`
    <br><br>
    1. 読み取り専用モードの解除  
    `control x` + `control q`

    1. 既存設定をコメント化  

        ```shell:/etc/zshrc
        # PS1="%n@%m %1~ %# "
        ```

    1. 変更の反映
    `source /etc/zshrc`
CloudWatch Logs Insights でURLのパスとクエリを分けて取得する

```
255.255.255.255 - - [01/Apr/2021:11:28:40 +0900] "GET /api/hoge/fuga HTTP/1.1" 200 246 "https://example.com/hoge" "Mozilla/5.0 (Example User Agent)" "255.255.255.255"
255.255.255.255 - - [01/Apr/2021:11:28:41 +0900] "GET /api/foo?bar=xxx&piyo=zzz HTTP/1.1" 200 84 "https://example.com/hoge" "Mozilla/5.0 (Example User Agent)" "255.255.255.255"
```

こんな感じの nginx のアクセスログがあって、CloudWatchLogsに転送されてるときに、
パス毎のアクセス数を集計したいことがあります。

これをCloudWatch Logs Insightsで分析しようとすると、

```
fields @timestamp, @message
| parse '* - - [* *] "* * *" * * "*" "*" "*' as ip1, dateTime, timeZone, method, uri, httpVer, status, bytes, referral, userAgent, ip2
| stats COUNT() BY uri
```

みたいな書き方が多いと思うんですが、そうすると、

```
uri                        COUNT()
/api/hoge/fuga                  30
/api/foo?bar=xxx&piyo=xxx        2
/api/foo?bar=xxx&piyo=yyy        4
/api/foo?bar=yyy&piyo=zzz        1
...
```

みたいな感じで、クエリパラメータが違うと別パス扱いになるのでなんか違う感じになります。
ほしい結果としては以下みたいな感じで、 `/api/foo` は１つにまとめたい感じ。

```
uri                        COUNT()
/api/hoge/fuga                  30
/api/foo                        16
```

で、CloudWatch Logs Insightsのクエリだけでどうすればいいかというと、
`parse` のときに、正規表現を使うようにします。

[ドキュメント](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/CWL_QuerySyntax.html)を見ると以下のように書いてあって、正規表現を利用したパターンマッチが使えます。

> この単一のログ行を例として使用します。
> 
> `25 May 2019 10:24:39,474 [ERROR] {foo=2, bar=data} The error was: DataIntegrityException`
> 
> 次の 2 つの parse 式は、それぞれ以下のことを行います。エフェメラルフィールド level、config、および exception が作成されます。level の値は ERROR、config の値は {foo=2, bar=data}、exception の値は DataIntegrityException です。最初の例は glob 式を使用し、2 番目の式は正規表現を使用します。
> 
> `parse @message "[*] * The error was: *" as level, config, exception`
> 
> `parse @message /\[(?<level>\S+)\]\s+(?<config>\{.*\})\s+The error was: (?<exception>\S+)/`
> 
> 次の例では、正規表現を使用して、ログフィールド @message から、エフェメラルフィールド user2、method2、および latency2 を抽出し、method2 と user2 の一意的な組み合わせごとに平均レイテンシーを返します。
> 
> `parse @message /user=(?<user2>.*?), method:(?<method2>.*?), latency := (?<latency2>.*?)/ 
    | stats avg(latency2) by method2, user2`


というわけで、正規表現でパースすることで、パスとクエリをそれぞれ取得することができます。

```
fields @timestamp, @message
| parse @message /[0-9.]+ - - \[\S+ \S+\] \"(?<method>[A-Z]+) (?<path>[^?]+)\??(?<query>\S+)? \S+" (?<status>[0-9]+) \S+ "\S+" "[^"]+" "\S+"/
| stats COUNT() BY path
```

これで、期待する結果が得られます。

```
path                       COUNT()
/api/hoge/fuga                  30
/api/foo                        16
```

正規表現の場合の書式は、 `(?<エイリアス>パターン)` みたいな感じで名前付きの値を取得できるので、

`(?<path>[^?]+)\??(?<query>\S+)?`

っていう感じで、パスと、クエリ文字列があればクエリを取得する感じにできます。
通常の正規表現として考えると、`([^?]+)\??(\S+)?` になり、 URIの中の `?` の前と後でそれぞれマッチングするようにしてるだけです。

split() 関数みたいなので分割できるとか、 正規表現で置換できるとかあればいいんですが、[あんまり複雑な関数は用意されてない](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/CWL_QuerySyntax.html#CWL_QuerySyntax-operations-functions)ので、将来的にそのへんが整備されたらもっと楽にできるようになるんじゃないかなと思ってます。
[MAC] pythonの環境構築について

# はじめに

　この記事は、MAC初心者用の記事になります。（私自身初心者です）

　WindowsからMACにOSを変更したのでpythonの環境構築をしました。

　この記事とやり方はインターネットで調べたことが中心なので、既視感があるかもしれません。
しかし、私が実際にやってみて、引っかかった点を交えての説明になります。
読んでいただけると嬉しいです。

# 環境
 - macOS Big Sur 11.2.3

# 手順
 - Homebrewの導入
 - pyenvのインストール
 - Python (Anaconda) のインストール

##Homebrewの導入
　Homebrewとは、Macのパッケージ管理システムのことです。

　まず、Launchpadからターミナルを開きます。
その後、ターミナル上に以下のコマンドを実行すると実行されます。

```python:homebrew

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

 このコマンドは、HomebrewのWebサイトに記載されています。

　インストール中にpress RETURN to continue or any other key to abort と表示されます。**RETURN** keyは、**ENTER** keyのことです。なので、ENTER keyを押してください。
　また、Homebrewを利用する際に、XcodeのCommand Line Toolsが必要となります。Homebrewのインストール時に、自動的にインストールされますが、もし、うまくインストールできなかった場合、以下のコマンドよりCommand Line Toolsをインストールしてください。

```python:xcode

 xcode-select --install
```

これで、Homebrewのインストールは完了です。
 インストールの確認は、以下のコマンドで確認してください。

```python:確認

 $ brew --version
```

　Homebrew 3.0.10などと表示されればインストールできていることが確認できたことになります。

##　pyenvのインストール
　pyenvとは、pythonの複数のバージョンを使い分けるためのバージョン管理ツールです。
インストールする前に**SHELL**の確認をしておきましょう。以下のコマンドにより確認することができます。

```python:SHELL

$ echo $SHELL
```

 `/bin/bash`と`/bin/zsh`のどちらかが表示されると思います。

　次にpyenvを実際にインストールしていこうと思います。以下のコマンドを実行します。

```python:pyenv 
#Homebrew環境のアップデート
$ brew update --force && brew upgrade
#インストール
$ brew install pyenv
$ brew install pyenv-virtualenv
#システム登録
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
```
　私は、ここでSHELLの確認をしなかったため、インストール後のシステム登録でつまづきました。
　SHELLの確認の時に`/bin/bash`と表示された場合、上のコマンドをそのまま実行してください。`/bin/zsh`と表示された場合は、`~/.bash_profile`の部分を`~/.zshrc`に書き換えて実行してください。

 これで、pyenvのインストール完了です。

## Python (Anaconda) のインストール
　リストで最新バージョンを確認してインストールしてください。今回は、Python3をインストールしています。

```python:anaconda
 #リストの表示
 $ pyenv install -l
 #インストール
 $ pyenv install anaconda3-2019.10
 $ pyenv global anaconda3-2019.10
```

　これで、環境設定は終了です。ここから、必要ならOpenCVなどをインストールしてください。
【JavaScript】ブラウザバックでonloadイベントが呼ばれないようにしたい

##起こったこと
onloadイベントでメッセージ通知を行っていたが、ブラウザバックでもメッセージが表示されてしまった。

__ブラウザのバージョン__
Microsoft Edge バージョン 88.0.705.62 (公式ビルド) (64 ビット)

##対処

```javascript:JS
window.onload = function onloadEvent() {

    // ブラウザバックで戻ったときにメッセージ表示しないように
    window.addEventListener('pageshow', () => {
        // 0: 初めて開いたとき
        // 1: リロードしたとき
        // 2: ブラウザバック
        var type = window.performance.navigation.type;

        if (type != 2) {
            alert('メッセージ表示');
        }
    });
};
```
AWS(EFS)

#はじめに
こちらではAWS機能について書いていきたいと思います。
公式ドキュメントやAWS認定試験（ソリューションアーキテクトやDevOpsなど）の勉強教材など細かい内容をかかず、ざっくりとした内容で。
試験などに興味はないし！公式ドキュメントなど長ったらしくて読めん！
という方に向けに作っていきたいと思います。
(私の備忘録も兼ねて)

写真はつけられればつけます。(Qiitaの制限の範囲内で)

ストレージなどは種類が多くてややこしいですね

#環境
AWS

#ドキュメント
https://docs.aws.amazon.com/index.html
https://docs.aws.amazon.com

#EFSとは
・NASに似たファイルストレージ
・ファイルシステムとして利用し、複数のEC2インスタンスでの共有アクセスが可能
・S3と異なりインターネットから直接アクセスできない

##特徴
|種別|内容|
|:-----------|:------------|
|  シンプル| フルマネージドで既存のNGSv4などのゆーるや標準プロトコル/APIでアクセス可能 |
|スケーラブル|ペタバイトまでスケーラブルにデータを蓄積。スループット/IOPS性能は自動的にスケーリングし、定レイテンシーを維持|
|柔軟性|ファイルの減少に合わせて自動で拡張・縮小。事前に容量を設定する必要なし。使った分だけの従量課金|
ページネーション機能の追加


①gamを記述します。

```:Gemfile
gem 'kaminari', '~> 0.17.0'
```
②ターミナルでコマンド入力

```:ターミナル
$ bundle install
```
③コントローラーに2行追記します。

```ruby:tweets_controller.rb
class TweetsController < ApplicationController
  before_action :set_tweet, only: [:edit, :show]
  PER = 8 #1ページの表示数

  def index
    @tweets = Tweet.includes(:user).order("created_at DESC")
    @pages = Tweet.page(params[:page]).per(PER)#追記
  end

```
④viewsファイルに1行追記します。こちらで完了です。

```Ruby:index.html.erb
<div class="card__summary">
  <div class="card__wrapper">
    <% @tweets.each do |tweet| %>
          <%= render partial: "tweets/tweet", locals: { tweet: tweet } %>
    <% end %>
  </div>
  <%= paginate @pages %>#追記
</div>

```
MacOSでもGyazoを起動させるショートカットを作りたい

# きっかけ

WindowsはGyazoを一発で起動させるショートカットがあるらしい(Ctrl+Shift+C)が、Macではなくて毎回dockのアイコンをクリックしたりしませんか？
MacOSでもショートカットを使いたい！と思うことありませんか？
MacOSの基本アプリケーションの**Automator**を使えば、簡単に実装できます！

# 注意事項

この記事では「Gyazo Teams」や「Gyazo GIF Teams」について設定しますが、
一般の「Gyazo」や「Gyazo GIF」でも可能です。
**もちろん、他のアプリケーションの起動も同じ手順で設定可能です**

# 設定方法

## 1. Automatorでの設定

まず、Automatorを開きます。
こういうアイコンです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004329/186558c6-b7ad-2d59-dce5-2495408a34d1.png)


下の画像のような初期画面が現れると、「クイックアクション」を選択して開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004329/ced91e74-f6d4-dca0-5fb1-a220ca1aa85b.png)


上段の検索するところに「アプリ」ぐらいを入力して「アプリケーションの起動」を見つけられます。
そのままdrag&dropで右側のスペースに持ってくると下の画像みたいに設定できます。
![730852e6839458eba430e30260dbd386.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004329/efd90576-d6be-cb59-1260-f0e71b51af57.gif)


起動するアプリを選択するところから「Gyazo Teams」or「Gyazo GIF Teams」を選択します。
![0bf9d681d46d82c2e7372fa5aa2e3131.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004329/31cd145d-60bd-e689-a6b3-6f5baa4c265c.gif)


`Cmd+S`でいい感じの名前をつけて保存します
（今回は「Gyazo teams execution」にしました）


## 2. ショートカットの設定


「システム環境設定」→「キーボード」→「ショートカット」を開きます。
左側から「サービス」を探して一番下に行くと、先ほどAutomatorで設定したクイックアクションがあります。

この「Gyazo teams execution」の右側に出てくる「ショートカットの追加」をクリックし、設定したいショートカットを入力します。

- 他のショートカットと被らなければOKです
- もし被っても、かぶせるところの機能を使わなければOK

今回はデフォルトのcapture機能も使いたかったので`cmd+shift+7`(Gyazo GIFは `cmd+shift+8`)にしました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004329/4f3eb7f8-7529-6f6e-13a1-c6a68cd822e3.png)


最後に、設定したショートカットを押して、ちゃんとGyazoが実行されるか確認します。
起動できたら完成です！
カラムの追加方法(rails)

①ターミナルに下記を記述します。

```
rails generate migration ADDクラス名 カラム名:データ型( カラム名:データ型)
rails g migration AddNamesToUsers first_name:string last_name:string #例
```
②ターミナルに下記を記述して完了です。

```
rails db:migrate
```
Scalaの記号のいろいろ

#はじめに
みなさんいかがお過ごしでしょうか
突然ですがScalaって簡潔に書けるとかいいいながら記号ばっかでわかりにくかったりしますよね....
こちらではそんなScalaでの記号のいろいろを紹介をしていきたいと思います。

#環境
Scala

#=
主に使われるのが代入
数学的な”=”ではない…
変数名 = 内容

###変数
```scala
val  hoge = "hogehoge"
```

###関数
代入とも言える

def 関数名 = 処理内容


#:
###型の定義
変数 : 型名

###関数などの返り値
def 関数名(引数):返り値の型



#::
配列など



#=>
たくさんの意味をもつこの記号使い方も様々

###関数の型表現
関数の引数の型と返り値の型を表現
引数の型 => 返り値の型

###ラムダ式
引数 => コードブロック

###パターンマッチ
case ケース => 処理

###別ファイル名でインポート
ライブラリ名 => 別名



#<-
forなど


#_
引数わたしなど


#(A,B)
タプル
【エンジニアなら絶対に知っておきたい！】マークダウン記法のまとめ

# はじめに
マークダウンの記法について調べる事が多いので、まとめを作りました。
よかったら参考にしてください。

# 目次
①見出し
②リスト
③番号付きリスト
④改行
⑤インライン表示
⑥リンクの挿入
⑦画像の挿入
⑧コードの挿入
⑨引用
⑩表

# 解説


## ①見出し

####`書き方`  

>
``` 
# 見出し⑴ 
## 見出し⑵
### 見出し⑶
``` 
>

####`結果`
=> 以下のように、`#の数`に応じて見出しの大きさが変わります。

> 
# 見出し⑴ 
## 見出し⑵
### 見出し⑶
>


## ②リスト

####`書き方`  

>``` 
-　リスト  
  -　リスト
  -　リスト
``` 

####`結果`
=> 以下のように、リストにできます。また、`Tabキー`を使用すればリストの中にリストを作れます。

> 
- リスト
    - リスト
    - リスト
>


## ③番号付きリスト

####`書き方`  

>``` 
1.　リスト  
2.　リスト
  3.　リスト
``` 

####`結果`
=> 以下のように、番号付きリストにできます。
=> また、`Tabキー`を使用すればリストの中にリストを作れます。
=> ただし以下のように、リストの中にリストを作る場合は１から開始になります。

> 
1. リスト
2. リスト
    3. リスト
>


## ④改行

####`書き方`  

>``` 
1行目__<-(半角スペース２個分)
2行目
<br>
3行目
``` 

####`結果`
=> 以下のように、改行するためには`半角スペース2個`,`<br>`とすることで改行できます。

> 
1行目  
2行目
<br>
3行目
>


## ⑤インライン表示

####`書き方`  

>``` 
`テキスト`
``` 

####`結果`
=> 以下のように、インライン表示したい文字列をバッククォーターで囲むことでインライン表示にできます。
=> バッククォーターは`「shift + @」`

> 
`テキスト`
>


## ⑥リンクの挿入

####`書き方`  

>``` 
[タイトル](URL)
[Qiita](https://qiita.com/)
``` 

####`結果`
=> 以下のように、[]内に記述した文字がリンクになります。
=> 遷移先は()で指定したURLになります。

> 
[Qiita](https://qiita.com/)
>


## ⑦画像の挿入

####`書き方`  

>``` 
![代替テキスト](URL "タイトル")
``` 

####`結果`
=> [代替テキスト]（"タイトル"）はなくても構いません。
=> URLには`画像のURL`を入れると表示されます。
★Gyazoのgifを貼り付ける際によく使えるので絶対に覚えておいた方が良いです！！

> 
![qiita-square.png](https://qiita-image-store.s3.amazonaws.com/0/126861/90386757-fd96-8ba6-3477-485669713c55.png "qiita-square")
>


## ⑧コードの挿入

####`書き方`  

>
``` 
```<-(バッククォーター３つ)
プログラミング言語：タイトル
挿入したいコード
```<-(バッククォーター３つ)
``` 

>>例
```ruby:タイトル
puts "HelloWorld!"
>>
>

####`結果`
=> バッククォーター(```)3つで囲むことでコードの挿入ができます。
=> 以下のように、プログラミング言語を指定すると、その言語に応じた色をつけてくれます。

> 
```ruby:タイトル
puts "HelloWorld!"
```
>


## ⑨引用

####`書き方`  

>
```
>>テキスト
>>>テキスト
```
>


####`結果`
=> 以下のように、`>`を文頭に入れると、グレーの線が表れ、引用の形にしてくれます。

> 
>>　テキスト
>>>　テキスト
>


##　⑩表

####`書き方`  

>
```
|table1 | table2 | table3 |
|-------|--------|--------|
|column |column  |column  |
|column |column  |column  |     
>



####`結果`

=>以下のように、表になり表示されます。
★DB設計する際に必要になり、これもとても大事です！

> 
|table1 | table2 | table3 |
|-------|--------|--------|
|column |column  |column  |
|column |column  |column  |     
>

# まとめ
エンジニアならばマークダウンを使う事が多いと思い、大切そうなものを10個まとめました！
もしわからない時は、ぜひご活用ください。
AWS CLIを用いてLambda関数の情報とコードの一覧を取得する。

#はじめに
AWSを使用するに当たり適宜適当にlambdaの関数を作成していたら、いつの間にか管理がおろそかになってしまいました。。。
とりあえず AWS CLI を使えば現状あるものの一覧を取得できるみたいなのでトライしてみます。
#手順
##0. 事前準備
###わたくしの環境
・ubuntu v20.04.1 LTS (Focal Fossa)
・aws-cli /2.1.3 Python/3.7.3 Linux/4.4.0-19041-Microsoft exe/x86_64.ubuntu.20 

cliを使用するroleにはLambdaのListFunctionsとGetFunctionの権限を追加しておきましょう。
##1. 関数の一覧を取得する
以下関数でlambda関数の一覧をcsvで取得できます。

```bash
aws lambda list-functions --region ap-northeast-1 | jq '.Functions[] |  [ .FunctionName ,  .Runtime ]' | jq -rs ' map([.[]])[]|@csv' < lambda-list.csv
```
'.Functions[] | [ .FunctionName , .Runtime ]'の中身を好きに設定することで他の情報も得ることができます。（[Example : 'Output'の中身を好きに指定できます]( https://docs.aws.amazon.com/cli/latest/reference/lambda/list-functions.html))

##2. 関数名を指定して情報を取得する
以下コードで関数の情報を取得できます。

```bash
aws lambda get-function --function-name <関数の名前>
```
##3. 関数名を指定してコードを取得する
さっき取得した情報の '.Code.Location' を使用してlambda関数のコードの中身を取得します。

```bash
url=$(aws lambda get-function --function-name <関数の名前>} | jq -r '.Code.Location')
curl -o lambda.zip ${url}
```

##4. シェルスクリプトで全コード・情報取得自動化
最終的にこうなりました。
お好みでカスタマイズしてください。
人生初シェルスクリプトだったため、中々苦戦しました。

```bash
#!/bin/bash
 
aws lambda list-functions --region ap-northeast-1 | jq '.Functions[] |  [ .FunctionName ,  .Runtime ]' | jq -rs ' map([.[]])[]|@csv' > lambda-list.csv
 
while read row; do
  funcName=`echo ${row} | sed 's/"//g' | cut -d , -f 1` 
  funcType=`echo ${row} | sed 's/"//g' | cut -d , -f 2`
 
  mkdir ${funcName}
  cd ${funcName}
  aws lambda get-function --function-name ${funcName} > function.json
  url=$(aws lambda get-function --function-name ${funcName} | jq -r '.Code.Location')
  curl -o lambda.zip ${url}
  unzip lambda.zip
  rm lambda.zip
  cd ..
  
  echo "${funcName}処理完了"
done < lambda-list.csv
exit 0
```
#終わりに
いかがだったでしょうか。
lambda関数の作成は乱雑になりがちだと思いますが、（もしかして自分だけでしょうか。。。）これを使えば一覧をサクッと取得できます。
そのうちlambda関数自体にローカルに保存するかどうかのフラグを立て、必要なものを必要に応じ管理できるよう改善していきたいと思います。
#参考
・[シェルスクリプト(bash)にてsedコマンドを使用して文字列からダブルクォーテーションを削除する方法](https://www.yukiiworks.com/archives/75)
・[bashでCSVを読み込み1行ずつループ処理する](https://qiita.com/SoarTec-lab/items/4475ba6de612fba3f163)
・[【AWS】lambda のめんどくさい棚卸しを楽にするワンライナー](https://qiita.com/szk3/items/a8242a0b3f1162bbf2d9)
・[【備忘録】AWS CLI 便利オプション一覧](https://qiita.com/yut0201/items/543ada113790b10c8913)
AWSストレージ

#はじめに
こちらではAWS機能について書いていきたいと思います。
公式ドキュメントやAWS認定試験（ソリューションアーキテクトやDevOpsなど）の勉強教材など細かい内容をかかず、ざっくりとした内容で。
試験などに興味はないし！公式ドキュメントなど長ったらしくて読めん！
という方に向けに作っていきたいと思います。
(私の備忘録も兼ねて)

写真はつけられればつけます。(Qiitaの制限の範囲内で)

ストレージなどは種類が多くてややこしいですね

#環境
AWS

#ドキュメント
https://docs.aws.amazon.com/index.html

#ストレージの種類
・Amazon Simple Service(S3)https://qiita.com/I_S-657/items/5d44ec26f5d27ee93a99
インターネットアクセス/EC2インスタンス間で共有/大量データを保存したいケースはS3を利用する
・Amazon　Elastic Store(EBS)https://qiita.com/I_S-657/items/ac96154e4c314a7f1c3a
EC2インスタンスにアタッチして、アプリケーションを構成するためのボリュームディスクとして利用する
・Amazon Elastic File System(EFS)
インターネットアクセスは不可で、EC2インスタンス間でのデータを共有する場合はEFSを共有ストレージとして利用
・Amazon S3 Glacier
データバックアップなど中長期にアクセス頻度が低いデータを保存する場合にコスト最適を目指して選択する
プログラムの最初にフォルダを作成する


現在のディレクトリ直下に指定した名前のディレクトリを作成する。


# やり方

```python3:
import os

dir_name = "./{NAME}/"
os.makedirs(dir_name, exist_ok=True)

```

# 環境
python３.〜

# 注意点

## 引数について

|引数名|役割|
|-|-|
|name|ファイル名(第一引数)|
|mode||
|exist_ok|既に存在するけどok?|
|head||
|tail||
|cdir||

引数名の確認は以下より
https://qiita.com/chankane/items/3909e9f2d1c5910cc60b

```python:入力
import os

arg_names = os.makedirs.__code__.co_varnames
print(arg_names)
```

```:出力
('name', 'mode', 'exist_ok', 'head', 'tail', 'cdir')
```


## 引数のexist_okについて
True　か　Falseを受け取る
Trueだとすでに同じ名前のディレクトリがあってもエラーにならない
Falseは`FileExistsError`になる

## os.mkdir() と os.makedirs() の違い

- mkdir()は二階層下にディレクトリを作るときに一階層下のパスも完全一致でないとダメ
- makedirs()は二階層下にディレクトリを作るとき一階層下に指定されたパスのディレクトリが無ければ作ってくれる

参考以下

https://e-keiai.com/archives/84
[Swift] 君は`!`より怖い強制アンラップを知っているか？

※ある意味「一発ネタ」です


# 問

君は**`!`より怖い強制アンラップ**を知っているか？


# 答

それは、

`var unsafelyUnwrapped: Wrapped { get }`

だ。


# 解説

[AppleのDocumentation](https://developer.apple.com/documentation/swift/optional/1641793-unsafelyunwrapped)を読んでいただければ解る話ですが、改めて説明しましょう。

`!`は、[前回の記事](https://qiita.com/YOCKOW/items/b5ede9cb28bb5d5f215d)で少し触れましたが、SIL(Swift Intermediate Language)を生成する段階でその動作が挿入されます。動作としては、「万が一アンラップしようとしている対象が`nil`だった場合にはfatal errorでプログラムを異常終了させる」というものになります。

しかし`var unsafelyUnwrapped`は違います。アンラップしようとしている対象が`nil`だった場合(且つReleaseビルドの場合)、**何も無かったことにします**。つまり、その場合の返り値は、なんら関係ないオブジェクトだったり、未知のメモリ領域を指し示すポインタだったり、何でもありです。
前述のDocumentationにも

> Accessing this property in the case of a `nil` value is a serious programming error and could lead to undefined behavior or a runtime error.
> 
> (YOCKOW拙訳)
> `nil`の場合にこのプロパティへアクセスすることは深刻なプログラミングエラーであり、未定義動作やランタイムエラーをもたらすであろう😈

と書いてあります。
即ち「絶対に`nil`でないことが保証されている値をアンラップする」場合で「少しでも速度を向上したいという要求」がある場合に限って使用しましょう。そんな場合があるのかどうかは分かりませんが。
GoogleAppsScriptでファイルを編集可能権限で共有

共有範囲は「リンクを知っている人全員」

```
function sharing(sharing_file_id) {
  var document = DriveApp.getFileById(sharing_file_id);
  var access;
  var permission;

access = DriveApp.Access.ANYONE_WITH_LINK;
permission = DriveApp.Permission.EDIT;
document.setSharing(access, permission);
}
```
React で SVGアイコン を扱う

# React で SVGアイコン を扱う

## コンポーネントとして扱う

Reactだとsvgは `ReactComponent` で表現できる

```Spinner.tsx

import { ReactComponent as Icon }  from 'spinner.svg'

const Spinner: React.FC<Props> = ({ fill, stroke }) => {
  return (
    <Icon fill={fill} stroke={stroke} />
  )
}
export default Spinner
```

## ライブラリーで操作 react-svg

`react-svg` で svgを簡単に扱うこともできる
https://github.com/tanem/react-svg


![スクリーンショット 2021-04-01 11.04.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115192/751026f0-5ad0-67b7-88f1-6bea5ec231bf.png)


色とサイズの変更はオプションからはできないので、
`beforeInjection`を使用してプロパティを変更する


```Icon.tsx

import React from 'react'
import { ReactSVG } from 'react-svg'

interface Props {
  imagePath: string
  color: string
  size?: number
}

const Icon: React.FC<Props> = ({ imagePath, size, color }) => {
  return (
    <ReactSVG
      src={imagePath}
      className="svg"
      beforeInjection={(svg) => {
        svg.setAttribute(
          'style',
          `color: ${color}; width: ${size}; height: ${size};`
        )
      }}
    />
  )
}
export default Icon
```
大量のレコードがある場合の一覧画面用のデータ取得方法

## やりたいこと
　数十万件のレコードがあるテーブルからレコードを取得して一覧画面に表示したい。
　一覧画面は各ページで100件ずつレコードを表示したい。

## やったらダメなこと
　一度にテーブルの全てのレコードを取得すること。
　以下は約５万件のレコードのあるテーブルに対して実行。

```ruby
# usersテーブルから全てのレコードを取得してページごとに100件ずつ配列にする
@users = Kaminari.paginate_array(User.all).page(params[:page]).per(100)
User Load (64.2ms) SELECT `users`.* FROM `users`
Completed 200 OK in 11382ms (Views: 613.2ms | ActiveRecord: 80.2ms)
```
 

## できたこと
　ページごとに表示する分だけのレコードを取得する。
　上記と同じく、以下は約５万件のレコードのあるテーブルに対して実行。

```ruby
@users = User.page(params[:page])
User Load (0.5ms) SELECT `users`.* FROM `users` LIMIT 100 OFFSET 0
Completed 200 OK in 807ms (Views: 622.8ms | ActiveRecord: 27.2ms)
```

　取得にかかる時間には雲泥の差があった。

## 参考
https://qiita.com/nysalor/items/77b9d6bc5baa41ea01f3
CSSでの要素の境界線

# 境界線の要素
border,margin,paddingを使う

## borderの記述の仕方
border: 太さ スタイル 色;
と記述する。
(例)
border: 1px solid white;
👉太さ1px、1本線、白い線を引くことになります。

## paddingの記述
paddingは上下左右4方向に指定できます。

- padding: 1px; [上下左右]の内側の余白をまとめて1pxに指定
- padding: 1px 1px; [上下][左右]の内側の余白をそれぞれ1pxに指定
- padding: 1px 1px 1px; [上][左右][下]の内側の余白をそれぞれ1pxに指定
- padding: 1px 1px 1px 1px; [上][右][下][左]の内側の余白をそれぞれ1pxに指定

## marginで余白作る方法
paddingと同様にmarginも上下左右4方向に指定できます。

- margin: 1px; [上下左右]の内側の余白をまとめて1pxに指定
- margin: 1px 1px; [上下][左右]の内側の余白をそれぞれ1pxに指定
- margin: 1px 1px 1px; [上][左右][下]の内側の余白をそれぞれ1pxに指定
- margin: 1px 1px 1px 1px; [上][右][下][左]の内側の余白をそれぞれ1pxに指定

margin-top、margin-bottom、margin-left、margin-rightを用いることで、各一方向のみの指定が可能
LetsEncrypt の自動更新時に webroot が未設定で更新できてない場合の対処

# 問題

手動で certbot の webroot を設定した場合、自動更新の時期になると以下のようなメッセージが出てきて、`certbot renew` が走っているにも関わらず証明書が更新されていないことがある。

> Failed to renew certificate www.example.com with error: Missing command line flag or config entry for this setting:
Input the webroot for www.example.com:

この対処方法を良く忘れるのでメモ

# 対処

`/etc/letsencrypt/renewal/` 以下に証明書ごとに対応した設定ファイルが作られる。
ここで ``[[webroot_map]]` セクションを追加する。 一つの証明書で複数のドメインに対処している場合は複数行書けばOK。

```conf
[[webroot_map]]
example.com = <<設定したWebrootの場所>>
www.example.com = <<設定したWebrootの場所>>
```
2021年Javascriptフレームワークを選んだ経験を書いてみました

# この分析をした理由

今現在一番人気を集めているJSフレームワークはAngular、React、VueJsと言っても共感してくれる方が多いと思います。

プロジェクトを立ち上げる時、どちらを選んだ方がいいかと言うとそれはそれぞれのニーズや目標、確保している人材の才能などにもよりますね。

その判断をもっとしやすくする為に、この文章が作られました。

どっちが一番いいかではなく、自分にとってどっちが一番相応しいかを判断する時に参考にしていただけたらと思います。

# 判断基準

プロジェクトの視点から下記のいくつかの基準で比較しようかと思います。

- 人気度
- 学習の難易度
- 安定性＆更新頻度
- 資料の豊かさ
- 関連プラグインの豊かさ

# 人気度に関して

2020年11月時点で、Githubでのスター数
![github-stars-for-frontend.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193050/30ceeaac-af01-40ef-f36c-ef3cdf92db0b.png)


# 学習の難易度と傾向

## Angular 
学習が結構難しい
世界的には人気が減ってゆく傾向

## Vue 
アジア特に中国や日本では人気
学習コストが軽い
Vue3になってから結構変化が大きい（Vue2と比べ）

## React 
世界的には一番使われている感じ
学習コストは中ぐらい

#お薦めフロントエンドは

正解はないですが、プロジェクトによると判断されました。

どちらも優秀でメリットデメリットがあるなか、やはり開発要員の経験値や、プロジェクトの予算、そしてプロジェクトエンドユーザーの好みなどが全て影響を与えることになりますね。

場合によっては、どっちがいいか悪いかではなく、過去の成功経験によって、選び続ける場合もございますので、一意した標準はない感じでした。

ちなみに自分のプロジェクトではAngularを使うことになりましたが、やはり最初は使い方を勉強するのに結構時間がかかった感じです。

# 参考資料（リンク集)

公式サイト
[VueJs](https://vuejs.org/)
[React](https://reactjs.org/)
[AngularJs](https://angularjs.org/)


英語資料
[FrontendFrameworksPopularity.md](https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190)
[2020 JavaScript Rising Stars](https://risingstars.js.org/2020/en)
[Best Frontend Frameworks of 2021 for Web Development](https://www.simform.com/best-frontend-frameworks/)
[Comparing the Best Front End Frameworks in 2021](https://www.spaceotechnologies.com/front-end-frameworks/)

日本語資料
[2021年のトップJavaScriptフレームワークと技術動向](https://ichi.pro/2021-nen-no-toppu-javascript-fure-mu-wa-ku-to-gijutsu-doko-238366649735785)
[フロントエンドのデベロッパーが2021年に向けてチェックしておきたいこと](https://coliss.com/articles/build-websites/operation/work/front-end-developers-should-learn-in-2021.html)
[2020年版　Web開発フレームワークのベスト10（フロントエンド・バックエンド）](https://kaopiz.com/ja-news-best-10-web-framework-2020/)

韓国語資料
[2021년 #프론트엔드 언어 트랜드 분석 (with Google Trends)](https://simuing.tistory.com/entry/2021%EB%85%84-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%96%B8%EC%96%B4-%ED%8A%B8%EB%9E%9C%EB%93%9C-%EB%B6%84%EC%84%9D-with-Google-Trends)
[2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 1](https://d2.naver.com/helloworld/7226235)
[2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 2](https://d2.naver.com/helloworld/6951656)

中国語資料
[2021 年前端开发的下一步发展预测](https://www.infoq.cn/article/d1h5adlibwkagzcrbftj)
[寻找2021年最好的前端工具](https://tech-zh.netlify.app/articles/zh-cn516306/)
Googleフォームの投稿をGoogleAppsScriptで取得

```
function submitForm(e){

  // フォームのデータを格納する変数を初期化
  let name = "";
  let name_Alphabet = "";
  let twitter_id = "";
  let other = "";
  
  var itemResponses = e.response.getItemResponses();
  
  for (var i = 0; i < itemResponses.length; i++) {
    
    var itemResponse = itemResponses[i];

    // 設問タイトルを取得
    var question = itemResponse.getItem().getTitle();

    switch(question){

      // 設問タイトルが「名前」であればその回答を取得  
      case "名前":
        name = itemResponse.getResponse();
        break;
      case "Name":
        name_Alphabet = itemResponse.getResponse();
        break;
      case "Twitter ID":
        twitter_id = itemResponse.getResponse();
        break;
      case "その他":
        other = itemResponse.getResponse();
        break;
      default:
        break;
    }
    
  }
  console.log(name);
  console.log(name_Alphabet);
  console.log(twitter_id );
  console.log(other);
}
```
Context#getDisplayでクラッシュ

画面のサイズを取得するために以下の実装をしていたのですが、Android 6.0（Marshmallow）でクラッシュしていました。（Android 7.0ではクラッシュしなかった）

```kotlin
val displayMetrics = DisplayMetrics().apply {
    // ここでクラッシュ
    context.display?.getRealMetrics(this)
}
```

[developers](https://developer.android.com/reference/android/view/WindowManager?authuser=1#getDefaultDisplay()) によると、API Level 30（Android10）から`Context#getDisplay`を使って下さいとのことだったので、API Level 30未満の処理を追加しました。

```kotlin
// API Level 30未満の処理
val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
windowManager.defaultDisplay.getRealMetrics(this)
```

`WindowManager#getDefaultDisplay`はAPI Level 30から非推奨になります。

以下、全体の実装です。

```kotlin
val displayMetrics = DisplayMetrics().apply {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
        context.display?.getRealMetrics(this)
    } else {
        val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
        windowManager.defaultDisplay.getRealMetrics(this)
    }
}
```
[Linux]tmuxのメモ

業務で見慣れないtmuxコマンドを見かけたので何これと思って調べた。
「ティーマックス」と読むらしい。

**対象のサーバーにSSHログインして作業したい & 踏み台サーバーがある** 場合に、
当該ツールを使うことで**不意なネットワーク切断(Wifi切れたとか、ローカル - 踏み台間のネットワーク障害)に対応できる模様**。

ネットワーク切断に対する対抗手段って、コマンドをバックグラウンド実行するくらいしかない

```
nohup <実行したいコマンド> >/dev/null 2>&1 </dev/null &
```
と思ってたのでこんな方法もあるんだ・・・と思ってびっくり。

ざっくりとした 利用手順

```
1. 踏み台サーバーへSSHログイン
2. セッションを作成 + 当該セッションへ接続 (tmux new -s <任意のセッション名>)
3. セッション上で踏み台サーバーから対象サーバーへのSSHログイン(を伴う作業)
4. セッションから抜ける (セッション上で　Ctrl + b → d)
5. セッションへ再接続 (tmux a -t <セッション名>)
```

その他コマンド

```
# セッション一覧を表示
tmux ls

# 接続中のセッションを終了させる
exit
```

# 参考
[tmuxを使い始めたので基本的な機能の使い方とかを整理してみた](http://kanjuku-tomato.blogspot.com/2014/02/tmux.html)
Amazonコンテナサービス

#はじめに
こちらではAWS機能について書いていきたいと思います。
公式ドキュメントやAWS認定試験（ソリューションアーキテクトやDevOpsなど）の勉強教材など細かい内容をかかず、ざっくりとした内容で。
試験などに興味はないし！公式ドキュメントなど長ったらしくて読めん！
という方に向けに作っていきたいと思います。
(私の備忘録も兼ねて)

写真はつけられればつけます。(Qiitaの制限の範囲内で)

#環境
AWS

#ドキュメント
https://docs.aws.amazon.com/index.html
https://docs.aws.amazon.com

##Amazonコンテナサービス
・レジストリ(コンテナエンジンに実行されるイメージが保管される場所)
Amazon ECR 
・コントロールプレーン(コンテナを配信するサービス)
Amazon ECS
Amazon EKS
・データプレーン(コンテナが実行される環境)
AWS Fargate

###ユースケース
環境構築を自動化しつつ、CI/CDを実行したい場合はDockerを利用する。
[Python]Cerberusを用いたバリデーションの作り方と、外部ライブラリの導入

#書くこと
Pythonのオープンソースライブラリとして利用可能な、Cerberusを用いたバリデーション機能の実装の方法。

公式ドキュメント:https://docs.python-cerberus.org/en/stable/index.html
github: https://github.com/pyeve/cerberus

##環境
Python 3.6.5

##導入
まずは、導入を行っていきます。

###インストール

Cerberus（ケルベロス）は、外部ライブラリに属します。
なのでまずは、pipコマンドでcerberusをインストールしていきます。

```
pip install cerberus
```
ちなみに、
####pipコマンドは

>外部ライブラリをインストールするために主に用いられるコマンドです。

####外部ライブラリとは
先人たちの知恵が詰まったコードの宝庫である
[The Python Package Index (PyPI) ](https://pypi.org/)
のことです。

###import
次に、インストールしたライブラリは、ソースコード内で`import(輸入)`してあげる必要があります。
本題に入る前に礼を示します。例えば、**元々組み込まれているライブラリの中から、`random`**を輸入する時はこのように記述します。

```random.py
#randomライブラリをimport
import random

#randomライブラリの"randint"メソッドを利用
random_number = random.randint(0,2)
```

####これが外部ライブラリになっても、基本は同じです。

今回のCerberusからは、`Validatorクラス`をインポートしたいと思います。クラスのインポートには、`from ライブラリ名　import クラス名`と記述します。

```validate.py
#インストールしたcerberusライブラリから、Validatorクラスをimport
from cerberus import Validator
```

これで、導入は終了です。

##実際の利用
ここまでで、Cerberusの導入が終了しました。

ここからは一番基本的な書き方と、実際に利用した例を述べていきます。

###基本の書き方

```validate.py
from cerberus import Validator

#例として、"name"は文字列でなければならないというバリデーションを作成します。
schema = {'name': {'type': 'string'}}
#importしたValidatorクラスのインスタンスvを生成し、バリデーションの情報を詰め込みます。
v = Validator(schema)

#試しに"name": "john doe"でTrueになるか確かめてみます。
document = {'name': 'john doe'}
#この記法で、documentがバリデーションの条件を満たしているかの判断をTrue or Falseで返します。
v.validate(document)
#→ True
```
pythonではdictと呼ばれる`key: value`の形でバリデーションを作成することができます。

文字列だけでなく、空白や真偽値を確かめることもできます。
詳しくは、以下の記事をご覧ください。

- [Welcome to Cerberus](https://docs.python-cerberus.org/en/stable/install.html)
- [Pythonのバリデーションライブラリ「Cerberus」のよく使うバリデーションルールをまとめてみた](https://dev.classmethod.jp/articles/python-cerberus-often-use/)

###名前を必ず入力させる仕組みを作成
名前を入力させる際に、空欄を許可しないバリデーションを作成しました。

```validate.py
from cerberus import Validator

#バリデーションを作成
name_rule = {
  "name": {
    "empty": False
  }
}
#Validatorクラスより、name_ruleの情報が入ったインスタンスを生成
v = Validator(name_rule)

#名前を入力
your_name = input()

#your_nameが空である限り、処理を続ける。
while v.validate({"name": your_name}) == False:
    print("名前を入力してください")
    your_name = input()

print(your_name + "さん、ようこそ！")
```

このようにして、バリデーションの機能を利用して、必ず名前を入力させる仕組みを作成することができました。

#最後に
最後まで読んでいただき、ありがとうございます。
ソースコード、記事の書き方について「もっとこうしたほうがいいよ！」というご意見、「そこどうなっているの？」というご質問など、お待ちしております。

##参考文献
- [Welcome to Cerberus](https://docs.python-cerberus.org/en/stable/install.html)
- [pyeve
/
cerberus](https://github.com/pyeve/cerberus)
- [【Python】そもそもライブラリとは？ ライブラリ管理のpipとは？](https://qiita.com/_whitecat_22/items/3df18491c5f618c016d1)
- [Pythonのバリデーションライブラリ「Cerberus」のよく使うバリデーションルールをまとめてみた](https://dev.classmethod.jp/articles/python-cerberus-often-use/)
システム開発のあれこれ

コンピュータの成り立ちとか、基礎とか理解できればこれから先どんなことをやるにしても理解が早いのではないかと思い勉強を始めました。
[キタミ式イラストIT塾 基本情報技術者](https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88IT%E5%A1%BE-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E4%BB%A4%E5%92%8C03%E5%B9%B4-%E3%81%8D%E3%81%9F%E3%81%BF%E3%82%8A%E3%82%85%E3%81%86%E3%81%98/dp/4297117819)で勉強させていただいております。

まとめます！

## システム開発の流れ

ありがたいことに案件に携わることができていますが(ちなみに私は何もしていないが)
初めて聞く用語ばかりで先輩たちの発していた言葉をメモしてググりながら過ごしています。
ビックリしたのは想像していたよりも多くのことを細かく細かく決め、いろいろなフェーズがあるということ。

確かにしっかり認識合わせをしないと作って欲しかったものと違うものが出来上がってしまいますもんね。
オムライスを作って欲しかったのに「卵で包んだ食べ物を作ってください」だけ伝えたらオムレツができちゃうみたいな。
しっかり「中にご飯が入っていて、それはこういう味付けで、それを卵でこういう形に包んだ食べ物を作ってください」と伝えて写真を見せて、作る前に確認してOKがもらえたら作り始めてってやっていけばオムレツが出てくることはないですもんね。

本を読んで認識を深めることができましたー。


#### ソフトウェアライフサイクル

```
企画→要件定義→開発→運用→保守
```

システムの一生は大まかにこの流れで、運用のフェーズで修正が入ったり保守でメンテナンスを繰り返しながら働きます。


#### 調達

発注することを「調達」といいます。

①情報提供依頼書(RFI)
発注側が最新の技術の動向とか導入事例とかを開発担当に聞く。

②提案依頼書(RFP)
発注側が「こういう要件のものを考えてるから提案してくれ」と開発担当に聞く。
私が一番最初に聞いた知らない言葉はこのRFPでした。

③提案
開発担当が提案依頼書を元に提案をまとめて発注側に提示する。

④見積もり
提案がOKされたら予算を発注側に提示する。

⑤契約
ここでめでたく契約ができます。
なんかここまで頑張って契約に至らないこともあるのかなと思うと大変ですね。

## 開発プロセス

```
基本計画(要件定義)→システム設計→プログラミング→テスト→導入・運用
```

このような流れです。詳しく見ていきます。

①基本計画(要件定義)
求められる機能や性能を洗い出す。
実際に使う人へのヒアリングが重要。
所感ですがここが思っていたよりも何倍も細かく詰めているなーという印象です。

②システム設計
要件定義で洗い出した内容を具体的な画面や処理をどうするかなどシステムの仕様に落とし込む。
(1)外部設計
利用者が実際に使う部分の設計をする。
viewの仕様ですね。
トップ画面がどうとか項目は何が入るとかここのボタンを押したらどこに遷移するとか。
(2)内部設計
開発側の設計をする。
例えばログイン機能があって、そこにはどんな処理があって、どの処理とどの処理がつながっているとか。
(3)プログラム設計
プログラムをどう作るかを設計する。
モジュール同士のインターフェース仕様など。

③プログラミング
ここは分かりやすい。
ソースコードを書いていく作業ですね。

④テスト
単体テスト、結合テスト、システムテスト、運用テストをしていきます。
システムテストと運用テストの内容が被っちゃうんですけど、システムテストはシステム全体を稼働させて動作確認や負荷試験をして外部設計通りに動くかを確認し、運用テストは実際の運用と同じ条件下で要件定義が満たされているかをチェックします。
ちなみに私は何故かテストコードが大好きです。


以上です。
「最初は先輩達の言葉が全然理解できないよ」っていうTwitterやQiitaの情報は間違っていませんでした。
SwiftUIのContentClosureに定義出来るViewの数を増やす

SwiftUIが提供する各種ViewのContentClosure引数内には定義出来るViewの数が決まっており、最大で10個のViewを配置することが出来ます。

```swift
struct ContentView: View {
    var body: some View {
        HStack {
            Text("1")
            Text("2")
            Text("3")
            Text("4")
            Text("5")
            Text("6")
            Text("7")
            Text("8")
            Text("9")
            Text("10")
        }
    }
}
```

多くのケースでは10個も配置出来れば十分なのですが、稀に11個以上のViewを配置したいケースも出てきますがこれはコンパイルエラーとなります。

```swift
struct ContentView: View {
    var body: some View {
        HStack {
            Text("1")
            Text("2")
            Text("3")
            Text("4")
            Text("5")
            Text("6")
            Text("7")
            Text("8")
            Text("9")
            Text("10")
            Text("11") // `Extra argument in call` というコンパイルエラーになる
        }
    }
}
```

なぜこのようなコンパイルエラーが発生するのかというとSwiftUIのContentClosureに複数のViewを配置した場合の実態は`TupleView`となり、
Tuple内に定義出来るViewの数がデフォルトでは10個までしか定義されていないためです。

```swift
/**
以下のようにTuple内に配置出来るViewの数毎のI/Fが定義されており、これの最大数が10個となっています。
*/

extension ViewBuilder {
    public static func buildBlock<C0, C1>(_ c0: C0, _ c1: C1) -> TupleView<(C0, C1)> where C0 : View, C1 : View
}

extension ViewBuilder {
    public static func buildBlock<C0, C1, C2>(_ c0: C0, _ c1: C1, _ c2: C2) -> TupleView<(C0, C1, C2)> where C0 : View, C1 : View, C2 : View
}
```

型定義を見るとViewBuilderを拡張しているだけなので、より多くのViewを配置したい場合は独自にViewBuilderの型定義を追加すれば良いです。

```swift
/**
以下の要領で必要な数を内包するTupleViewを定義していけば良い。
*/

extension ViewBuilder {
    static func buildBlock<C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10> (_ c0: C0, _ c1: C1, _ c2: C2, _ c3: C3, _ c4: C4, _ c5: C5, _ c6: C6, _ c7: C7, _ c8: C8, _ c9: C9, _ c10: C10) -> TupleView<(C0, C1, C2, C3, C4, C5, C6, C7, C8, C9, C10)> where C0: View, C1: View, C2: View, C3: View, C4: View, C5: View, C6: View, C7: View, C8: View, C9: View, C10: View {
        TupleView((c0, c1, c2, c3, c4, c5, c6, c7, c8, c9, c10))
    }
}

struct ContentView: View {
    var body: some View {
        HStack {
            Text("1")
            Text("2")
            Text("3")
            Text("4")
            Text("5")
            Text("6")
            Text("7")
            Text("8")
            Text("9")
            Text("10")
            Text("11") // 上で11個を内包するTupleViewが定義されたので、ここでコンパイルエラーが発生しなくなる
        }
    }
}
```
Amazon Lightsail

#はじめに
こちらではAWS機能について書いていきたいと思います。
公式ドキュメントやAWS認定試験（ソリューションアーキテクトやDevOpsなど）の勉強教材など細かい内容をかかず、ざっくりとした内容で。
試験などに興味はないし！公式ドキュメントなど長ったらしくて読めん！
という方に向けに作っていきたいと思います。
(私の備忘録も兼ねて)

写真はつけられればつけます。(Qiitaの制限の範囲内で)

#環境
AWS

#ドキュメント
https://docs.aws.amazon.com/index.html
https://docs.aws.amazon.com

#Amazon Lightsail
秒単位で簡易にWebサーバ構成を実現することができるサービスフルセットを提供するVPSサービス
・簡易的に小規模のアプリケーションやWEBサイトを構築するために利用するVPSを立ち上げる
・サーバ/ストレージ/ネットワーク/スナップショット、ロードバランサー機能、ファイアウォール、DNS機能などがいくつもの機能が予め揃ったオールインワンで利用することが可能

###ユースケース
・シンプルなWEBサイトを構築する
・小規模なアプリケーションを構築する
・テスト・開発環境で一時的に利用する
・社内ツールや小規模なビジネス用ソフトウェアを起動する際に利用する
・スモールスタートでアプリ開発を実施する際に利用する
・性能に応じたプランから選択可能
django.db の InconsistentMigrationHistory例外に遭遇した時の対処

# InconsistentMigrationHistoryとは？

* DB内の依存関係が原因で、整合のとれたマイグレーションができなくなる
例外のよう。
* エラーメッセージは、例えば以下のように表示されます。

```
django.db.migrations.exceptions.InconsistentMigrationHistory: 
Migration example_django.0001_initial is applied before its dependency sample_app.0001_initial on database 'default'.
```

# どう対処しようか？

* 私の場合は、settings.py の INSTALLED_APP を一時的に修正し、
マイグレーション実行後に元に戻す、という対処で解決できました。

## settings.pyを一時修正

``` python
INSTALLED_APPS = [
    ...
    # 'example_django',  ←例外が発生した部分を一時的にコメントアウト
    ...
]
```

## マイグレーションを実行

``` bash
$ python manage.py makemigrations
$ python manage.py migrate
```

## settings.py を復元

* コメントアウトした 'example_django' の行を元に戻します。

## マイグレーションを再実施

* これで整合がとれたマイグレーションができるようです。


* 今回は [こちらのサイト](https://hodalog.com/repair-migration-error-by-social-auth-app-django/)を参考にさせていただきました。
* この対応でなぜ解決したのか、まだ「？」な部分も多いです。またわかったら追記していきたいと思います。
初投稿

## 自己紹介
- SEや研究開発っぽいことをやっています。
- pythonを用いた開発が主ですが、組み込み関連を一時期やっていたこともあり、C/C++も多少触れます
- クラウド関連はAWS
- データベースはPostgreSQLとOracleを少々
- 最近は機械学習やコンテナ関連の技術に興味を持って取り組んでます

## 投稿目的
- 学習のアウトプット
  - これまでインプットばかりでちゃんと定着している気がしないので 
- 学習モチベーションの向上
  - 内容に誤り等がありましたらどしどし意見いただけると嬉しいです

## 意気込み
興味が雑食的で技術的な一貫性がなくなってしまう可能性がありますが、なるべく目的をもって取り組みたいと思っています
アウトプットが主目的ですが、誰かの役に立ったり、意見交換ができると嬉しいですのでよろしくお願いします。
GoogleAppsScriptでファイルのコピー＆任意の場所に配置


GASでファイルコピー＆任意のフォルダに格納＆格納した新規ファイルのID取得まで

    //コピーするファイルを保存するディレクトリを指定
    let copy_dir = DriveApp.getFolderById("フォルダIDを記入");

    //コピーするファイルを取得
    let Original_data = DriveApp.getFileById("コピー元のファイルのID");

    //コピーしたファイルに付ける名前
    let copy_file_name  = "好きな名前"; 

    //指定したディレクトリにファイルをコピー
    // 引数（コピーしたファイルにつける名前, コピーしたファイルを置くディレクトリ）
    let newfile = Original_data.makeCopy(copy_file_name, copy_dir);

    //コピーしたファイルのIDを取得
    let id_copy_file = newfile.getId();
配列を利用したrubyプログラムの作成

## 初めに
初学者です。rubyの練習問題を私なりに解説することによって定着するのが目的です。間違いありましたらご指摘お願いします。
#### 問題
以下の配列から数を探して何番目に含まれているか結果を返すsearchメソッドをeach_with_indexを用いて作成してください。

```
input = [3, 5, 9 ,12, 15, 21, 29, 35, 42, 51, 62, 78, 81, 87, 92, 93]
```

searchメソッドの使用例

```
（使用例）

search(12, input)
=> 4番目にあります

search(7, input)
=> その数は含まれていません
```

#### 用語の解説
####each_with_index
each_with_indexとはrubyに標準で組み込まれているメソッド。要素の繰り返しと処理と同時にその要素が何番目に処理されたのかも表すことができます。
eachメソッドと似てますよね。書き方もeachメソッドとほとんど同じです。
例

```
配列名.each_with_index do|item,i|
end
```
each文と違うところはブロック変数の中に変数が２つ定義されている点です。この場合、itemが配列の中身、iがその配列の何番目に処理されたかが入ります。

####問題の解説
ではまずsearchメソッドの呼び出す際の処理から入っていきます。まずは配列inputを定義します。次にsearchメソッドを呼び出す際に２つの変数を定義して実引数としてセットします。

```
input = [3, 5, 9 ,12, 15, 21, 29, 35, 42, 51, 62, 78, 81, 87, 92, 93]
search(12, input)
```
では、引数をsearchメソッドに引き渡し、each_with_indexで配列の中身と順番を受け取る変数をブロック変数の中に定義します。

```
def search(target_num, input)
  input.each_with_index do |num, index|
end
input = [3, 5, 9 ,12, 15, 21, 29, 35, 42, 51, 62, 78, 81, 87, 92, 93]
search(12, input)
```
ここで一旦整理します。現状searchしたい整数は12です。そして12が配列の何番目にあるのか,もしくはないのかをsearchメソッドを使用して検証します。
では12であるかどうかを検証するには、if文を使い12の時だけ処理をするような記述を書けばいいのです。
配列の中身は変数numに順番に呼び出されます。そして変数target_numの中身は12です。
よって、if num == target_numと記述することによって12の時に処理をすることができます。さらにindexには繰り返された数が入っています。よってindexを出力する記述を書けばいいのです。

```
def search(target_num, input)

  input.each_with_index do |num, index|
    if num == target_num
      puts "#{index + 1}番目にあります"
      return
    end
  end
  puts "その数は含まれていません"
end

input = [3, 5, 9 ,12, 15, 21, 29, 35, 42, 51, 62, 78, 81, 87, 92, 93]
search(12, input)
```

上記の記述で4番目にあります。と結果がでます。
注意としてindexに+1をしています。これは配列は0から数えられるためです。
また,returnを忘れると要素の数だけ処理を行っていますのでそこも注意が必要です。
書評：VMware vSphere7 インテグレーションガイドを読んで

#きっかけ
ある日、vSphere 7に関する本が社内の本棚に追加されました。その中の1冊がこちら

今井 悟志著『[VMware vSphere7 インテグレーションガイド](https://www.amazon.co.jp/dp/429501107X)』

個人的に気になっていた本を、嬉しいことに社内で1番目に読む機会をいただいたので、本書の書評を書いてみました。

#どんな本か
本書は、仮想化技術やvSphereに初めて触れる方や、vSphereの構築をしたことがあっても要件定義面はあまりやったことがない方、VMware社製品体系について詳しくない方向けに、vSphereに関する多くの情報を盛り込んだ解説書です。（と私は感じました）
そのことについては、”はじめに”でも
>本書がVMware vSphereの専門書としての初めの一歩の道しるべになれば幸いです。

と触れられています。
解説書の意味合いが強いので手を動かす機会はあまりなく、電車バスの移動中でも難なく読めると思います。（単行本だとかさばる厚さですが）

#対象読者層
以下の方に向いている書籍だと思いました。
○vSphereに初めて触れる方
○VMware製品について広く浅く知りたい方
○ESXi、vCenter Serverを初めて構築する方
○vSphereを用いたオンプレ環境の要件定義を担当することになった方

逆に、以下の方には向いていないかもしれないと思いました。
×vSphereを既に現場で構築した経験がある方
×クラウド基盤でvSphereを用いようと考えている方
×詳細設計などで、辞書的に使おうと考えている方

#本書の構成
各章が独立しており、目次から自分が一番知りたいところをピンポイントで学べ、時間がない方に優しい構成になっています。

以下目次の引用です。
Chapter 1 仮想化とは
Chapter 2 vSphere 7の基礎知識
Chapter 3 環境を作る準備
Chapter 4 vSphere 7の新規スタートアップ
Chapter 5 vSphere 7へのアップグレード
Chapter 6 vSphere 7の管理
Chapter 7 vSphere 7環境デザインのポイント
Chapter 8 クラウドの活用
Chapter 9 vSphere 7のマイグレーション
Chapter 10 vSphere 7の運用
Chapter 11 バックアップ/リカバリと災害対策
Chapter 12 vSphere 7の他の製品群
Chapter 13 vSphere 7ラボ環境を作る

この内、実際に手を動かしてインストールや設定を行うのは、Chapter 4, 6辺りでその他は技術や製品の解説がメインです。

#各章の概要と感想
各Chapterの感想を述べます。

Chapter 1 仮想化とは
vSphereから一歩離れて、仮想化技術についてが書かれています。工学部チックで苦手な人には読みにくいかもしれません。

Chapter 2 vSphere 7の基礎知識
題名の通りvSphere周りの基礎知識の解説が書かれています。VMware製品の略語や機能についてが一通り学べます。普段vSphere製品に触っている方でも、vSphere 7で新たに追加された機能など新しい学びがあると思います。

Chapter 3 環境を作る準備
インストールの前に必要となる、ハードウェアやライセンスの選定に関する記述があります。普段、調達をやられない方ですと、意識してない面を知ることができます。

Chapter 4 vSphere 7の新規スタートアップ
ESXiとvCenter Serverを実際にインストールします。スクリーンショットが多く掲載されているので、初心者でも難なくインストールできると思います。

Chapter 5 vSphere 7へのアップグレード
こちらは実際にアップグレードを行うわけではなく、アップグレードを行うにあたって考慮すべき事項が書かれています。こちらも、構築メインで運用フェーズをやられていない方は参考になると思います。

Chapter 6 vSphere 7の管理
タグやアラーム、スケジュールなどのvCenter Serverの主要な機能の解説があります。

Chapter 7 vSphere 7環境デザインのポイント
アーキテクトな話がメインで、それをvSphereの機能でどう実現するかが書かれています。特に、仮想ゲストや仮想スイッチ、ストレージの冗長化の話は面白かったです。

Chapter 8 クラウドの活用
最近のXaaSの話題や、オンプレとクラウドの比較の話が書かれています。こちらも要件定義チックな話がメインです。

Chapter 9 vSphere 7のマイグレーション
仮想ゲストの移行にかかる話です。オンプレやクラウド間の移行にも言及しています。VMware社さんがかなり柔軟に移行方法を用意してくれていることが学べます。

Chapter 10 vSphere 7の運用
監視やユースケースの話が簡単に書いてあります。監視に使えるVMware製品名がさらっと書いてありますが、その操作画面のキャプチャなどがなく、少し残念です。

Chapter 11 バックアップ/リカバリと災害対策
災害時、障害時のための設計に関する話が書いてあります。図が多いのでイメージがしやすいです。

Chapter 12 vSphere 7の他の製品群
書籍では紹介しきれなかったVMware社製品の体系が学べます。運用系、NSX、Tanzuやトレーニングコースについて書かれています。製品名は知っていたけれど、どういう時に使う製品だったか知らないものもあり、勉強になりました。

Chapter 13 vSphere 7ラボ環境を作る
ESXiのカスタムイメージの話や、Raspberry Pi 4にESXiをインストールする話が書かれています。

#まとめ
いかがだったでしょうか。本記事がVMware vSphere7 インテグレーションガイド購入の参考になりましたら幸いです。
現在vSphere 7 U2が登場しており、本書で紹介されているよりも機能が豊かになっています。一方で、vSphere 7に関する和書はあまり充実しておりません。
まずは、VMware vSphere7 インテグレーションガイドを読了し、次に出る、中上級者向けの参考書を待つのがよいかもしれません。

#書籍URL
出版元リンク
https://book.impress.co.jp/books/1120101062

Amazon リンク
[VMware vSphere7 インテグレーションガイド](https://www.amazon.co.jp/dp/429501107X)

##備考
なお、弊社Webサイトでは各種技術系記事を投稿しております。
[ITdo!/技術情報/いけふち](http://c.itdo.jp/author/ikefuchi/)
CSSの横並びのやり方

# displayで横並び

- display: block;  指定された要素は、ブロックレベル要素として表示
- display: inline; 指定された要素は、インライン要素として表示
- display: inline-block; 指定された要素は、並びはインライン要素だが、中身はブロックレベル要素として表示
- display: flex; 指定された要素の子要素が横並び
- display: none; 指定された要素は、非表示

# justify-contentの使い方

- justify-content: flex-start; 左寄せ
- justify-content: flex-end;  右寄せ
- justify-content: center; 中央寄せ
- justify-content: space-between;  両端が左右に寄り、等間隔
- justify-content: space-around; 両端が左右に寄り、等間隔、両端の余白と要素間の余白が1:2

# align-items

align-items: ◯◯;といった形で表記し、display: flex;と併せて使用
(例)
- align-items: flex-start; 上揃え
- align-items: flex-end; 下揃え
- align-items: center; 中央揃え

# flex-direction

- flex-direction: row; 左から右に並べる
- flex-direction: row-reverse; 右から左に並べる
- flex-direction: column; 上から下に並べる
- flex-direction: column-reverse; 下から上に並べる
35年目の化石プログラマが新人プログラマの皆様に送る言葉

#0. 自分の背景

BASIC 習得から数えて今年 35 年目の化石（じじい？）プログラマです。
物理学の修士を取ってから、全く関係ないコンピュータ業界に就職しました。
プログラムばっかり組んでいたので、会社では出世しませんでした（笑）。
2年前からフリーランスで仕事を請け負っています。
今の自分から見て、もし新人の自分に声をかけるとしたらどうするか、と言う視点で書いてみました。

|目次|
|---|
|[1.基礎はしっかり勉強しよう](#1基礎はしっかり勉強しよう)|
|[2.コードの粒度とコメントの残し方](#2コードの粒度とコメントの残し方)|
|[3.他の人のプログラムを読んで勉強しよう](#3他の人のプログラムを読んで勉強しよう)|
|[4.質の良い書籍をたくさん読もう](#4質の良い書籍をたくさん読もう)|
|[5.ともかくどんどん作ってみよう](#5ともかくどんどん作ってみよう)|

#1.基礎はしっかり勉強しよう

基本中の基本ですが... 言語仕様はしっかり押さえた方がよいです。
この段階では入門書で勉強し、概要をつかむのはありだと思います。

###データ構造、基本アルゴリズムを理解しよう

その上で、データ構造（リスト、ツリー、ハッシュ、...）＋アルゴリズム（ソート、サーチ、...）と言った基本的なデータの取り扱い方について、アルゴリズムの理解を図った方が役に立ちます。
最近のモダン言語はライブラリあるいは言語仕様としてこれらの構造を持っていますが、原理を理解するとどのような応用が可能で欠点が何か見極められるようになります。

###大学での数学をしっかり復習しよう

画像処理・音声処理、3Dや機械学習と言った分野では線形代数や差分方程式を通した微積の知識がないとライブラリを使うだけになってしまいます。仕事の80%はライブラリで対処できますが、クリエーティブな仕事請け負えるようにするためにも数学はしっかりと復習しておいた方が良いと思います。

###ステートマシンの知識は必須

特にイベントドリブンなプログラム構造を持つシステムの場合、肝はステートマシン管理だったりします。
ハードウェア屋さんは基本的にはムーアマシンをステートを管理しながら回すのが設計の基本なのでここら辺は徹底的に叩き込まれるようですが、最近はソフトウェアでもイベントドリブンな扱いが増えている気がします。
この場合、「想定していないステート」「未定義のステート」に落ちないようにすることが重要です。

###バックエンドで食べていくならSQLの知識は必須

SQLは非常に古い言語ですが、バックエンドは DB を使うことがほぼ確実なため、SQL の知識は必須です。
SQL は非常に複雑なクエリも書けますが、プログラマ側で線形探索に落ちないよう注意する必要があるちょっとやっかいな言語ですので、インデックスの張り方や正規化に注意する必要があります。

#2.コードの粒度と残し方

どんな言語でも基本的には関数、プロシージャ等が画面に収まるように書くのがよいと思います。
スクロールしないと全貌が見えないプログラムを書くと、3か月くらい後で見返したときに何をしようとしていたプログラムなのか見極めるのに苦労するになります。
そのためには、最初からリファクタリングしやすいプログラムを書くことです。
私は勝手に「ブロックコーディング」と呼んでいますが、関数やプロシージャの実装に必要な機能をコメントで先に書いておき、後でコメントに相当する機能を別の関数やプロシージャにしておくとコード再利用や読みやすさの点で利点があります。

コメントはうるさく書くと、書くのも読むのも疲れてしまいますが、関数やプロシージャの先頭にまとめて書いておくのが労力と見やすさを考えた場合の妥協点ではないかと思います。そういう意味では doxygen 風のコメント記述はバランスが優れていると思います。

##3.他の人のプログラムを読んで勉強しよう

良質なプログラムを読むことは大変勉強になります。Linux 使いの C 畑の方は是非 Kernel のソースコードに挑戦してほしいと思います。システムを動かす上でのテクニックやプロセス・スレッドディパッチの詳細を勉強することができます。
この他にも（やや長いが）ファイルシステムのコードも勉強になります。ファイルシステムの場合は inode に関する知識を先に習得しておいた方が読みやすいと思います。

##4.質の良い書籍をたくさん読もう

独特のクセがあることも多いのですが、その言語系を設計した人の書籍は設計思想が分かってためになります。
特に Ruby 作者のまつもとゆきひろ氏の一連の著作は一読をお勧めします。
インターネットで勉強しても良いのですが、どうしても断片的な知識になりがちで耳学問的になりがちなのが難点です。
もちろんいい所は合って、「あの機能を実現するにはどの関数、プロシージャを使うんだっけ？？」と言う場合にはインターネットが威力を発揮します。
しかし、システムをくみ上げようとした場合、体系的に解説されている成書の方が結局は早道である場合が多いように思います。

興隆しているコンピュータ言語はどうしても英語圏の香りが漂っているからなのか、基礎から記述している言語の解説書の良書は英語のものが多い印象です。今から活躍される若い人は英語でコミュニケーションをとることが頻出すると思われますので、挑戦してみては如何でしょうか。私が気に入っているのは O'Reilly の Head First シリーズです。やや厚い本ですが、かなり実力が付くと思います。l

##5.ともかくどんどん作ってみよう

プログラミングは技能なので、たくさん作ると上達する傾向を持っています。
「このシステムはここが不便だ」「こういう機能があったら便利なのに」という一種の「違和感」を大事にしてほしいと思います。もしシステムでそれが解決できるなら、手を挙げて自分で作ってしまおうという姿勢が大事だと思います。
アウトプットを意識すると、どのようなインプット（知識）が必要なのかも見えてきます。

皆様のご健闘を祈ります。