『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪

はじめに こんにちは！Offers を運営している株式会社 overflow の バックエンドエンジニアの takkun7171 です。 エルデンリングをクリアして、Apex のランクを再開したところ、 初のソロダイヤを達成しますた。齢 40 過ぎのオッサンでも、やればできるんだから！！w さて、技術ブログなんですが、今回は技術というよりも Web エンジニアとして個人的に大事だと思ってる、ノウハウ・心構えについて 書いてみようかなと考えてます。 初心者向けというわけではないのですが、 4 月ですし、新人エンジニアの方も増えるということで 初心者の方にも読んで頂きたいです。 そこそこ分量があるので、前後編に分けて、 前編はハードスキル中心、後編はソフトスキル中心で書いてみます。 後編の記事 自分はマネージャーでも CTO でもなく一介のエンジニアでしかありませんが、 Web エンジニア歴は

RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得するAPIレスポンスから都道府県一覧のチェックボックスを動的に生成する都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない） React/Vue.jsのいずれかを用いてSPAを構築すること（バージョンはできるだけ最新版をご使用ください）ReactVueNuxt.jsやNext.jsなどの、これらを内包したフレームワークの利用も許可する都道府県一覧および総人口情報はRESAS APIのデータを用いることグラフは Highcharts や Rechar

Docker創始者らが開発、ビルド／テスト／デプロイの自動化をポータブルにするツール「Dagger」登場。そのままローカルでもGitHubでもCircleCIでも実行可能に Dockerの創始者であるSolomon Hykes氏らが中心となって開発しているオープンソースのCI/CD環境構築ツール「Dagger」が公開されました。 Windows、Mac、Linuxで試すことができます。 And we are live! Introducing Dagger, a new way to build CI/CD pipelines. By the creators of Docker. https://t.co/DU8racmoUo — dagger (@dagger_io) March 30, 2022 Daggerが定義したCI/CDパイプラインはポータブルになる Daggerとは「A P

画像出典: https://www.ipa.go.jp/files/000017316.pdf こんにちは。株式会社Flatt Security セキュリティエンジニアの奥山です。 本稿では、独立行政法人 情報処理推進機構(以下、IPA)が公開している資料「安全なウェブサイトの作り方」を紹介します。 「安全なウェブサイトの作り方」は、無料で公開されているにも関わらず、Webセキュリティを学ぶ上で非常に有用な資料です。これからWeb開発やセキュリティを勉強したいと考えている方はもちろん、まだ読んだことのない開発者の方々にも、ぜひ一度目を通していただけたらと思います。 一方、「安全なウェブサイトの作り方」では、一部にモダンなアプリケーションには最適化されていない情報や対象としていない範囲が存在します。それらについても本記事で一部、触れていきたいと考えていますので、資料を読む際の参考にしていただ

【PR】 三重県立松阪高等学校は、創立110年を超える歴史ある進学校。2021年、3期目となる文部科学省のスーパーサイエンスハイスクール(SSH)事業の指定を受け、科学技術系人材を育成するためのカリキュラム開発・実践を行うとともに、大学・研究機関との連携、地域の特色を生かした課題研究に取り組んでいる。情報科　羽根亨教諭にMonaca Educationを活用したプログラミング授業について話をきいた。 SSH指定校である松阪高等学校では、情報科目も探究活動に組み込み独自カリキュラムを実施する。課題解決に向かうようなプログラミング授業にしたいと情報科　羽根教諭は考えた。適切な教材や学習環境を探していた時、日本情報科教育学会の研修会で出会ったMonaca Educationを思い出し、採用を決める。利点として、生徒、教員にとって環境構築の負担が無いことをあげた。インターネットとブラウザさえあれば

はじめに こんにちは。バックエンドエンジニアの小笠原です。 今回は、2022年2月18日から2022年3月4日にかけて発生していたこちらの障害に対し私達開発チームが実施した、session.cookieで定義しているCookieのkey名を変更するという影響範囲の大きい対応について、実施に至るまでの経緯や対応過程についてご紹介したいと思います。 ショップオーナー向けに掲載していたお知らせの内容 背景 全ては iOS14.5から端末識別子の取得に同意が必要になったことから始まった ことの発端は、iOS14.5以降からIDFA（端末ごとに持つ固有識別子）の取得に端末所有者の許可が必要になったことでした。 この変更は、端末所有者側から見ると情報の活用範囲を自身で管理できることでよりプライバシーに配慮されるようになった良い変更と言えるでしょう。 一方で、広告出稿側から見た場合は拒否をしたユーザーの

