テックタッチのバックエンドエンジニアの taisa です。 社内勉強会で、Visual Studio Code（以降 VSCode と記載）ナレッジ共有会を実施したのでその内容を紹介します。 今回の趣旨は「VSCode で各自がよく使う機能やショートカット、ちょっとしたノウハウを共有することで開発効率を向上させたい」というものです。自分自身 VSCode を使いこなせておらず、他のメンバーの使い方に興味がありました。共有会では、みんなで順番に画面共有しながら進めていきました。 コマンドパレット編 シンボル検索編 ショートカット編 最近開いたプロジェクトを開く 最近開いたファイルを開く / ファイルを検索する サイドバーを開く/ 閉じる、パネルを開く/ 閉じる、エクスプローラを開く 指定のエディタに移動する Grep する 特定の文字列を選択して置換する 定義へ移動、直前の場所に戻る、直前の

とある大規模開発プロジェクトの中で WebView 用のフロントエンドシステム開発を立ち上げて2ヶ月経ちました。Android, iOS専任のエンジニアがいないため、外部協力者の指導のもと、モバイルアプリの画面を WebView で作るためです。 ある程度その営みについて見えてきたものがあるので記事にまとめることにしました。 プロジェクト参加人数は30名以上 プロジェクト自体は4ヶ月前から動いてる このプロジェクトへのフロントエンドチームの参加は1月から 現在 WebView とモバイル・バックエンドなどの結合試験をはじめている 背景 去年12月いまの会社にテックリードとして入社し、前述とは別のプロジェクトでフロントエンドチーム立ち上げを行っていました。同タイミングで、いまの会社に誘ってくれた飲み仲間もテックリード・チームリーダーとして入社しています。フロントエンドチームはこの2名がプロパ

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料

はじめに 飲み物じゃないIPAをご存じでしょうか？ 漢字でいうと、独立行政法人 情報処理推進機構ですね。情報処理技術者試験を実施いる謎の組織という認識の方も多いと思います。 実はIPAはいろんなドキュメントを公開していてQiitaやZenn以上にお役立ちなサイトなのです。 まあ、AWSをどうこうとか、FireabaseやNext.jsのようなキラキラした奴は基本載ってないので特に代替えするものではないですが、ブログとかはまた種類の違った情報があるので個人的には結構使うことあります。しかも 「日本語」！　こういう感じの事をTwitterでつぶやいたところ意外にイイねをされたので、せっかくだしどんなドキュメントがあるかちょっと紹介したいと思います。 セキュリティ関連NIST文書 まずはNISTドキュメントの翻訳版！ これは良いですよね。NISTはアメリカの米国国立標準技術研究所で、セキュリティ

Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。 それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・ダークモード、テーマカラーの変更など、非常に便利です。 tailblocks -GitHub tailblocksの特徴 tailblocksのデモ tailblocksの特徴 tailblocksは、Tailwind CSSですぐに実装できるUIコンポーネントをまとめたものです。Tailwind CSSはUIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するCSSです。 参考: Tailwind CSSの便利な使い方、レイアウトやUIコンポ

DIYが趣味のブロガー・すけさんが、自宅や賃貸物件でDIYした様子を紹介します。すけさんのモットーは「部屋を自分のライフスタイルに合わせるDIY」。初心者がDIYを始める際に知っておきたいコツを、壁面本棚、カウンターテーブル、ベランダウッドデッキなどを例に解説します。 こんにちは。「99% DIY」というブログ・Youtubeチャンネルで自分の理想の暮らしを作る過程を発信しているすけです。 人生で大半を過ごすのが自宅の部屋。その部屋で日々暮らしていると「ここの壁面に棚があれば生活が便利になるのに」とか「床が天然の木だったら毎日ご機嫌に過ごせるのに」と思うこともありますよね。 僕は自宅をDIYでリノベーションしながら暮らしていて、生活の中でこれがあれば便利だなと感じると、そのたびに自分にとって住み心地がよくなるように部屋をアップデートしています。 「DIY」と聞くと難しそう……と思われるかも

アメリカに8年も住んで、現地の人との交流が生活の90%を締めていると忘れがちですが、英語でメールって大変ですよね。大変なんですよね...TAしながらで1年半ぐらい毎日英語でメール50+通打ってどうにか書けるようになりましたが、あの経験がなければ今もメール打ててないと思います。 英語力ゼロでもなんとか海外の方とメールをしていますが、やはりフリーの翻訳だけでは限界を感じます。先日購入したこの「クリエイターのためのやさしい英語&英文パターン1500」は、かゆいところにも手が届く文例がたくさんあってすごく役に立ってます！あと、絵もステキ✨⁰https://t.co/FIZy3WcB5A pic.twitter.com/LVmAsa2eTZ — サタケシュンスケ｜イラストレーター（20年2月個展 東京浅草） (@satakeshunsuke) November 16, 2019 フリーランスでは海外

若手Javaエンジニア必見。知っておきたいフレームワーク・ツール23選 システム開発において、登場頻度が非常に高いJava。数多くのフレームワークやツールが存在しますが、一体どれを選べば、効率的な開発が行えるのでしょうか。おすすめのものを一挙にご紹介します！ システム開発をする際、欠かせない存在なのが各種フレームワークやツールです。これらを導入することで、工数の削減やアプリの品質向上、セキュリティの堅牢化など数多くの利点があります。中でもJavaのフレームワーク・ツールは、Javaを開発に使用している企業の多さゆえ、利用される頻度も高いものです。 しかし、それらは数えきれないほどの種類があるため、知識の少ない若手のうちは「どれを選べばいいんだ……」と途方に暮れてしまうケースも少なくありません。 そんな悩みを解決するため、今回はよく使われるものから珍しい機能のもの、最近注目されているものまで

