taisablog

taisa's engineer blog

関連記事

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月前まで JSとjQueryのみ 毎回ノリで書いていた(もちろんカオスにならないように最大限工夫はしてるけど) 流れが早いからモダン情報のキャッチアップはタイミングを見計らっている けど2017年中にはなんとかしたい やるなら一気にやりたい 始める前まではこんな感じだったけど、そろそろいってもいいかな?ということでやり始めた。 速習後 もともとは既存プロダクトをどうにかするつもりで始めていたけど、タイミングよく新規プロダクトを立ち上げることになったので採用した。何もしてなかったらかなり勇気が必要だったと思う。 ES6 React VueJS Webpack Babel PostCSS Go PHP(継続) 3ヶ月でやった事 JavaScript(ES5)を速習する ES6を速習する React(でSPAを)速習する マークアップを速習する Podcastで速習する 勉強会で速習する チームメンバーと速習する JavaScript(ES5)を速習する オライリー本で速習 JavaScriptパターン ―優れたアプリケーションのための作法 Amazonより 「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス」や他の本もいいけど個人的にはこの本がお薦め(発売時期がよい)。 ※デザインパターンの章は他に「JavaScriptデザインパターン」という書籍があるしここでは読み飛ばしてもよいと思う。 ES6を速習する WEB+DB PRESS Vol.87で速習 WEB+DB PRESS Vol.87 Amazonより 非常に分かりやすく端的に説明されていてとてもよい。 (こんなツイートも↓) 『JavaScript: The Good Parts』と『WEB+DB PRESS Vol.87 第1特集』のあわせて250ページ未満でES6までの全体像をつかむ速習コースのご提案 http://t.co/doPQ7V4enw http://t.co/NKTGz3syk7 — Takuto Wada (@t_wada) 2015年8月10日 React(でSPA)を速習する WEB+DB PRESS Vol.97 Amazonより React+Flux、クライアントサイドルーティング、サーバサイドレンダリング、webpackについて丁寧に説明されている。他にもマネジメントやPythonに関する内容があってとても読みごたえがある。 すぐに「理解できた」という訳にはいかない Reactはそれなりに初期学習コストがあるので以下のことを繰り返しながらじっくり理解を進めていった。 サンプルコードを動かす 本家サイトチェック ブログ記事チェック 今話題のReact.jsはどのようなWebアプリケーションに適しているか?(お薦め記事) サンプルコードを作る Web+DB PRESS見直す マークアップを速習する マークアップも一人でできるようになりたいというメンバーが多かったのもあり、社内のUI/UXデザイナーにハンズオンをしてもらった。このハンズオンの目的としては何から手をつけていいか分からないという状況から脱却して自分でもなんとか勉強できる状態にすることでこれだけでなんとかしようというものではない。 関連リンク – 初心者向けざっくりHTML/CSSコーディングハンズオン資料 – 社内エンジニア向けにマークアップハンズオンを開催しました その他の方法 Podcastで速習する 現場.fm 現場.fm というフロントエンドの現場について話すラジオを始めた 勉強会で速習する コミュニケーションしながら疑問点を解決してもらえたのでとても助かった。他にもReact、VueJS、Angular以外も含めたフレームワーク発表会をやったりした。またそれをうけてあたらめてReact、VueJS、Angularはいいなと実感した。 チームメンバーと速習する 今QはJSをやろうと全員で決めた(※この間業務でJS触る機会は0だった) 情報共有しやすい ここでもチームメンバーで分担してReact、VueJS、Angularを調べて発表会をした チームメンバーのJSに対する意識が全体的に変わって導入障壁が低くなった まとめ 業務でJS触る機会が0だったとしても3ヶ月あれば結構イケる 他にやりたいことができてもなるべく我慢してJSやるの大事 …

C言語初級者がMacのコンソールで実行可能なテトリスを作ってみた