こんにちは！CTO統括室の黒崎(@kur_m88)です。2022年度のサイバーエージェントには新卒のエンジニアが約90名入社してくれました。 アフターコロナー1期生の新入社員へ、代表藤田からのメッセージ 2014年までエンジニアブログを遡ると、こんな企画がありました。この企画を8年ぶりに復活させてみようと思います。 #e100q 新人エンジニアにお勧めする一冊 思いつきで企画してみたので100人に聞く時間はありませんでしたが、約40名から返事をもらえました。 社内でアンケートを募集した様子 おすすめする一冊の被りが多ければランキング形式にしようと思っていたのですが、あまり被りがありませんでした。 ちょっと分量が多いですがせっかくなので全部紹介しようと思います。 先輩エンジニア達から新人エンジニアに向けた言葉ももらったので、最後に載せてあります。ぜひ最後までご覧ください！ 新人エンジニアにお

この記事をまとめようと思った理由 そもそもUMLについて結構な頻度で言葉として聞くが、実際に私が理解しているとは思えなかったたのでいろいろ調べてみました。 UMLとは Unified Modeling Languageの略称で Unified(統一された) Modeling(モデリング) Language(言語) ソフトウェアを形式化するための統一されたモデリング言語のこと 分かりにくいので言い換えると ソフトウェアの機能や構造を表す「図」の描き方 UMLのダイアグラム UMLには用途によっていくつかダイアグラムがあります。 1 クラス図　(Class Diagram) あるクラスがどのクラスとどのような関係があるのか、どのような変数を保持しているのかなどを視覚的に理解することができます。 2 パッケージ図 (Package Diagram) パッケージには複数のクラスがまとめられています

たまには軽い話題をば。 自分の中で信頼できるエンジニアかどうか？を見極めるひとつの指標で「込み入った議論の時に図を書くかどうか」というのがあります。 今までの経験上、図を書く派のエンジニアは割と良い感じの人が多かったので採用している指標なのですが、何故これが機能しているかというのを改めて考えてみた。 他者の認知負荷を理解している コンテクストを合わせることにコストをかけられる意識がある 自分の思考の整理するツールとして図を扱えている ザッと挙げましたが、この３つが機能している要因なのかなという気がしています. 他者の認知負荷を理解している あれやこれやエンジニア間で技術議論している中で、「Aさんはこの領域に詳しいけどBさんはこの領域にはほどほど詳しいくらいだな」という個々のレベル差に応じて認知の負荷がかかります。ただでさえ議論していると結構なスピードで話が展開されていくので、認知負荷が更に

私はクラウドのプロダクトチームで働いているが、何を隠そう一番苦手で克服できていないことが、コードリーディングだ。ものすごーく時間かかるし、時間かかったうえに読み間違えたりするし、しかもめっちゃ頭使うのに他の人はずっと速いので敗北感しか残らない。先日もマネージャの Pragna に相談したら、最初は２時間かかるけど、３か月もしたら５分で終わるわよ。って言われたけど、いや、そもそも俺４時間は最低かかるねんけどな、、、って感じ。 技術イケメンの皆さんのアドバイス　よくよく私のキャリアを考えると、OSSにコントリビュートとかしていることはあったが、めっちゃくちゃ巨大でややこしいコードベースを読んで理解する必要が無いことが多かった。１からコードを書くのは得意だが、他の人のを読んでがっつり理解してとか、どうやったら出来るのかわからない。 当然自分の周りの技術イケメンの皆さんにコツを聞いていたのだが、ど

こんにちは！電通デジタル開発部エンジニアのリチャードです。 技術ドキュメントを書く際に効果的な図解を用いると、文章だけの場合より内容も見やすくなります。 また図の見やすさだけでなく、描き変えやすさも重要です。その理由はソフトウェア開発の現場における技術ドキュメントは、継続的に更新し続けることが多く、図もそれに従って描き変えるからです。 この記事では見やすく描き変えやすい図解を作成するテクニックとして「図の分割」を紹介します。数ある図解テクニックの中でも、すぐに使えて効果の大きいものなのでぜひ利用してみてください。 1つの図に情報を詰め込みすぎない図の分割テクニックの詳細をお話しする前に、その反対である、たくさんの情報を1つの図に詰め込んでしまう例を紹介します。 以下はAWS上に構築した架空のアプリケーションのインフラ全体図です。図中の要素の数が多いので、見て理解するには時間がかかりますし、

こんにちは。 在宅の機会が増えて以来Youtubeを見る機会が増え、機械学習などが勉強できるチャンネルをいくつか探しては見ていました。探した中でよかったと思ったものをメモしていたのですが、せっかくなので公開したいと思います。日本語のソースがあるもののみ対象にしており、『これ無料でいいのか？』と思ったチャンネルを紹介したいと思います。主観で以下のレベルに分けましたがあくまで参考程度にお願いいたします。 基本：Pythonを触ってみた人 Pythonの説明・動かし方などを解説していて、動画によっては踏み込んだ内容になる 応用：アルゴリズムを使いこなしたい人 「model.fit(X, y)して動かしてみた」よりも踏みこみ、Python自体の説明は少ない 発展：研究開発もしたい人 最新の手法の仕組みの理解などが主眼であり、Pythonの解説はほぼ無い もしおすすめのチャンネルございましたらぜひコ