2019年5月22日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第20回となる今回のテーマは「正しいゲーミング Web サーバーの作り方」。株式会社gumi、CTOの幾田雅仁氏が、自身の経験をもとにさまざまな事例について解説します。後半パートとなる今回は、ゲーム本体のデータストア設計のコツや、言語・サービスなどの技術選定における考え方について語りました。講演資料はこちら ゲーム本体のデータストア設計のコツ 幾田雅仁氏（以下、幾田）：続いて「RDBMS＋NoSQL」です。 先ほどと同じ流れですが、ゲーム本体のデータストアの設計のコツを1つ挙げると「共有データの整合性を担保する」ことです。 ゲームの本体以外のマイクロサービスって、裏側はNoSQLがメインデータでぜんぜんOKなんで

jser.md はじめに JavaScript を使っていると「JavaScript出来るの？ jQuery / AngularJS / Node.js etc... で困ってるんだけどさー」みたいな話を振られることがあります。 そういった時に、自分は一般的なライブラリの使い方やフレームワークに対して大した知見も興味もないので、わざわざ説明するのも面倒なのでこうして文章にしておきます。(本当に届いて欲しい人に限って、こういう文章が届かないのはわかっていますが、文章を書くこと自体が気晴らしだと思って諦めます。) 「フロントエンドエンジニア」という言葉の汎用性 先ほどのような話は自分に限ったことではなく、たぶん経験のある人も多いでしょう。 振られた話が自分の分かる範囲、あるいは興味のあるものならばまだ良いのですが、そうでないことがあまりに多すぎます。 話を振られるだけならともかく「JavaSc

背景 postd.cc という記事がちょっと前にありました。 github.com Roadmap to becoming a web developer in 2018って最近のWeb技術のまとめみたいなもんもよく引き合いに出されます。 このまとめの中にフロントエンドのものありますが、これはフロントエンド技術自体のロードマップです。 これらの技術すべてに精通していればいいのかと言われるとそんな必要は全く無くて。 でも現場によって実際 フロントエンドエンジニアに求められているものはそれ以外にもたくさんあるんですよね。 会社によってマジでJavascriptプログラミングしかやらない人も、マークアップする人、デザインを作ってそれをCSSに落とす人、本当に一口にフロントエンドエンジニアと言っても幅広すぎ。 担当範囲が広すぎるフロントエンドエンジニアに関していろんな会社が募集してると思うんですが

https://dmm.connpass.com/event/125120/ 最近のDMMのフロントエンドの動向とその先について Twitter https://twitter.com/ur_uha CTO室 千葉弘太郎 デザイナ => エンジニア 1. 体制とフロントエンドの関わり 去年より変化してきた 事業部制 CTO室は何をしているか？ 事業部支援 制度支援 啓蒙活動 炎上対応など SRE

Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を

個人用メモです。 *めちゃくちゃ昔の記事なのでasync系のプラグインが無かったりneovimじゃなかったり色々恥ずかしいですが、エンタメ的な気持ちで読んで頂ければ幸いです。 今回は、自分が味噌漬けに育ててきたvimを、初心者の方でもコピペで簡単に再現できるように3分で作っていきます。 ※中央上がエディタ画面、左がディレクトリツリー、右上がターミナル、下がエディタで開いてる機械学習ファイルの実行ログ。全てvimで出してます。 今回は以下の内容を紹介していきます。 インサートモードでもマウスでコピーアンドペースト ファイルのツリー表示 16言語の補完(ディレクトリ補完も有) vim画面でプログラム実行/出力 vim画面でシェルを開く 各種便利ショートカット 覚えづらいコマンドのショートカット化 まずは必要なライブラリのインストール " setting if has('vim_starting

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

ドットインストール代表のライフハックブログ

CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。

お久しぶりです。 今日は技術的な話題では無いですが、社外・社内にメールを出す時のテンプレ的なものを紹介したいと思います。 初めに言いますが、クッッソどうでも良い話題です。面接のスーツに何を着るかぐらいどうでも良い話です。 ただ、学生だと志望会社にメールを出すときに変に文面悩んだり、エンジニアだと社外にメール出す経験があまり無くて変に文面悩んだりとか、ここで悩むのは更に無駄なので、 ニートという身軽な身分のうちに、日本の会社で大体OKっぽいメールの書き方を適当に紹介します。 アホらしいですがメールの行間から仕事慣れてない感がでるとマイナス印象になったりもするので、それっぽいメールの書き方は知っておいて良いかもしれません。 自分もコンサルの新卒の時にいきなりクライアントにメールするのは怖かった記憶があるので、自分が学生の時に知りたかった内容的なのを書いておきます 業務メール書き方チートシート

Webデザインとかサイト制作について、知ってる事知らない事を展開するサイト。

今日からはじめるGitHub ～ 初心者がGitをインストールして、プルリクできるようになるまでを解説 エンジニアであれば、チーム開発ではもちろんのこと、個人開発でもGitを用いてバージョン管理していきたいもの。今回は、GitやGitHubをはじめて使う人に向けて、導入から初歩的な使い方までを解説します。 ソースコードの管理はできていますか？ ファイルを修正するときに、修正前のソースコードをhoge.php.bakのようなバックアップファイルとして残し、開発環境をゴミだらけにしていませんか？ エンジニアであれば、チーム開発ではもちろんのこと、個人開発でもGitを用いてバージョン管理していきたいもの。今回は、GitやGitHubをはじめて使う人に向けて、導入から初歩的な使い方までを解説します。 ここではGitの詳細な仕組みには触れません。GitやGitHubを利用したことのない人が、Gitを