C言語初級者がMacのコンソールで実行できるテトリスを作ってみました。参考にした動画はこちらです。テトリスについてはWikipediaも参考にしました。この投稿では作ってみた上で気になった箇所をピックアップして解説していきます。全ソースコードはこちらで確認できます。これについては、Youtubeにあげている方にも許可を頂いています。 テトリス – Wikipedia 日本では、 1988年にセガ・エンタープライゼス(後の セガ・インタラクティブ)から発売された アーケード版( セガ・システム16版)の人気により浸透した。当時はまだ操作法が確立されていなかったが、このシステム16版の登場以降は同作のものが日本国内における 事実上の標準となり、その影響力から特に「 セガテトリス」とよく呼ばれる( 2000年にアーケードと … 拙い動画でお恥ずかしいですが、どうぞご利用下さい。 — 館長 (@gamedokan) 2019年1月9日 まずテトリスの枠を作る まず最初にテトリスの枠を作ります。テトリスの枠は横が12個、縦が22個のブロックでできています。なので下の図のようにそのブロック箇所へ1を立てて、ブロックを描画していけばよいことになります。 単純に書くと以下のようになりますが、それを少し整理してchar field[FIELD_HEIGHT][FIELD_WIDTH];のフィールドに値を格納する書き方に変更すると以下のようになります。 # 単純に書いた方 #include <stdio.h> #include <memory.h> #define FIELD_WIDTH 12 #define FIELD_HEIGHT 22 int main() { for (int i = 0; i < FIELD_HEIGHT; i++) { for (int j = 0; j < FIELD_WIDTH; j++) { if (j == 0 || j == FIELD_WIDTH – 1 || i == FIELD_HEIGHT – 1) { printf(“■”); } else { printf(” “); } } printf(“\n”); } } # 整理した方 #include #include #define FIELD_WIDTH 12 #define FIELD_HEIGHT 22 char field[FIELD_HEIGHT][FIELD_WIDTH]; int main() { …

no image

docker-composeでGoのWebサーバーを起動する

ミニマムにやっておかないと忘れがちなのでメモ サンプル用Goサーバを作成する package main import ( “encoding/json” “net/http” ) type User struct { FirstName string `json:”firstName”` LastName string `json:”lastName”` } func users(w http.ResponseWriter, req *http.Request) { w.Header().Set(“Content-Type”, “application/json”) user := User{ FirstName: “John”, LastName: “Doe”, } var users []User users = append(users, user) json.NewEncoder(w).Encode(users) } func main() { http.HandleFunc(“/users”, users) http.ListenAndServe(“:8002”, nil) } 普通に起動して動作確認をします。 $ go run main.go http://localhost:8002/usersにアクセスするとJSON結果が出力されます。 [ { “firstName”: “John”, “lastName”: “Doe” } ] Dockerfile FROM golang:1.14 #FROM golang:1.14-alpine # コンテナログイン時のディレクトリ指定 WORKDIR /opt/sandbox-docker-compose-go # ホストのファイルをコンテナの作業ディレクトリにコピー COPY . . # ADD . . # ビルド RUN go build -o app main.go # 起動 CMD [“/opt/sandbox-docker-compose-go/app”] docker-compose.ymlファイル version: ‘3’ …

GORMでよく使うSQLの書き方

GORMでよく使うSQLの書き方をメモとして残しておきます。詳細は記事最後の参考リンクの公式ドキュメントで確認できます。 CREATE insertするだけであれば create を利用します。 db.Create(&models.User{Name: “user”}) # 実行SQL INSERT INTO “users” (“created_at”,”updated_at”,”name”,”email”) VALUES (‘2020-04-25 11:22:00′,’2020-04-25 11:22:00′,’user’,0) UPDATE 特定のフィールドだけ更新したい場合、 Update と Updates を使います。 update 一つのフィールドだけアップデートします。 user := &models.User{Name: “user”} db.Create(user) db.Model(user).Update(“name”, “user2”) # 実行SQL INSERT INTO “users” (“created_at”,”updated_at”,”name”,”email”) VALUES (‘2020-04-25 11:34:39′,’2020-04-25 11:34:39′,’user’,”) UPDATE “users” SET “name” = ‘user2’, “updated_at” = ‘2020-04-25 11:34:39’ WHERE “users”.”id” = 5 updates updates は map を利用して複数のフィールドをアップデートします。 user := &models.User{Name: “user”} db.Create(user) db.Model(user).Updates(map[string]interface{}{“name”: “user3”, “email”: “g5.taisa831@gmail.com”}) # 実行SQL INSERT INTO “users” (“created_at”,”updated_at”,”name”,”email”) VALUES (‘2020-04-25 11:39:52′,’2020-04-25 11:39:52′,’user’,”) UPDATE “users” SET “email” = ‘g5.taisa831@gmail.com’, “name” = ‘user3’, “updated_at” = ‘2020-04-25 11:39:52’ WHERE “users”.”id” = 6 SAVE Save は SQL を実行する際にすべてのフィールドを含みます。フィールドを指定しなくても空にはなりません。 user := &models.User{Name: …

no image

2020年の抱負

気づけば長年PHPの環境にいましたが、昨年あらたな環境で開発できるようになったのでこれらを軸にビジネスにつなげていきたいと思います。 毎年書いていますが、自分は積んでるエンジンが小さい上に車体も故障気味なので多くのことはできないですが、できる限り工夫してやっていきます。 GolangVueJSReactTypeScriptAWSPython (Flask)執筆ブログ継続 中長期的な話 3~5年スパンで中長期的なことを考えてやりたいこと・やらないことを決めて微調整しながらコツコツやっていますが、昨年環境が変わったこともありあらためて少し考え直しました。 楽しく仕事をする 今がめちゃくちゃ楽しいのでこれを維持したいのが本音です。ビジネスが広がりつつこれを維持しつつ更によくすることに注力します。 良いプロダクト良いメンバー良い技術スタック これが自分の意識する3本柱です。どれがかけてもだめなのでこれらをどうするかを考えて行動します。 生活面 体力の衰え、太りやすさを感じる年齢にもなってきたので昨年末から下記をするようになりました。これらをスモールスタートで継続します。 腕立て・スクワット・プランクランニング家で飲みすぎない家でタバコをなるべく吸わない ブログ書くネタが沢山できて嬉しい限り。そして何より「家内安全」「健康第一」で!