キャッシュは、CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。(引用: フリー百科事典『ウィキペディア（Wikipedia）』) こんにちは、@kaa_a_zu です。私たちエンジニアは、「キャッシュ」というワードをよく口にしています。それはインフラの設計をしている時かもしれないし、表示されるコンテンツが変わらない時かもしれないし、パフォーマンスの改善をしている時かもしれません。普段何気なく使っている「キャッシュ」とは一体何なのでしょうか。この記事は、そんな「(Webフロントエンドを触るエンジニアが知るべき)キャッシュ」について、どんなものがあるのかがちょっと分かったという状態になることを目的に書いています。

自身のプライオリティによりますが、いくつか。 Markdownで幅広く再利用性を利かせたい、長期的に丁寧に版管理したい 自分自身の操作性、描きやすさと、見た目 俄然手軽に、短期的に、Onlineでいつでもどこでも いずれかという視点で考えると良いのかなと思い、並べてみました。 1. 長期的に: Markdownで幅広く再利用性を利かせたい、丁寧に版管理したいなら Markdownで描くことのメリットは再利用性。 将来的に追記・編集、自分以外の誰かが手を入れる可能性が高い。 現在のドキュメントだけでなく多種説明資料、媒体に転用する可能性がある。 ...という点で差分管理をしたいなら、以下。 VSCodeでPlantUML、Mermaid 上記参考で以下。 Alt+D でプレビュー起動。 Ctrl + Shift + P でコマンドパレットを起動し、出力。 png, svg, eps, pdf

どうもみなさんこんばんは ちょっと前に「個人開発者やスタートアップの初期からSPAで開発するのはコスト高いっすよね」みたいな事を書いたらフロントエンドエンジニアの皆様からバチバチに叩かれた僕です 彼らには彼らの考えがあるのでそれはどうでもいいのですが、どういう理由があってその発言をしたのか～と言う部分が気になっている方もいたようなので説明しておこうと思います ちなみに今でも全く意見は変わっておらず、この発言に同意できるかできないかは単純に視点の違い、規模の違い、スキルの違いだと思ってます 追記: もちろんSPAじゃないと実現できないようなサービスを作りたい場合はSPA一択ですし（インタラクティブにHPつくるサービスとか。でも世の中の95%くらいのサービスはそうじゃないと思います）、サイトの利用はログインした人にだけ提供するような業務系ツールなどはまた話が別です 前提の話 こういう記事ではコ

ここのところちょっと時間に余裕があり、暇を見つけてはQiitaの質問に答えるという取り組みをやっています。以前StackOverflowでも同様の取り組みをちょっとだけしてたことがあります。 9日間で35個の質問に回答してみて、正直に思うのは「質問の質が悪すぎるなー」ということです。ただ、どう質が悪いのか上手く言語化できず悶々としていました。 そんな折、今朝googleのおススメ記事に飛び込んできたQuaraのこちらの回答を読んで、「これこれ！こういうことよ！」という気持ちになったため、これから質問する人に向けてこの内容を少し嚙み砕いてまとめてみます。 ベテランはどうデバッグをしてるのか （自分をベテランと言っていいのかはさておき）日頃からコードを書いていると、デバッグには、その時使っている言語やフレームワークによらず、ある程度の行動パターンがあることに気付いてきます。 デバッグには難しい

「歯ブラシテスト」という言葉をご存知でしょうか？ google 創業者の一人であり現CEOであるラリー・ペイジが、2009年にgoogleのサービスを説明する際に用いた譬えです。 皆さんが自社のサービスを振り返る上でも活かせる考え方かと思いますので、紹介してみたいと思います。 Googleのラリーペイジが説く「歯ブラシテスト」の重要性 「歯ブラシテスト」がどういうものかというと、考え方はごくシンプルで、 “歯ブラシは１日２回使用する。そのサービスは、歯ブラシのように、毎日2回以上訪問し、活用する価値のあるサービスか” というものです。 この考え方は、ソーシャルやSaas型のサービスに適用される考え方です。 ECサイトの場合1日2回という指標は極端ですから、この場合は月に1度は定期訪問をしてみようと思えるかどうか、というところが基準となってくるでしょうか。 米国で、月に1度新商品を発表するこ

正規表現の"正規"って何 ある時ふと思いました。 「正規表現の"正規"って何だろう？」 「何を根拠に"正規"を名乗っているのか？」 と。 「誰かが『これが正規の表現だ』と言ったはず」で、 「それは周りにどうやって"正規"だと認められたのだろう」 ということが気になったので調べてみました。 "正規表現"という名前でなくて、"ジャックさんの表現"とか"記号ごちゃごちゃ表現"だったらこんな疑問も持たなかったのですけど。 数学における"正規"とは 一般に"正規"というと、"正規品"や"正規の手順"といったように"本物の(genuine)"や"公式な(official)"といった意味がありますが、数学の"正規"はちょっと違います。 数学で"正規"(および"正則"、英語では"regular"または"non-singular")は、ある概念に強い制限をかけたもの、という意味です。強い制限をかけたものは取